Vue入門教程 第四篇 （屬性、事件）

computed計算屬性

---

計算屬性（computed）在處理一些複雜邏輯時是很有用的。它的定義方式與methods類似。

 <div id="app">
   <div>
     name:{{name}}
   </div>
   {{reversedMessage}}
 </div>
  
 <script>
 var vm = new Vue({
   el: '#app',
   data: {
     name: 'Jimmy'
   },
   computed: {
     // 計算屬性的 getter
     reversedMessage: function () {
       return this.name+" welcome!"
     }
   }
 })
 </script>

執行結果：

 

我們可以使用 methods 來替代 computed，效果上兩個都是一樣的，但是 computed 是基於它的依賴緩存，只有相關依賴發生改變時纔會重新取值。而使用 methods ，在重新渲染的時候，函數總會重新調用執行。

watch監聽屬性

---

可以通過 watch 來響應數據的變化。

範例：

 <div id = "computed_props">
     正方形邊長 : <input type = "text" v-model = "length">
     正方形周長 : <input type = "text" v-model = "perimeter">
 </div>
 <p id="info"></p>
 <script type = "text/javascript">
     var vm = new Vue({
     el: '#computed_props',
     data: {
         length : 0,
         perimeter:0
     },
     watch : {
         length:function(val) {
             this.length = val;
             this.perimeter = this.length * 4
         },
         perimeter : function (val) {
             this.perimeter = val;
             this.length=this.perimeter/4
         }
     }
     });
 </script>

執行結果：

當操作邊長或周長時，watch都會監控到值的變化從而計算出對應的值。 

 

v-on事件綁定

---

v-on可以爲元素綁定事件，可以用@簡寫。

 <div id="app">
   <button v-on:click="showCount1">一號按鈕</button>
   <button @click="showCount2">二號按鈕</button>
 </div>
  
 <script>
 var app = new Vue({
   el: '#app',
   data: {
     count1: 0,
     count2: 0,
   },
   // 在 `methods` 對象中定義方法
   methods: {
    showCount1(){
        this.count1++;
        alert("一號按鈕已經被點擊了"+this.count1+"次");
    },
    showCount2(){
        this.count2++;
        alert("二號按鈕已經被點擊了"+this.count2+"次");
    },
   }
 })
 </script>

v-on的拓展

 <!-- 阻止單擊事件冒泡 -->
 <a v-on:click.stop="doThis"></a>
 <!-- 提交事件不再重載頁面 -->
 <form v-on:submit.prevent="onSubmit"></form>
 <!-- 修飾符可以串聯  -->
 <a v-on:click.stop.prevent="doThat"></a>
 <!-- 只有修飾符 -->
 <form v-on:submit.prevent></form>
 <!-- 添加事件偵聽器時使用事件捕獲模式 -->
 <div v-on:click.capture="doThis">...</div>
 <!-- 只當事件在該元素本身（而不是子元素）觸發時觸發回調 -->
 <div v-on:click.self="doThat">...</div>
 
 <!-- click 事件只能點擊一次，2.1.4版本新增 -->
 <a v-on:click.once="doThis"></a>

 

Vue 允許爲 v-on 在監聽鍵盤事件時添加按鍵修飾符：

 <input v-on:keyup.enter="submit">
 <!-- 縮寫語法 -->
 <input @keyup.enter="submit">

全部的按鍵別名：

• .enter
• .tab
• .delete (捕獲 "刪除" 和 "退格" 鍵)
• .esc
• .space
• .up
• .down
• .left
• .right
• .ctrl
• .alt
• .shift
• .meta