Vue

雙花括號：執(zhí)行表達式，將表達式的結(jié)果 輸出到當(dāng)前調(diào)用元素的innerhtml中

<any>{{表達式}}</any>

循環(huán)指令：根據(jù)in關(guān)鍵詞后的集合，去循環(huán)創(chuàng)建多個標(biāo)簽

<any v-for="(value,key) in collection"></any>

選擇指令：根據(jù)表達式執(zhí)行的結(jié)果的真假 來選擇是否要掛載到dom

<any v-if="expression"></any>
/*
v-if
v-else-if 
v-else
*/

事件指令：通過v-on去給指定的事件綁定一個處理函數(shù)

<any v-on:eventname="handleEvent"></any>
//簡寫===>
<any @eventname="handleEvent"></any>
new vue({
  methods: {
     handleEvent() {
       //some operations
     }
  }
})

屬性綁定: 將變量的值綁定到元素指定的屬性

 <img v-bind:src="myimage">
 a v-bind:href="mylink"
 <input v-bind:style='{backgroundcolor:mybgcolor}'
 v-bind:class='{myred:isred}'
 v-bind:disabled="!isvalid"/>
 
 <a v-bind:href="mylink"></a>
// 簡寫===》
 <a :href="mylink"></a>

v-show="表達式" 根據(jù)表達式執(zhí)行的結(jié)果的真假 來切換display顯示還是隱藏

v-html="變量" 根據(jù)變量更新對應(yīng)的innerhtml

以上都是數(shù)據(jù)到視圖的綁定

視圖到數(shù)據(jù)的綁定：將表單控件中（select、input、textarea..） 用戶操作的 結(jié)果 綁定到 數(shù)據(jù)
方式：v-model

<input type='text' v-model=''kw/>

<p>{{kw}}</p>

組件：組件是一個可被反復(fù)使用的，帶有特定功能的視圖
創(chuàng)建：

vue.component('my-button',{
  template:'<button>123</button>'
})

new vue({
 el:'#example'
 components:{
   'my-header':{
     template:'<p>test header</p>'
   }
 }
})

使用:

<my-header></my-header>
<my-button></my-button>

注意：
1.全局組件可以相互嵌套使用，而局部組件只能用在el所指定的容器范圍
2.組件類的命名要遵循烤串式
3.組件類如果要渲染多個元素，放到一個容器，直接返回多個元素會報錯

復(fù)合組件：就是一個普通的組件，該組件的模板中是包含其他的組件

vue.component('my-cart', {
  template:`<div>
     <my-header></my-header>
     <my-list></my-list>
     <my-footer></my-footer>
  </div>`
})

自定義指令

vue.directive('change-bg', {
   bind(el, binding) {
    //el是調(diào)用指令的元素
    //binding是一個對象，value
   },
   update() {},
   unbind() {}
})
//使用
<h1 v-change-bg="'#ff0000'"></h1>

過濾器：本質(zhì)就是一個帶有參數(shù)，帶有返回值的方法

//①支持多重過濾
//②支持傳遞參數(shù)
<any>{{expression | 過濾器(參數(shù)) | 過濾器}}</any>

自定義過濾器

vue.filter('currency',function(arg,arg1) {
  //arg是管道前面表達式執(zhí)行的結(jié)果
 return 處理后的結(jié)果
})

<p>{{30 | currency(1)}}</p>

watch屬性，作用：
①將表單元素用戶操作的結(jié)果 綁定到
指定的變量，比如uname
②監(jiān)聽

vue.component('my-component', {
   watch: {
     uname(){}
   }
})

計算屬性：依賴緩存，不會像普通的方法一樣在每次調(diào)用的時候 都會行；只會在依賴的數(shù)據(jù)發(fā)生變化時，才去執(zhí)行

vue.component('my-component',{
  computed:{
    myhandle(){
      //復(fù)雜的業(yè)務(wù)邏輯操作
    }
  }
})

<h1>{{myhandle}}</h1>

組件的生命周期：create、mount、update、destroy （每個都對應(yīng)有before,ed）