Vue.js應用基礎

 

一　　簡介

 

　　1，什麼是vue

　　Vue (讀音 /vjuː/，相似於 view) 是一套用於構建用戶界面的漸進式框架。所謂漸進式便是指咱們能夠經過Vue構建從簡單到複雜的頁面應用，而且Vue.js壓縮文件只有33K，構建簡單的頁面不會顯得臃腫，同時Vue構建的複雜頁面也不會顯得簡陋。

　　Vue實現了DOM對象和數據的雙向綁定，你不用直接操做DOM，這項工做徹底由Vue來完成，你能夠把更多的精力放到業務邏輯上來。

 

　　2，安裝

　　Vue目前最新的版本是2.6.x。固然，Vue也提供了開發版和生產版兩種文件。因爲Vue使用了ECMAScript 5的特性，因此IE8及以前版本的瀏覽器不被支持。

　　Vue支持多種方式安裝，<script>標籤、CDN，CLI以及NPM。學習階段建議使用MDN或本地引入。

　　若是你想構建大型應用，請使用NPM安裝，方便配合webpack或相似的打包工具。若是你正在開發單頁面應用（SPA），那麼Vue提供的CLI工具多是更好的選擇。這兩種方式請關注Vue官網。

1 //MDN 2 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> 3 //本地 4 <script src="js/vue.js"></script>

 

二　　vue實例

 

　　1，建立Vue實例

　　一般，每一個Vue的應用都是經過建立一個Vue實例開始的：

1 var vm = new Vue({ 2 // some code 3 })；

　　vm是ViewModel的縮寫，許多文檔或教程也使用app來接收返回的對象，這都無所謂了，你只要知道咱們須要聲明一個變量來接收Vue實例就好了。

　　在建立Vue實例時，你能夠傳遞一個對象，這個對象包含了你可能要用到的數據、方法、Vue實例生命週期鉤子等。稍後將一一講解。

 

　　2，數據

　　當一個 Vue 實例被建立時，參數對象的data屬性綁定的對象中的全部屬性都被加入到 Vue 的響應式系統中。當這些屬性的值發生改變時，視圖將會產生「響應」，即修改成新的值。通常這會體現到HTML頁面上。

 1 var obj = {name: 'ren'};  2 var vm = new Vue({  3  data: obj  4 });  5 //你能夠直接使用vm代替data來訪問其綁定的對象屬性（這裏是obj.name）  6 obj.name = 'pen';  7 vm.name;//'pen'  8  9 vm.name = 'ken'; 10 obj.name;//'ken' 11 //以上便可驗證Vue的數據雙向綁定

　　須要注意的是，要想實現數據的雙向綁定，在建立Vue實例以前，這些數據就應該已經被定義了。

1 //接上面的例子 2 obj.age = 12; 3 vm.age;//undefined

　　另外一個須要注意的點是Object.freeze()，該方法會凍結對象，阻止修改對象現有的屬性，這就意味了Vue的響應式系統沒法再對該對象起做用了。

1 var obj = {}; 2 Object.freeze(obj); 3 var vm = new Vue({ 4  data: obj 5 }); 6 //這裏vm和obj的雙向綁定將失效

　　除了數據屬性外，Vue還提供了一些有用的實例屬性和方法，他們都有前綴$，用以區分用戶變量。

1 vm.$data === data;//true 2 vm.$el === document.getElementById();//true 3 vm.$watch(); 4 vm.props;

　　Vue還有不少其餘的屬性和方法，詳情請看Vue實例屬性。

 

　　3，方法

　　Vue在初始化的時候，咱們還能夠添加幾個屬性，methods、computed、watch。

 1 var vm = new Vue({  2 el:'#app',  3  data:{  4 firstName:'',  5 lastName:''  6  },  7  methods:{  8 handler1:function(){},  9 handler2:function(){} 10  }, 11  computed:{ 12  fullName:fucntion(){ 13 return this.firstName + ' ' + this.lastName ; 14  }, 15  }, 16  watch:{ 17 fullName:function(){ 18 console.log('The name has changed again'); 19  } 20  } 21 });

　　methods中通常定義一些事件處理函數，使用v-on指令綁定；computed中通常定義須要複雜計算才能的出的值；watch通常用於偵聽某些可能發生的變化，好比例子中用於偵聽fullName的變化，每當fullName發生變化，都會執行其綁定的函數。watch屬性還能夠監聽像url地址這樣的，沒法經過原始DOM事件監聽的東西。

　　

　　4，生命週期

　　每一個 Vue 實例在被建立時都要通過一系列的初始化過程。例如，須要設置數據監聽、編譯模板、將實例掛載到 DOM 並在數據變化時更新 DOM 等。同時在這個過程當中也會運行一些叫作生命週期鉤子的函數，這給了用戶在不一樣階段添加本身的代碼的機會。下面列舉了幾個經常使用的生命週期鉤子函數。

 1 var vm = new Vue({  2  data:{},  3 //實例建立以前  4 beforeCreate:function(){},  5 //實例建立以後  6 created:function(){},  7 //實例掛載以前  8 beforeMount:function(){},  9 //實例掛載以後 10 mounted:function(){}, 11 //數據更新以前 12 beforeUpdate:function(){}, 13 //數據更新以後 14 updated:function(){} 15 });

　　完整的Vue實例生命週期示意圖：

　　Vue經過vm.el掛載指定DOM元素，掛載DOM元素其實是用vm.$el替換原始的DOM元素。這樣咱們就能夠經過只操做虛擬的DOM元素vm.$el，來實現操做真實的DOM對象的目的了。

1 var vm = new Vue({ 2 el: '#app', 3  data:{} 4 }); 5 //記住，el經過id定位元素

 

三　　模板語法

 

　　1，插值

　　插值通常使用雙大括號語法：{{ msg }}，中間添加變量名，這個變量通常是data或computed中的一個屬性名。這樣就能夠實現HTML內容跟隨變量變化了。

　　雙大括號把內部的變量解析爲文本，而經過v-html指令，可使瀏覽器把變量解析爲HTML代碼。v-html有一個特色：它必須添加到一個HTML元素上，變量生成的HTML代碼最終都以該元素爲祖先元素。

 1 <!-- 文本 -->  2 <div id="app">{{ name }}</div>  3 <!-- HTML -->  4 <div id="app">  5 <p v-html="html"></p>  6 </div>  7 <script>  8 var obj = {  9  name:'ren', 10  html:'<span style="color:red"></span>' 11  }; 12 var vm = new Vue({ 13  el:'#app', 14  data:obj 15 }); 16 </script>

　　{{ }}裏面不只能夠填寫簡單的變量表達式，它同時也支持更爲複雜的計算表達式。

1 <p>{{ number + 1 }}</p> 2 <p>{{ ok ? 'YES' : 'NO' }}</p> 3 <p>{{ message.split('').reverse().join('') }}</p>

 

　　2，指令及自定義

　　第一小節提到的v-html，和它相似的v-*什麼的就時Vue提供的指令。好比，你能夠經過v-once指令來實現一次性的插值，當數據改變時，插值處的內容不會再更新。

1 <div id="app" v-once>{{ name }}</div>

　　再好比，你要給HTML元素添加屬性，那麼你可能會用到v-bind指令。

1 <div v-bind:class="myClass"></div> 2 <!-- 元素將被添加一個mycalss變量保存的值的類，同時，它也能夠是一個稍複雜的計算表達式，如'my'+msg。若是你想移除該屬性，你只需把null賦值給對應的變量 -->

　　亦或是你要給HTML元素綁定事件，v-on指令能夠幫你實現。

1 <a v-on:click="eventHandler">link</a> 2 <!-- eventHandler是事件處理函數 -->

　　v-model指令能夠雙向綁定元素的value值與指定的變量。

1 <input type='text' name='name' v-model='name'></input> 2 *********************************************** 3 var vm = Vue({ 4  data:{ 5 name:'ren' 6  } 7 }); 8 //輸入框中的值會與vm.name同步

　　指令的做用是當指令綁定的表達式的值改變時，將其產生的連帶影響，響應式地做用於 DOM。

　　若是Vue提供的指令不夠用，你還能夠自定義Vue指令，用以實現某些特殊的功能。

1 // 註冊一個全局自定義指令 `v-focus`
2 Vue.directive('focus', { 3   inserted: function (el) { 4  el.focus() 5  } 6 })

　　方法的第一個參數是自定義的指令名稱，第二個參數是一個對象，對象中能夠是一些鉤子函數，全部鉤子函數的第一個參數固定是綁定的DOM元素，依據不一樣的鉤子函數，還能夠傳遞其餘不一樣的參數。這些鉤子函數將規定綁定了該指令的元素在不一樣時期內將要實現的功能。

　　上面的例子簡單的建立了一個使DOM元素在插入HTML文檔後自動獲取焦點的指令。須要注意的是，定義指令名稱時不須要v-前綴。更多關於自定義Vue指令的信息，請移步Vue自定義指令。

 

　　3，動態參數

　　若是你以爲上面的方式有失靈活，那麼Vue的動態參數或許可以幫到你。Vue從2.6.0開始，容許你使用複雜表達式來定義指令最終的參數，不過你應該用[]方括號把它括起來。

1 <a v-bind:[attributeName]="url"> link </a> 2 <!-- 具體哪一個屬性會被添加，徹底依賴方括號中的表達式的計算值 -->

　　Vue指令還能夠添加修飾符，使用 . 點來添加Vue指令的修飾符。例如.prevent，它告訴指令調用event.preventDefault()阻止事件默認行爲。

1 <button v-on:submit.prevent="onSubmit">form</button> 2 <!-- 點擊按鈕時使用自定義函數，並經過.prevent阻止默認行爲 -->

　　其餘指令也有相應的修飾符，接下來的學習中會慢慢接觸到。

 

　　4，簡寫

　　對於使用頻率極高的v-bind和v-on指令，Vue提供了簡寫形式。

1 <!-- 完整語法 --> 2 <a v-bind:href="url">...</a> 3 <a v-on:click="doSomething">...</a> 4 <!-- 縮寫 --> 5 <a :href="url">...</a> 6 <a @click="doSomething">...</a> 7 <!-- 使用：冒號代替v-bind:，使用@替代v-on: -->

 

四　　計算屬性和偵聽器

 

　　1，計算屬性

　　模板內的表達式很是便利，可是設計它們的初衷是用於簡單運算的。在模板中放入太多的邏輯會讓模板太重且難以維護。

　　因此，若是須要通過複雜的邏輯才能獲得最終的值，建議你使用Vue的計算屬性。

 1 var vm = new Vue({  2 el: '#app',  3  data: {  4 name: 'ren'  5  },  6  computed: {  7 reversedName: function () {  8 // `this` 指向 vm 實例  9 return this.name.split('').reverse().join(''); 10  } 11  } 12 }); 13 ******************************************************************** 14 <div id="app">{{reversedNmae}}</div> 15 //計算屬性專門用於處理數據計算，須要指定返回值

　　

　　2，偵聽器

　　偵聽器的做用是動態的監測數據的變化。

 1 <input type='text' name='name' v-model='name'></input>  2 *************************************************************  3 var vm = Vue({  4  data:{  5 name:''  6  }  7  watch:{  8 name:function(){  9  console.log(The name has changed again); 10  } 11  } 12 }); 13 //每當vm.name屬性發生改變時，控制檯都會輸出一條信息

 

五　　class和style

　　操做元素的 class 列表和內聯樣式是數據綁定的一個常見需求。由於它們都是屬性，因此咱們能夠用 v-bind 處理它們：只須要經過表達式計算出字符串結果便可。

　　不過，字符串拼接麻煩且易錯。所以，在將 v-bind 用於 class 和 style 時，Vue.js 作了專門的加強。表達式結果的類型除了字符串以外，還能夠是對象或數組。

 

　　1，綁定class

　　綁定class屬性有兩種方式，對象和數組。

　　首先是對象方式，請看下面的例子：

1 <div class='class0' v-bind:class="{class1:isclass1,class2:isclass2}"></div> 2 ********************************************************* 3 data:{ 4 isclass1:true, 5 isclass2:false 6 } 7 //經過data對象的isclass1和isclass2屬性控制class1和class2是否被添加到div上，同時div上原來定義的class0不受影響

　　若是須要操做的class列表很大，那麼你能夠在data裏添加一個classObj對象，專門用來存儲class控制變量。你固然也能夠經過計算屬性computed來動態的計算哪些class屬性會被添加到div上。

 1 <div v-bind:class="classObj"></div>  2 ******************************************************  3 //數據對象  4 data:{  5  classObj:{  6 isclass1:true,  7 isclass2:true  8  }  9 } 10 //計算屬性 11 computed:{ 12 classObj:function(){ 13 return { 14 //既然使用計算屬性，返回的對象應該是複雜計算得來的結果，因爲只是舉例，因此這裏也只是簡單的賦值了 15 isclass1:true, 16 isclass2:true 17  } 18  } 19 }

　　除了對象綁定class屬性外，Vue還提供了數組綁定的方式。

1 <div v-bind:class="[class1,class2]"> 2 *************************************** 3 data:{ 4  class1:'myClass', 5  class2:'yourClass' 6 }

　　數組方式還支持動態的綁定class屬性，這是經過三元運算實現的。

1 <div v-bind:class="[iscalss1 ? class1 : '' , isclass2 ? class2 ： '',class3]"></div> 2 ***************************************************************** 3 data:{ 4 isclass1:true, 5 isclass2:false 6  class3:'myClass' 7 } 8 //經過三元運算動態的綁定也能夠和靜態綁定組合使用

　　

　　2，綁定內聯樣式

　　內聯樣式使用過HTML標籤的style屬性實現的，因此Vue一樣使用v-bind指令來添加內聯樣式。

1 <div v-bind:style="{ color: myColor, fontSize: fontSize + 'px' }"></div> 2 ************************************************ 3 data: { 4 myColor: 'red', 5 fontSize: 30 6 }

　　注意，css屬性名可使用駝峯式或短橫線分隔樣式，若果使用短橫線分隔方式，記得用引號把它引發來。

　　直接綁定一個樣式對象一般更好，這會讓模板更清晰，同時也能夠和class同樣，使用Vue的計算屬性conputed動態生成。

1 <div v-bind:style="styleObject"></div> 2 ************************************************* 3 data: { 4  styleObject: { 5 color: 'red', 6 fontSize: '13px' 7  } 8 }

　　最後，綁定style屬性也有數組語法，使用方式和綁定class的數組語法同樣，這裏再也不贅述。

 

六　　條件渲染

　　有時候咱們可能須要在特定狀況才須要渲染某些HTML元素，另一些狀況但願隱藏它，Vue提供了條件渲染的方式。

　

　　1，v-if

　　v-if指令根據綁定的條件，來決定是否渲染該元素。同時Vue還提供了另外兩個指令：v-else-if和v-else，這讓條件渲染變得更加靈活和強大。

 1 <div v-if="answer === 'A'">A</div>  2 <div v-else-if="answer === 'B'">B</div>  3 <div v-else-if="answer === 'C'">C</div>  4 <div v-else>D</div>  5 ********************************************  6 computed:{ 7 answer:function(){  8 return answer;  9 } 10 //根據answer的值，決定渲染那個元素

　　請注意，在同一個邏輯區域內，使用這三個指令的元素必須緊挨着，否者他們會失效。另外，v-else-if能夠出現屢次，而v-if和v-else只能在首尾各出現一次。

　　若是你想一次控制多個元素，那麼你能夠把條件指令做用到<template>元素上，最終的渲染結果將不包含<template>元素，而只包含其內部的元素。

1 <template v-if="ok"> 2 <h1>Title</h1> 3 <p>Paragraph 1</p> 4 <p>Paragraph 2</p> 5 </template> 6 //當v-if接收到真值時，<template>元素不會出如今頁面上，而h1和p會出現

　　

　　2，v-show

　　v-show並非真正意義上的條件渲染，它只是簡單的操控元素的display屬性，來達到顯示或隱藏元素的目的。而v-if不只保證元素隱藏，還能保證綁定的事件能被及時的銷燬或重建。

1 <h1 v-show="ok">Hello!</h1> 2 <!-- 當ok爲真值時，h1將被顯示，不然將被隱藏 -->

 

七　　列表

　　在Vue中渲染列表須要用到v-for指令。v-for能夠經過數組或對象渲染列表。

　　

　　1，數組渲染

1 <ul> 2 <li v-for="(value,index) in arr">{{index}}:{{value}}</li> 3 </ul> 4 ************************************************** 5 data:{ 6 arr:[1,2,3] 7 } 8 //value是元素，index是下標，下標是可選的參數

　　你甚至能夠顯示一個數組通過過濾或排序後的版本，而不實際改變或重置原始數據。在這種狀況下，能夠建立一個計算屬性，來返回過濾或排序後的數組。

 1 <li v-for="n in newArr">{{ n }}</li>  2 ********************************************  3 data: {  4 arr: [ 1, 2, 3, 4, 5 ]  5 },  6 computed: {  7 newArr: function () {  8 return this.arr.filter(function (val) {  9 return val % 2 === 0; 10  }) 11  } 12 }

 

　　2，對象渲染

 1 <ul>  2 <li v-for="(value,name,index) in obj">{{parentMsg}}:{{index}}:{{value}}</li>  3 </ul>  4 **************************************************  5 data:{  6 parendMsg:'parent',  7  obj:{  8 name:'ren',  9 age:12 10  } 11 } 12 //結果： 13 //parent:0:ren 14 //parent:1:age 15 //value是屬性值，name是屬性名，index是序號（通常同Object.keys()的順序），name和key都是可選的

　　從上面例子能夠看出，v-for指令不只能夠訪問綁定的對象，還能夠訪問其父域內的變量。

　　

　　3，渲染順序

　　默認狀態下，當綁定的數據項順序被改變時，Vue不會主動的去修改已渲染的列表，若是要保證列表順序始終與數據項一致，你應該給每一項的屬性key提供一個惟一值，建議是數字或字符串等原始值。

1 <div v-for="(item,index) in arr" v-bind:key="index"></div> 2 <!-- 數組可使用index，對象可使用name -->

　　

　　4，更新檢測

　　咱們知道，在JavaScript中，有不少方法能夠修改數組和對象。可是，並非全部的方法都能觸發Vue的響應，即並非全部的方法都能觸發視圖更新。

　　對於數組，Vue 不能檢測如下數組的變更：

　　　　a：當你利用索引直接設置一個數組項時，例如：vm.items[indexOfItem] = newValue；

　　　　b：當你修改數組的長度時，例如：vm.items.length = newLength；

　　對於對象，Vue 不能檢測對象屬性的添加和刪除。詳情見本文2.2節。

　　幸運的是，Vue額外提供了vm.set方法來解決該問題。

 1 //Vue.set(object, name, value);  2 var obj = {  3 name:'ren',  4 age:12  5 };  6 var vm = new Vue({  7  data:{  8  person:obj  9  } 10 }); 11 vm.set(vm.person,'sex','male'); 12 //新的sex屬性是響應式的。

　　須要注意的是，第一個參數必須是一個對象，即該data的屬性應該綁定的是一個對象，才能使用該方法。

 

八　　表單

　　上面3.2小節簡單介紹的v-model指令，這裏將詳細介紹表單與它的關係，及用法。

 

　　1，文本綁定

1 <!-- 單行文本 --> 2 <input v-model="message"> 3 <p>Message is: {{ message }}</p> 4 <!-- 多行文本 --> 5 <p>{{ message }}</p> 6 <textarea v-model="message"></textarea>

　　請注意：在文本區域插值： <textarea>{{text}}</textarea>，這樣並不會生效，應該使用 v-model 來代替。

　　

　　2，單選

 1 <input type="radio" id="one" value="One" v-model="picked">  2 <label for="one">One</label>  3 <br>  4 <input type="radio" id="two" value="Two" v-model="picked">  5 <label for="two">Two</label>  6 <br>  7 <span>Picked: {{ picked }}</span>  8 *****************************************************  9 data:{ 10 picked:'' 11 }

　　

　　3，複選

 1 <input type="checkbox" id="jack" value="Jack" v-model="checkedNames">  2 <label for="jack">Jack</label>  3 <input type="checkbox" id="john" value="John" v-model="checkedNames">  4 <label for="john">John</label>  5 <input type="checkbox" id="mike" value="Mike" v-model="checkedNames">  6 <label for="mike">Mike</label>  7 <br>  8 <span>Checked names: {{ checkedNames }}</span>  9 ***************************************************** 10 data:{ 11  checkNames:[] 12 } 13 <!-- 若是隻有一個複選項，那麼不使用數組會更方便 -->

　　

　　4，下拉列表

 1 <select v-model="selected">  2 <option disabled value="">請選擇</option>  3 <option>A</option>  4 <option>B</option>  5 <option>C</option>  6 </select>  7 <p>Selected: {{ selected }}</p>  8 ************************************************  9 data:{ 10  selected:''

　　若是下拉列表式多選的，你能夠給<select>標籤增長一個multiple屬性，而且selected屬性須要綁定一個數組。

　　請注意，若是你但願頁面第一次載入時默認選中某一項，那麼你應該給selected屬性設置該默認值。

　　你也可使用v-for指令，動態的渲染下拉列表的選項。

 1 <select v-model="selected">  2 <option v-for="option in options" v-bind:value="option.value">  3  {{ option.text }}  4 </option>  5 </select>  6 <p>Selected: {{ selected }}</p>  7 *****************************************************  8 data: {  9  selected: 'A', 10  options: [ 11  { text: 'One', value: 'A' }, 12  { text: 'Two', value: 'B' }, 13  { text: 'Three', value: 'C' } 14  ] 15 }

　　

　　5，修飾符

　　v-model指令的本質是監聽用戶輸入事件，而後自動選取正確的方式來更新元素。v-model爲不一樣的元素使用不一樣的屬性、監聽不一樣的事件。

• • 　　text 和 textarea 元素使用 value 屬性和 input 事件；
  • 　　checkbox 和 radio 使用 checked 屬性和 change 事件；
  • 　　select 字段將 value 做爲 prop ，並將 change 做爲事件。

　　請注意：v-model 會忽略全部表單元素的 value、checked、selected 特性的初始值，而老是將 Vue 實例的數據做爲數據來源。因此，你應該經過 JavaScript 在組件的 data 選項中聲明初始值。

　　咱們知道，默認狀況下，v-model對text使用input事件，你能夠經過修飾符lazy使Vue對其使用change事件；

　　若是想自動將用戶的輸入值轉爲數值類型，能夠給 v-model 添加 number 修飾符；

　　若是要自動過濾用戶輸入的首尾空白字符，能夠給 v-model 添加 trim 修飾符；

1 <!-- 在「change」時而非「input」時更新 --> 2 <input v-model.lazy="msg" > 3 <!-- 直接獲得Number類型值 --> 4 <input v-model.number="age" type="number"> 5 <!-- 得到首位沒有空白字符的值 --> 6 <input v-model.trim="msg">

 

九　　事件

　　v-on指令用來監聽DOM事件，並在事件觸發時執行一些JavaScript代碼。

　　

　　1，用法

1 <button v-on:click="counter += 1">Add 1</button> 2 <p>{{ counter}}</p> 3 ************************************************ 4 data:{ 5  counter:0 6 }

　　雖然v-on指令能夠直接綁定JavaScript語句，但要實現稍複雜邏輯，使用Vue方法纔是更好的選擇。

 1 <button v-on:click="greet($event)">click me</button>  2 ************************************************  3 var vm = new Vue({  4 el:'',  5  data:{  6 name:'ren'  7  },  8  methods:{  9 greet:function(event){//event：原生DOM事件對象 10 alert(this.name);//this：當前Vue實例,這裏是vm 11  } 12  } 13 });

　　方法也能夠直接用JavaScript調用：vm.greet()；

　　

　　2，事件修飾符

　　在事件處理程序中調用 event.preventDefault() 或 event.stopPropagation() 是很是常見的需求。儘管咱們能夠在方法中輕鬆實現這點，但更好的方式是：方法只有純粹的數據邏輯，而不是去處理 DOM 事件細節。

　　爲了解決這個問題，Vue.js 爲 v-on 提供了事件修飾符。以前提過，修飾符是由點開頭的指令後綴來表示的。

• • 　　.stop 阻止事件冒泡
  • 　　.prevent 阻止默認行爲
  • 　　.capture 使用捕獲事件
  • 　　.self 事件源對象
  • 　　.once 僅執行一次的事件處理器
  • 　　.passive 不阻止默認行爲，會使.prevent失效

　　事件修飾符是能夠鏈式使用的，不過須要注意他們的順序：

1 <!-- 阻止事件冒泡和默認行爲，而後執行一些操做 --> 2 <a v-on:click.stop.prevent="doSomthing"></a> 3 <!-- 阻止事件冒泡和默認行爲，不執行其餘操做 --> 4 <form v-on:submit.prevent></form>

　　

　　3，系統修飾符

　　能夠用以下修飾符來實現僅在按下相應按鍵時才觸發鼠標或鍵盤事件的監聽器。

• • 　　.ctrl
  • 　　.alt
  • 　　.shift
  • 　　.meta （IOS的command 鍵，Windows的Win鍵）

1 <!-- Alt + C --> 2 <input @keyup.alt.67="clear"> 3 <!-- Ctrl + Click --> 4 <div @click.ctrl="doSomething">Do something</div>

　　一個特別的修飾符：.exact，它用於精確的指定組合按鍵以觸發相關事件。

1 <!-- 只要ctrl鍵被按下就會觸發，無論有無其餘按鍵 --> 2 <button @click.ctrl="onClick">A</button> 3 <!-- 有且只有 Ctrl 被按下的時候才觸發 --> 4 <button @click.ctrl.exact="onCtrlClick">A</button> 5 <!-- 沒有任何系統修飾符被按下的時候才觸發 --> 6 <button @click.exact="onClick">A</button>

　　

　　4，鼠標修飾符

　　鼠標修飾符只有3個：.left、.right、.middle。這些修飾符會限制處理函數僅響應特定的鼠標按鈕。

1 <!-- 只響應左鍵 --> 2 <button @click.left="onClick">A</button> 3 <!-- 只響應右鍵 --> 4 <button @click.right="onClick">A</button> 5 <!-- 只響應中鍵 --> 6 <button @click.middle="onClick">A</button>

 　　

　　5，按鍵碼及自定義按鍵修飾符

　　按鍵碼keyCode的事件用法已經被廢棄了，以後新版的瀏覽器可能將再也不提供支持，而且IE9及以前的按鍵碼和其餘主流瀏覽器有一些差異，因此請慎重使用按鍵碼。


　　Vue提供了經常使用了按鍵碼別名：

• • 　　.enter
  • 　　.tab
  • 　　.delete (捕獲「刪除」和「退格」鍵)
  • 　　.esc
  • 　　.space
  • 　　.up
  • 　　.down
  • 　　.left
  • 　　.right

　　這些別名能在必要的時候爲老版的瀏覽器提供支持，若是上述按鍵不足以知足你的需求，那麼你能夠經過自定義按鍵別名。

1 // f1爲自定義的按鍵別名，112爲按鍵碼；你可使用 `v-on:keyup.f1`來捕獲f1鍵
2 Vue.config.keyCodes.f1 = 112;

 

 

 

　　關於Vue.js的基礎應用就先介紹到這兒，下一次更新將帶來Vue的核心：組件。

原文出處：https://www.cnblogs.com/ruhaoren/p/11811103.html