是什么
Vue (讀音 /vju?/嵌器，類似于 view) 是一套用于構(gòu)建用戶界面的漸進(jìn)式框架
漸進(jìn)式的含義是，可以逐步地使用這個(gè)框架的某些部分，而不是強(qiáng)制配合這個(gè)框架级零。
聲明式渲染
- data: { key: value } 與 <p>{{ key }}</p>
- data: { key: value } 與 <span v-bind:attr='key'>文本</span>
條件與循環(huán)
- data: { key: booleanValue } 與 <p v-if='key'>文本</p>
- data: { key: [] } 與 <p v-for='item in key'>{{ item.key }}</p>
處理用戶輸入
- method：{ functionName: function(){} } 與 <p v-on:click='functionName'>文本</p>
- data: { key: value } 與 <input v-model='key'>
組件化應(yīng)用構(gòu)建
- 任意類型的應(yīng)用界面都可以抽象為一個(gè)組件樹
- Vue里，一個(gè)組件本質(zhì)上是一個(gè)擁有預(yù)定義選項(xiàng)的一個(gè)Vue實(shí)例
- 注冊(cè)組件：
Vue.component('componentName", {
props: ['key']
template: '<p>{{ key.attr }}</p>'
})
- 使用：
<componentName v-bind:key='value'></componentName>
Vue實(shí)例
- 所有的Vue組件都是Vue實(shí)例
- Vue實(shí)例暴露了一些有用的實(shí)例屬性與方法泰鸡，帶有前綴$债蓝，以便與用戶定義的屬性區(qū)分開
- 實(shí)例生命周期hook，每個(gè)Vue實(shí)例在被創(chuàng)建時(shí)都要經(jīng)過一系列的初始化過程例如create, mounted, updated
- 不要在Vue定義的method或生命周期回調(diào)上使用箭頭函數(shù)盛龄，因?yàn)榧^函數(shù)沒有this
模板語(yǔ)法
- 文本插值：<p> {{ key }} </p>饰迹，將綁定同步更新，v-once指令可以取消同步更新
- 原始HTML：<p v-html='rawHtml'></p>
- HTML屬性的綁定要用v-bind：<div v-bind:id='dynamicId'></div>
- 使用Javascript表達(dá)式余舶，只能是單個(gè)表達(dá)式啊鸭，語(yǔ)句和控制流都無(wú)效
縮寫
- v-bind:href→:href
- v-on:click→@
計(jì)算屬性
- computed: { key: function() {} }和<p> {{ key }} </p>
- 計(jì)算屬性和方法的區(qū)別：計(jì)算屬性是基于它們的響應(yīng)式依賴進(jìn)行緩存的，如果相關(guān)依賴沒有改變匿值，會(huì)立即返回之前的計(jì)算結(jié)果赠制，不會(huì)執(zhí)行函數(shù)
偵聽器
- data: { key : value }, watch: { key: function() {} }，在key改變時(shí)挟憔，自動(dòng)執(zhí)行watch的函數(shù)
Class與Style綁定
- Class對(duì)象語(yǔ)法：<div v-bind:class="{ active: isActive }"></div>钟些，active這個(gè)class是否存在取決于isActive的真值
- Class數(shù)組語(yǔ)法：<div v-bind:class="[key1, key2]"></div>
- Style對(duì)象語(yǔ)法：<div v-bind:style="key"></div>
- Style的數(shù)組語(yǔ)法：<div v-bind:style="[key1, key2]"></div>
條件渲染
- v-if用于條件性地渲染一塊內(nèi)容，可以結(jié)合v-else使用
- v-if是一個(gè)指令绊谭，只能添加到一個(gè)元素上政恍，如果需要切換多個(gè)元素，可以用<template>包裹达传，并對(duì)該元素使用v-if
- v-else元素必須緊跟在v-if或者v-else-if元素的后面
- 避免元素被復(fù)用篙耗，需要添加不同的key
- v-show不管初始化條件是什么，元素總會(huì)被渲染宪赶，只是簡(jiǎn)單地基于CSS進(jìn)行切換宗弯，一般來說，v-if 有更高的切換開銷逊朽，而 v-show 有更高的初始渲染開銷罕伯。因此，如果需要非常頻繁地切換叽讳，則使用 v-show 較好追他；如果在運(yùn)行時(shí)條件很少改變，則使用 v-if 較好岛蚤。
列表渲染
- v-for指令邑狸，支持第二參數(shù)為index
- for可以被of代替，更接近js迭代器語(yǔ)法
- 遍歷對(duì)象可以用<div v-for="( value, name ) in object">
- 在使用v-for時(shí)提供key屬性涤妒，以便它能追蹤每個(gè)節(jié)點(diǎn)的身份
- push(),pop(),shift(),unshift(),splice(),sort(),reverse()方法都將觸發(fā)視圖更新
- items[index] = newValue這樣修改數(shù)據(jù)源數(shù)組是非響應(yīng)的单雾，不會(huì)觸發(fā)狀態(tài)更新，需要使用Vue.set(vm.items, indexOfItem, newValue)
- Vue不能檢測(cè)對(duì)象屬性的添加或刪除，同樣需要使用Vue.set(object, propertyName, value)
- v-for可以使用值范圍硅堆，<span v-for="n in 10"> {{ n }} 會(huì)輸出1到10的span
事件處理
- v-on指令用于監(jiān)聽DOM事件
- v-on的回調(diào)函數(shù)屿储，寫在Vue實(shí)例的method屬性中
- Vue為v-on提供了事件修飾符.stop .prevent .capture .self .once .passive，用于組織事件傳播等功能
- 按鍵修飾符渐逃，<input v-on:keyup.enter="method"> 只有按下enter才會(huì)觸發(fā)
表單輸入綁定
- 使用v-model指令在<input> <textarea> <select>元素上創(chuàng)建雙向數(shù)據(jù)綁定
- v-model會(huì)表單元素的value够掠、checked、selected特性的初始值而總是將Vue實(shí)例的數(shù)據(jù)作為數(shù)據(jù)來源茄菊，應(yīng)該通過組件的data聲明初始值
- 修飾符疯潭，.lazy（僅在change事件進(jìn)行同步）
組件基礎(chǔ)
- 組件的data必需是一個(gè)函數(shù)，data: { count: 0 } 是錯(cuò)誤的面殖，正確的應(yīng)該是 data: function () { return { count: 0 } }
- 父組件監(jiān)聽子組件事件竖哩，通過v-on:eventName，子組件通過$emit('eventName')發(fā)出該事件
