一 簡介
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="https://www.cnblogs.com/ruhaoren/p/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 =https://www.cnblogs.com/ruhaoren/p/== 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:></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:></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:>
2 ***************************************
3 data:{
4 class1:'myClass',
5 class2:'yourClass'
6 }
陣列方式還支持動態的系結class屬性，這是通過三元運算實作的，
1 <div v-bind:></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作為事件，
- text 和 textarea 元素使用
請注意：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.uj5u.com/qiye/174068.html
標籤：JavaScript
下一篇：react新版本配置代理