一竣灌、創(chuàng)建Vue實(shí)例

1.創(chuàng)建
實(shí)例property和方法

var vm = new Vue({
   // 選項(xiàng)
   el: '#app',
   data: obj,
   created: function(){} // 生命周期鉤子
})
// 可以使用$訪問vue實(shí)例property和方法：vm.$data  、vm.$el 

2. 生命周期
beforeCreate->
created->
beforeMount->
mounted->
beforeUpdate->
updated->
beforeDestory->
destroyed

二腐魂、模版語(yǔ)法

• 雙大括號(hào)-“Mustache”語(yǔ)法: {{變量}}
• v-once:一次性插值帐偎，數(shù)據(jù)改變，插值內(nèi)容不更新<span v-once>
• v-html：輸出真正的html蛔屹，替換元素的innerHTML<span v-html>
• v-bind:[attr] 或者 :[attr]: 綁定attribute削樊；attr可以是動(dòng)態(tài)參數(shù)值或者是表達(dá)式
• v-on:[eventName][.modifier(修飾符)]或者@[eventName]：監(jiān)聽DOM事件；eventName可以是動(dòng)態(tài)參數(shù)值或者是表達(dá)式兔毒。
• 指令：帶有v-前綴的特殊attriibute

三漫贞、計(jì)算屬性和偵聽器

1. 計(jì)算屬性：

• 使用：vm.comProperty
• 定義

computed: {
   comProperty1: function(){}
}

• 默認(rèn)只有g(shù)etter，可以自己提供一個(gè)自定義setter
• 特點(diǎn)：基于響應(yīng)式依賴進(jìn)行緩存，依賴發(fā)生改變時(shí)重新求值
• VS 方法：觸發(fā)重新渲染，方法會(huì)重新執(zhí)行函數(shù)
• VS 偵聽屬性watch：計(jì)算屬性直接拿到依賴動(dòng)態(tài)變量的新的計(jì)算結(jié)果穆碎；偵聽屬性監(jiān)聽動(dòng)態(tài)變化的變量或者函數(shù)的計(jì)算結(jié)果是己，從而做一些事情旅掂。

2. 偵聽器：

• 使用：

 watch: {
    variable: function(newVal, oldVal){}
 }

• 作用：當(dāng)某些數(shù)據(jù)變化時(shí)，需要執(zhí)行異步或者開銷比較大的操作

四、Class與Style綁定

1、class綁定

• 使用：

1. v-bind:class="{active: isActive}" 或者 v-bind:class="classObject" 
2. v-bind:class="[isActive ? cl1 : '', cl2]" 或者 v-bind:class="[{cl1: isActive}, cl2]"
   data:{
     cl1:'active',
     cl2:'danger'
   }

• 可以和普通class共存

2隐锭、style綁定

• 使用：

1. v-bind:style="{display: activeDisplay}" 或者 v-bind:style="{styleObject}" 
data: {
  activeDisplay: ['-webkit-box', '-ms-flexbox', 'flex'] // 只會(huì)渲染數(shù)組中最后一個(gè)被瀏覽器支持的值
}
2. v-bind:style="[baseStyles, overrideStyles]"

• vue會(huì)自動(dòng)偵測(cè)并添加css對(duì)應(yīng)的瀏覽器引擎前綴

五、條件渲染

1计贰、v-if

• 使用：v-if钦睡、v-else-if、 v-else
• 使用key標(biāo)記元素是獨(dú)立的躁倒，不復(fù)用
• 特點(diǎn)：惰性渲染荞怒，條件為假，則不渲染秧秉，所以切換開銷大褐桌。運(yùn)行時(shí)條件很少變，用v-if比較好福贞、
• 不要將v-if和v-for放在同一個(gè)元素上：v-for比v-if優(yōu)先級(jí)更高

2撩嚼、v-show

• 使用：v-show
• 特點(diǎn)：元素始終會(huì)被渲染，通過(guò)css切換顯隱挖帘，所以初始渲染開銷大完丽，但是切換開銷小。

六拇舀、列表渲染

1逻族、使用：

1. v-for="(item, index) in items" 或者 v-for="item of items" // items是一個(gè)數(shù)組
2. v-for="(val,name,index) in obj" // obj 是一個(gè)對(duì)象。按照Object.key()的結(jié)果遍歷
3. v-for="i in 10" // 遍歷1-10
4.// 在組件中使用v-for骄崩，使用v-bind將item作為props注入組件內(nèi)部
<my-component
  v-for="(item, index) in items"
  v-bind:item="item"
  v-bind:index="index"
  v-bind:key="item.id"
></my-component>

2聘鳞、維護(hù)狀態(tài)
列表更新時(shí)，如果順序改變要拂，vue默認(rèn)不移動(dòng)元素來(lái)匹配順序抠璃。所以應(yīng)該提供一個(gè)唯一的key（數(shù)值或字符串）來(lái)標(biāo)記每個(gè)節(jié)點(diǎn)的身份，從而重用和重新排序現(xiàn)有的元素脱惰。
3搏嗡、數(shù)值變更檢測(cè)
數(shù)組方法中改變?cè)瓟?shù)組的方法都會(huì)觸發(fā)視圖更新；不會(huì)改變?cè)瓟?shù)組只會(huì)返回新數(shù)組的方法不會(huì)觸發(fā)視圖更新拉一，但是可以使用新生成的數(shù)組替換掉舊數(shù)組
4采盒、注意

• 數(shù)組的改變不是通過(guò)數(shù)組方法的情況，vue不能檢測(cè)到數(shù)組和對(duì)象的變化（由于數(shù)組和對(duì)象的地址沒有改變）
• 在組件中使用v-for蔚润，key是必須的

七磅氨、事件處理

1、使用：

1. v-on:click="counter+=1" 或者 v-on:click="handleClick"
2. v-on:click="handleClick('hello',$event)" //在js中直接調(diào)用方法

八嫡纠、表單輸入綁定

1烦租、使用

1. v-model[.modifier]="inputVal"  // 在表單元素上創(chuàng)建雙向數(shù)據(jù)綁定。他會(huì)根據(jù)空間類型自動(dòng)選取正確的方法更新元素除盏。

2叉橱、工作原理
監(jiān)聽用戶輸入事件使用元素對(duì)應(yīng)的property更新v-modal綁定的表單值。

• text痴颊、textarea 監(jiān)聽input事件赏迟，使用value更新
• checkbox、radio監(jiān)聽change事件蠢棱，使用checked更新
• select監(jiān)聽change事件锌杀，使用value更新

3、注意
v-model會(huì)忽略元素的value泻仙、checked糕再、selected初始值，所以應(yīng)該通過(guò)data選項(xiàng)聲明初始值玉转。

九突想、組件注冊(cè)

組件命名：1.首字母大寫（大駝峰命名法） 2.短橫線分隔命名kebab-case
1、 全局注冊(cè)

Vue.component('my-componenta(組件名)',{
// 選項(xiàng)（除了el，其他根實(shí)例的選項(xiàng)都可以用）
  data: function() {
     return {
       a:1
     }
  } // data必須是一個(gè)函數(shù)
})

new Vue({
el:'#app'
})

<div id="app">
<my-componenta></my-componenta>
</div>

2猾担、局部注冊(cè)

var ComponentA = {name:'',...}
new Vue({
el:'#app',
components:{'component-a':ComponentA}
})

3袭灯、局部注冊(cè)的組件在其子組件中不可用
如果希望局部注冊(cè)的組件在子組件中可用,需要這樣寫：

var ComponentA = {...};
var ComponentB = {
components:{
  'component-a':ComponentA
  }
}

或者：
import ComponentA from './ComponentA.vue'

export default{
components:{
  ComponentA
  }
}

在對(duì)象中放一個(gè)類似 ComponentA 的變量名其實(shí)是 ComponentA: ComponentA 的縮寫，即這個(gè)變量名同時(shí)是：

• 用在模板中的自定義元素的名稱
• 包含了這個(gè)組件選項(xiàng)的變量名

4绑嘹、注意

• 在DOM中使用組件時(shí)稽荧，只有kebab-case是有效的
• 組件可以任意復(fù)用，每個(gè)組件維護(hù)自己的狀態(tài)工腋，每用一個(gè)組件姨丈，就會(huì)創(chuàng)建一個(gè)新實(shí)例。
• 每個(gè)組件必須只有一個(gè)根元素

十擅腰、Prop

1蟋恬、大小寫

• 使用DOM模板時(shí)，因?yàn)閔tml大小寫不敏感趁冈，所以父組件html中的props名應(yīng)該是kebab-case的歼争，子組件在js中接收的時(shí)候可以是駝峰命名的
• 字符串模板沒有這個(gè)限制

2、父組件傳遞prop

v-bind:title="post.title"
v-bind:post="post"
v-bind="post" // 傳遞一個(gè)對(duì)象的所有property

3箱歧、子組件接收prop

props: {
  title: String
}
this.title // 訪問

4矾飞、單向數(shù)據(jù)流：

• 父子prop之間形成單向下行綁定：父級(jí)prop的更新會(huì)向下流動(dòng)到子組件，但反過(guò)來(lái)不行呀邢。所以prop不可修改洒沦，防止子組件意外改變父組件狀態(tài)（prop是引用類型時(shí)），導(dǎo)致應(yīng)用數(shù)據(jù)流向難以理解价淌。

5申眼、prop驗(yàn)證

Vue.component({
  props:{
// 基礎(chǔ)的類型檢查 (`null` 和 `undefined` 會(huì)通過(guò)任何類型驗(yàn)證)
    propA:Number,
// 多個(gè)可能的類型
    propB:[String,Number],
//必填的字符串
    propC: {
        type: String/Number/Object,
        required: true,
        default: function () {
          return { message: 'hello' }
        },
        // default: 100,
        validator: function (value) {
           // 這個(gè)值必須匹配下列字符串中的一個(gè)
           return ['success', 'warning', 'danger'].indexOf(value) !== -1
        }
    }
  }
})

十一、自定義事件

1蝉衣、命名
事件用kebab-case命名
2括尸、使用

//監(jiān)聽事件
v-on:my-event = "n += $event"
//或者
v-on:my-event = "myEvent"
methods: {
  myEvent: function (arg) {
    this.n += arg
  }
}
//觸發(fā)事件
this.$emit('my-event', 1)

3、將原生事件綁定在組件上

• 使用native修飾符（局限：如果組件根元素不是表單元素病毡，沒有你監(jiān)聽的事件則會(huì)監(jiān)聽失敱舴）
• 使用$listeners 屬性

4、.sync修飾符

1. 子組件通過(guò)事件來(lái)修改父組件的property的情況啦膜，推薦以u(píng)pdate:myProperName的模式觸發(fā)事件

this.$emit('update:title',newTitle)

<my-com v-bind:title="doc.myTitle" v-on:update:title="doc.myTitle = $event"></my-com>
// 為了方便起見有送，提供一個(gè)縮寫：.sync修飾符
<my-com v-bind:title.sync="doc.myTitle" ></my-com>
// myTitle只能是一個(gè)property名，不能是表達(dá)式

//用一個(gè)對(duì)象同時(shí)設(shè)置多個(gè)prop僧家，doc只能是一個(gè)property名雀摘，不能是一個(gè)字面量對(duì)象
<my-com v-bind.sync="doc" ></my-com>

十二、插槽

v-slot取代了slot八拱、slot-scope這兩個(gè)attribute
1阵赠、普通插槽

• 使用：

<my-component>abc</my-component>

my-component中：<a><slot>當(dāng)父組件不提供插槽內(nèi)容的時(shí)候顯示</slot></a>

渲染結(jié)果： <a>abc</a>

• 編譯作用域
  父級(jí)模板的所有內(nèi)容都是在父級(jí)作用域中編譯涯塔；子模板的所有內(nèi)容都是在子作用域中編譯的

2、具名插槽

• 使用：

1.
<my-component>
    <p>dfg</p>
    <template v-slot="head">
         <h1>12345</h1>
    </template>
/* 廢棄的語(yǔ)法
    <template slot="head">
         <h1>12345</h1>
    </template>
*/
    <p>678</p>
</my-component>
my-component中：
<div>
   <header>
      <slot name="head"></slot>
   </header>
   <main>
      <slot></slot>  
   // 沒有name默認(rèn)name=“default”
   </main>
</div>
渲染結(jié)果：
<div>
   <header>
      <h1>12345</h1>
   </header>
   <main>
     <p>dfg</p>
     <p>678</p>
   </main>
</div>
2.插槽名也可以是動(dòng)態(tài)的
  <template v-slot:[dynamicSlotName]>
  </template>
3.插槽名縮寫
(v-slot:) => (#) 
 v-slot:header 可以被重寫為 #header
‘#’ 后面必須有參數(shù)清蚀，否則無(wú)效

• 注意
  1.匕荸。只有一種例外情況
  2.廢棄的slot attribute可以添加到任意元素上，包括普通元素

3轧铁、作用域插槽

• 作用：讓父組件的插槽內(nèi)容可以訪問到子組件的數(shù)據(jù)
• 使用：

1.在子組件的<slot>元素上綁定需要傳的值每聪，拿上述例子：
   <header>
      <slot name="head" v-bind:user="user"></slot>
   </header>
2.在父組件插槽中使用v-slot定義子組件提供的插槽prop的名字并使用
   <template v-slot:head="slotProps">
       <h1>12345</h1>
       {{slotProps.user.xxx}}
   </template>
  /*廢棄語(yǔ)法
  <template slot="head" slot-scope="slotProps">
    {{ slotProps.msg }}
  </template>
*/
 //  默認(rèn)插槽需要用在組件標(biāo)簽上旦棉。不帶參數(shù)的被指定為對(duì)應(yīng)默認(rèn)插槽相當(dāng)于v-slot:default="slotProps" 
   <my-component v-slot="slotProps">
     <p>dfg</p>
     <p>{{slotProps.user.xxx}}</p>
   </my-component>
3.插槽prop可以解構(gòu)齿风、重命名，也可以定義默認(rèn)值
 v-slot="{ user: person }"  // 使用：{{ person.firstName }}
 v-slot="{ user = { firstName: 'Guest' } }" // 使用：{{ user.firstName }}

• 注意
  1.子組件中被提供的內(nèi)容只有默認(rèn)插槽的時(shí)候绑洛，組件的標(biāo)簽才可以被當(dāng)作插槽的模版來(lái)使用救斑，也就是。存在多個(gè)插槽的情況真屯，不能簡(jiǎn)寫
  2.默認(rèn)插槽的語(yǔ)法不能和具名插槽混用脸候，會(huì)導(dǎo)致作用域不明確
  3.廢棄的slot-scope attribute可以添加到任意元素上，包括普通元素

十三绑蔫、動(dòng)態(tài)&異步組件

1运沦、動(dòng)態(tài)組件

• 在動(dòng)態(tài)組件上使用keep-alive元素包裹：可以在組件切換的時(shí)候，保持這些組件的狀態(tài)配深，以避免反復(fù)重新渲染導(dǎo)致的性能問題
• keep-alive要求被切換到的組件都有自己的name

2携添、異步組件

• 以工廠函數(shù)的方式定義一個(gè)組件，這個(gè)函數(shù)會(huì)異步解析組件篓叶，只有這個(gè)組件需要被渲染的時(shí)候才會(huì)觸發(fā)該函數(shù)烈掠，且緩存結(jié)果供未來(lái)重渲染。
• 使用：

1. 局部注冊(cè)
new Vue({
  // ...
  components: {
    'my-component': () => import('./my-async-component')
  }
})
2.全局注冊(cè)
Vue.component(
  'async-webpack-example',
  // 這個(gè)動(dòng)態(tài)導(dǎo)入會(huì)返回一個(gè) `Promise` 對(duì)象缸托。
  () => import('./my-async-component')
)
3. 處理加載狀態(tài)
const AsyncComponent = () => ({
  // 需要加載的組件 (應(yīng)該是一個(gè) `Promise` 對(duì)象)
  component: import('./MyComponent.vue'),
  // 異步組件加載時(shí)使用的組件
  loading: LoadingComponent,
  // 加載失敗時(shí)使用的組件
  error: ErrorComponent,
  // 展示加載時(shí)組件的延時(shí)時(shí)間左敌。默認(rèn)值是 200 (毫秒)
  delay: 200,
  // 如果提供了超時(shí)時(shí)間且組件加載也超時(shí)了，
  // 則使用加載失敗時(shí)使用的組件俐镐。默認(rèn)值是：`Infinity`
  timeout: 3000
})

Vue.component(
  'async-webpack-example',  AsyncComponent
)

十四矫限、處理邊界情況

1、訪問根實(shí)例

this.$root

2佩抹、訪問父組件實(shí)例

this.$parent

3叼风、訪問子組件實(shí)例

ref="inputRef"
this.$refs.inputRef

4、依賴注入

• 使用場(chǎng)景
  訪問祖先組件的數(shù)據(jù)
• 使用：

1. 祖先組件：
provide: function () {
  return {
    getMap: this.getMap
  }
}
2.后代組件設(shè)置inject選項(xiàng)接收數(shù)據(jù)：
inject: ['getMap']

十五匹摇、混入

• 混入對(duì)象可以使用任意組件選項(xiàng)咬扇。組件使用混入對(duì)象時(shí)，所有混合對(duì)象的選項(xiàng)會(huì)被混合進(jìn)該組件本身的選項(xiàng)廊勃。
• 使用

1. 基礎(chǔ)使用
// 定義混入對(duì)象
var myMixin = {
  created: function() {},
}
// 使用混入對(duì)象的組件
var Component = Vue.extend({
  mixins: [myMixin]
})
2. 全局混入
Vue.mixin(myMixin)

• 注意

1.組件和混入對(duì)象含有同名選項(xiàng)：

• 選項(xiàng)是對(duì)象：合并為一個(gè)對(duì)像懈贺，鍵名沖突经窖，取自身健值對(duì)
• 選項(xiàng)是方法：合并為數(shù)組，先調(diào)用混入對(duì)象的鉤子
• 數(shù)據(jù)：合并梭灿，沖突時(shí)以自身數(shù)據(jù)優(yōu)先

十六画侣、自定義指令

• 使用：

1. 全局注冊(cè)
Vue.directive('focus', {
//提供如下鉤子函數(shù)
// bind
// inserted
//update
//componentUpdated
//unbind
})
<input v-focus> //使用
2. 局部注冊(cè)
directives: {
  focus: {
   //提供的鉤子函數(shù)同上
  }
}
3. 給指令傳參/值
.   例如 v-my-directive:foo 中，參數(shù)為 "foo"堡妒。
        通過(guò)binding中的arg參數(shù)獲取 =》 binding.arg
.   例如：v-my-directive="1 + 1" 中配乱，綁定值為 2，也可以通過(guò)對(duì)象字面量傳多個(gè)值
        通過(guò)binding.value獲取

• 上述鉤子函數(shù)的參數(shù)

el:指令綁定的元素
binding：一個(gè)對(duì)象皮迟，只讀
vnode：只讀
oldVnode：只讀

十七搬泥、渲染函數(shù)&JSX

vue模板也會(huì)被編譯成渲染函數(shù)
1、渲染函數(shù)

• 使用

  Vue.component('name',{
      render: function(createElenment[, context]) {
             return createElement('h1',{attrs},[vnodes])    //返回一個(gè)VNode
      }
   })
1.createElement參數(shù)
   args1: 標(biāo)簽名伏尼、組件選項(xiàng)對(duì)象忿檩、或者resolve前兩個(gè)任意一個(gè)的async函數(shù)
   args2: 包含模板中attribute的數(shù)據(jù)對(duì)象（class、style爆阶、attrs燥透、props、domProps辨图、 
             on班套、nativeOn、directives故河、slot吱韭、ref、key忧勿、scopedSlots杉女、refInFor）
   args3: 由‘createElement()’構(gòu)建的子級(jí)虛擬節(jié)點(diǎn)、文本節(jié)點(diǎn)鸳吸。VNode唯一
2.創(chuàng)建的組件如果是函數(shù)式組件（無(wú)狀態(tài)熏挎、沒有生命周期、無(wú)實(shí)例(this上下文)）晌砾，提供context作為上下文
3.context是一個(gè)對(duì)象坎拐，包含（props、children养匈、slots()哼勇、data等）

2、JSX

new Vue({
  el: '#demo',
  render: function (h) {
    return (
      <AnchoredHeading level={1}>
        <span>Hello</span> world!
      </AnchoredHeading>
    )
  }
})
// h 作為 createElement的別名

3呕乎、slots() VS children

• slots().xxx 獲取具名插槽內(nèi)容
• children獲取組件內(nèi)所有內(nèi)容

十八积担、過(guò)濾器

1、用途

• 文本格式化

2猬仁、定義

1帝璧、全局定義
Vue.filter('myFilter',function(){})
2先誉、局部定義
filter選項(xiàng)
filter: {
   myFilter: function(){}
}

3、使用

1的烁、插值
{{ msg | myFilter('arg1',arg2) | myFilterA}}
// myFilter接收三個(gè)參數(shù) msg褐耳、‘a(chǎn)rg1’(普通字符串)、arg2
// myFilterA 接收 myFilter的返回值作為參數(shù)
2渴庆、v-bind表達(dá)式
v-bind:id="id | myFilter"