Vue_2

1 雙向綁定

:value的方式只能將內存中模型變量的值綁定到頁面，不能將頁面的修改自動同步到內存中的模型變量上——單向綁定

雙向綁定: 既能將內存中模型變量的值綁定到頁面，又能將頁面的修改自動同步到內存中的模型變量上。
v-model用於綁定可修改的表單元素
v-model:value=”模型變量”，簡寫: v-model=”模型變量”

原理: 所有帶v-model綁定的元素，都被加入一個監視隊列(watch)，由一個死循環不斷監視隊列中元素的內容變化。只要發生變化，就直接修改綁定的模型變量
監視函數: 只要監聽隊列中頁面元素變化，就自動執行的函數

1. 雙向綁定input文本

   //@keyup.13表示當鍵盤enter鬆開
   <input v-model="kwords">
   
   data:{ kwords:"請輸入搜索關鍵詞" },
   methods:{
     search(){
       console.log(`查詢 ${this.kwords} 相關的商品...`);
     }
   },
   watch:{//監視
     kwords(){//當模型變量kwords發生變化時，就自動執行
       this.search();
     }
   }
   

2. 雙向綁定radio

   <input type="radio" name="planes" value="img/p3.png" v-model="chosen">
   <img :src="chosen" alt="">
   
   data:{ chosen:"img/p0.png" }
   

3. 雙向綁定select

   <select v-model="city">
     <option>-請選擇-</option>
     <option value="img/bj.jpg">北京</option>
   <img :src="city" alt="請選擇城市圖片">
   
   data:{ city:"-請選擇-" }
   

2 綁定class和style屬性

1. 可將class和style作爲字符串綁定，拼接字符串很麻煩；

2. 用對象綁定class和style

   <ANY :style=”模型變量”> 模型變量是一個對象
   
   data:{
       模型變量:{
            Css屬性:值, //不能省略單位
             … : …
   }}
   

   <ANY class=”固定的class” :class=”模型變量”> 模型變量是需要改變的css屬性的對象，css屬性名需要加""，因爲命名中間可能有-號
   結果: class和:class最終會合併爲一個class=””

   <ANY class=”固定的class” :class=”模型變量”>
   
     data:{
   	模型變量:{
   	  “class名”:true, 表示啓用的class
   	  “class名”:false, 表示不啓用的class
     }}
   

3 計算屬性

計算屬性不實際存儲屬性值，依靠其他屬性動態計算獲得
優點: 只計算一次，結果可被vue緩存，後續使用該值時直接獲取而不用重複執行； methods中的方法，每綁定一次，就重複執行一次，不會被緩存

new Vue({
  computed:{
	計算屬性名(){
  		return 計算後的值
	}
  }
})

4 自定義指令

創建自定義指令:

  Vue.directive(“指令名”,{ //不要加v-
	 inserted(el){//噹噹前元素添加到DOM樹上後立刻執行！
     //el是純DOM元素對象
     //可用原生DOM API對el做任何事情
     }
  })

使用自定義指令: <ANY v-指令名>
需要在new Vue()之前定義

5 過濾器

如果原始數據不能直接使用，對原始數據進行再加工之後再綁定

比如: 日期: ms ->yyyy/mm/dd
性別: 1/0 –> 男/女
狀態: 數字: 10、20、30、40->未付款、已付款、已發貨、已簽收

定義過濾器:

Vue.filter("過濾器名", function(val,自定義參數){
    return 過濾後的新值
})

使用過濾器:
:屬性=”模型變量 | 過濾器” -> 實際綁定的結果是過濾器過濾之後的值，後續過濾器使用的val是上一過濾器返回的結果
{{模型變量 | 過濾器(參數值) | 更多過濾器 … }}

6 Axios

支持Promise的專門發送http請求的函數庫，用axios代替$.ajax(因爲今後可能Vue不再包含jQuery)

先引入axios.min.js

 Get: axios.get(“url”,{
         params:{ 參數:值, 參數:值, … }
      }).then(res=>{
          //res.data中才是服務端返回的結果
      })
 Post: axios.post(“url”,”變量=值&變量=值…”)
            .then(res=>{ … })