VUE是什么
vue是一套用來構(gòu)建用戶界面的JavaScript框架
在學(xué)習(xí)vue之前楞陷，必須要有HTML吟榴、CSS塘幅、JavaScript的扎實(shí)基礎(chǔ)
當(dāng)前vue的最新版本是2.x
VUE的使用
- 使用script標(biāo)簽引入
- 使用vue-cli來快速搭建腳手架
VUE實(shí)例
每一個(gè)vue應(yīng)用都是通過用vue函數(shù)來創(chuàng)建一個(gè)vue實(shí)例開始的：
var vm = new Vue({
//選項(xiàng)
})
每一個(gè)vue應(yīng)用骤竹，都是由一個(gè)通過new Vue創(chuàng)建的根Vue實(shí)例和可選的蛾派、可嵌套的俄认、可復(fù)用的組件樹組成盏触。
data對象
vue中的data對象里舶得，在vue實(shí)例創(chuàng)建的時(shí)候惕它，在其響應(yīng)式系統(tǒng)中加入了所有能在data中找到的屬性隆敢，當(dāng)這些屬性的值發(fā)生改變的時(shí)候屉佳，視圖也會(huì)響應(yīng)熊锭，一起改變拼缝。
var vm = new Vue({
data: data
})
除了數(shù)據(jù)屬性个扰，vue實(shí)例中還暴露了一些有用的實(shí)例屬性和方法巷波。它們都有前綴$萎津，可以和用戶定義的屬性區(qū)分開來
模板語法
文本
數(shù)據(jù)綁定最常見的是“mustache”語法，也就是雙大括號：
<span>Message: {{ msg }}<span>
雙大括號里的內(nèi)容將會(huì)被替代為數(shù)據(jù)對象上面的msg屬性的值褥紫，如果綁定的這個(gè)屬性的值發(fā)生改變姜性，那么大括號內(nèi)的內(nèi)容會(huì)跟著更新。
在數(shù)據(jù)綁定里髓考，還可以支持JavaScript表達(dá)式（非語句）部念。
內(nèi)部指令
vue內(nèi)部可以使用在HTML上，HTML會(huì)根據(jù)這些指令來執(zhí)行對應(yīng)的任務(wù)氨菇，響應(yīng)式地作用于dom儡炼。
v-html
雙大括號里會(huì)把數(shù)據(jù)解釋為普通文本，而不是HTML查蓉，所以如果想輸出真正的HTML乌询，那就要使用v-html命令：
<p>Using v-html directive: <span v-html="rawHtml"></span></p>
v-bind
假如你想像雙大括號語法一樣修改HTML的屬性，那么這時(shí)候用雙大括號就不行了豌研，需要使用v-bind語法：
<div v-bind:id="dynamicId"></div>
這個(gè)指令還有一個(gè)常用的縮寫形式：
<a :href="url"></a>
v-on
這個(gè)指令可以用來監(jiān)聽DOM事件妹田，并在觸發(fā)時(shí)運(yùn)行一些JavaScript代碼
<button v-on:click="counter += 1">Add 1 </button>
v-on里還可以接受一個(gè)需要調(diào)用方法的名稱唬党。
如果需要在內(nèi)聯(lián)語句處理器中訪問原始的DOM時(shí)間，可以使用特殊變量$event把它傳入方法鬼佣。
vue還為v-on提供了事件修飾符：
- .stop 阻止事件繼續(xù)傳播
- .prevent 提交的事件不再阻止頁面
- .capture 添加事件監(jiān)聽器時(shí)使用事件捕獲模式
- .self 只當(dāng)在event.target是當(dāng)前元素自身時(shí)觸發(fā)處理函數(shù)
- .once 點(diǎn)擊事件將只觸發(fā)一次
- .passive 滾動(dòng)事件的默認(rèn)行為將會(huì)立即觸發(fā)
按鍵修飾符
<input v-on:keyup.13="submit">
除了根據(jù)keycode來調(diào)用鍵值驶拱，還可以使用vue提供的別名，比如enter等晶衷。
條件渲染 v-if
條件渲染可以根據(jù)條件來決定是否渲染dom：
<h1 v-if="ok"></h1>
也可以使用v-else來添加一個(gè)else塊蓝纲，v-else元素必須跟在v-if 的后面。還有v-else-if晌纫。
當(dāng)想切換多個(gè)元素的時(shí)候税迷，可以在template元素上使用v-if，template就可以當(dāng)做不可見的元素锹漱。
假如兩個(gè)模板使用了相同的HTML元素箭养，在進(jìn)行切換的時(shí)候，這個(gè)元素是不會(huì)更新的哥牍，這時(shí)候就可以使用key值來給這個(gè)元素做一個(gè)綁定露懒，這個(gè)key值是唯一的，因此同一個(gè)元素上綁定的兩個(gè)key值可以讓這兩個(gè)元素都是獨(dú)立的砂心。
v-show
這個(gè)命令可以根據(jù)條件選擇是否展示元素。
<h1 v-show="ok">Hello!</h1>
v-if 和v-show的區(qū)別
v-if是真正的條件渲染蛇耀，在切換的時(shí)候會(huì)有適當(dāng)?shù)匿N毀和重建辩诞，如果是假，那么就會(huì)什么也不渲染纺涤。
而v-show則是一個(gè)改變元素display的指令译暂，只是基于CSS的切換。
v-for
v-for可以根據(jù)一組數(shù)據(jù)的選項(xiàng)列表來進(jìn)行渲染撩炊，語法比較特殊：
<ul id="example-1">
<li v-for="item in items">
{{ item.message }}
</li>
</ul>
var example1 = new Vue({
el: '#example-1',
data: {
items: [
{ message: 'Foo' },
{ message: 'Bar' }
]
}
})
其中的items是原數(shù)據(jù)數(shù)組外永，定義在data里，而item則是數(shù)組元素迭代的別名拧咳。也可以取整數(shù)表示重復(fù)伯顶。
v-for還支持一個(gè)可選參數(shù)，當(dāng)做數(shù)組的索引骆膝。
<ul id="example-2">
<li v-for="(item, index) in items">
{{ parentMessage }} - {{ index }} - {{ item.message }}
</li>
</ul>
其中的in也可以被of所替代 祭衩。
v-for還可以操作對象，通過一個(gè)對象的屬性來進(jìn)行迭代阅签。如果設(shè)置第二個(gè)參數(shù)key掐暮，那么就是屬性名。
當(dāng)使用v-for的時(shí)候政钟，如果更新已經(jīng)渲染的元素列表路克，那么v-for會(huì)就地復(fù)用樟结，為了方便它可以跟蹤每一個(gè)節(jié)點(diǎn)的身份，所以必須要給一個(gè)key值精算，每項(xiàng)都有唯一的id瓢宦。
變異方法
這些針對于數(shù)組的方法都能夠改變原始數(shù)組，而非變異方法則不會(huì)改變原始數(shù)組殖妇，而是返回一個(gè)新的數(shù)組刁笙。
和原生js的數(shù)組操作方法一樣，如push()等谦趣。
v-for和v-if
v-for和v-if處于同一節(jié)點(diǎn)的時(shí)候疲吸，v-for比v-if的優(yōu)先級要高。
表單輸入綁定
可以使用v-model指令在表單元素上創(chuàng)建雙向綁定前鹅。
<input v-model="message" placeholder="edit me">
<p>Message is: {{ message }}</p>
表單輸入綁定的修飾符
- .lazy修飾符可以轉(zhuǎn)變?yōu)槭褂胏hange事件時(shí)進(jìn)行同步
- .number 如果想自動(dòng)給用戶的輸入值轉(zhuǎn)為數(shù)值類型
- .trim 如果要自動(dòng)過濾用戶輸入的首尾空白字符
class與style綁定
我們可以給v-bind:class傳一個(gè)對象摘悴，動(dòng)態(tài)的切換class：
<div v-bind:class="{ active: isActive }"></div>
方法、計(jì)算屬性與偵聽器
數(shù)據(jù)我們可以定義在data里舰绘，方法我們可以定義在methods里蹂喻。
當(dāng)然，除了方法之外捂寿，還有一些復(fù)雜的邏輯口四，我們可以使用計(jì)算屬性。
<div id="example">
<p>Original message: "{{ message }}"</p>
<p>Computed reversed message: "{{ reversedMessage }}"</p>
</div>
var vm = new Vue({
el: '#example',
data: {
message: 'Hello'
},
computed: {
// 計(jì)算屬性的 getter
reversedMessage: function () {
// `this` 指向 vm 實(shí)例
return this.message.split('').reverse().join('')
}
}
})
與方法不同秦陋，計(jì)算屬性是基于它們的依賴進(jìn)行緩存的蔓彩，只在相關(guān)依賴發(fā)生改變時(shí)才會(huì)重新求值。
Vue還提供了一種更通用的方式來觀察和響應(yīng) Vue 實(shí)例上的數(shù)據(jù)變動(dòng)：偵聽屬性驳概。當(dāng)需要在數(shù)據(jù)變化時(shí)執(zhí)行異步或開銷較大的操作時(shí)赤嚼，這個(gè)方式是最有用的。
var watchExampleVM = new Vue({
el: '#watch-example',
data: {
question: '',
answer: 'I cannot give you an answer until you ask a question!'
},
watch: {
// 如果 `question` 發(fā)生改變顺又，這個(gè)函數(shù)就會(huì)運(yùn)行
question: function (newQuestion, oldQuestion) {
this.answer = 'Waiting for you to stop typing...'
this.debouncedGetAnswer()
}
}
