Vue指令
指令 (Directives) 是特殊的帶有前綴 v- 的特性。指令的值限定為綁定表達式，因此上面提到的 JavaScript 表達式及過濾器規則在這里也適用。指令的職責就是當其表達式的值改變時把某些特殊的行為應用到 DOM 上。
在Vue中，常用的指令有v-text、v-html、v-if、v-show、v-for、v-on、v-bind、v-model、v-ref、v-el、v-pre、v-cloak。
先上代碼：
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <script type="text/javascript" src="js/vue.js"></script> <title></title> <style> .item { margin: 1px; padding: 5px 0 5px 0; } .item:hover { background: #cccccc; } </style> </head> <div id="dr01"> <h3>v-text</h3> <div v-text="msgText"></div> <div>{{msgText}}</div> <hr /> <h3>v-html</h3> <div v-html="msgHtml"></div> <div>{{{msgHtml}}}</div> <hr /> <h3>v-if</h3> <div>msgBoolean01:true</div> <div v-if="msgBoolean01">(here is v-if code block)if msgBoolean01 is true show this div</div> <div v-else>(here is v-else code block)if msgBoolean01 is false show this div</div> <br /> <div>msgBoolean01:false</div> <div v-if="msgBoolean02">(here is v-if code block)if msgBoolean02 is true show this div</div> <div v-else>(here is v-else code block)if msgBoolean02 is false show this div</div> <h3>template v-if</h3> <div>msgBoolean01:true</div> <template v-if="msgBoolean01"> <div>(here is template v-if code block)if msgBoolean01 is true show this div</div> </template> <template v-else> <div>(here is template v-else code block)if msgBoolean01 is false show this div</div> </template> <br /> <div>msgBoolean02:false</div> <template v-if="msgBoolean02"> <div>(here is template v-if code block)if msgBoolean02 is true show this div</div> </template> <template v-else> <div>(here is template v-else code block)if msgBoolean02 is false show this div</div> </template> <h3>v-show</h3> <div>msgBoolean01:true</div> <div v-show="msgBoolean01">(here is v-show code block)if msgBoolean01 is true show this div</div> <div v-else>(here is v-else code block)if msgBoolean01 is false show this div</div> <br /> <div>msgBoolean01:false</div> <div v-show="msgBoolean02">(here is v-show code block)if msgBoolean02 is true show this div</div> <div v-else>(here is v-else code block)if msgBoolean02 is false show this div</div> <h3>v-else（不需要表達式）</h3> <div>限制：前一兄弟必須有v-if或者v-show</div> <div>v-else的用法：上面三個例子中都有使用，請參考代碼</div> <hr /> <h3>v-for</h3> <div>遍歷數組：</div> <ul> <li v-for="(index,item) in itemArrs"> <!-- index代表的是當前item的下標，如果要取出下標的值則用{{$index}}即可 --> index:{{$index}}, item:{{item}} </li> </ul> <div>遍歷對象key、value（不帶下標index）</div> <ul> <li v-for="(key,value) in itemObjs"> <!-- key代表的是當前對象的屬性名稱，value代表的是當前對象的屬性值 key取值的時候可以用{{$key}}，也可以使用{{key}} value取值的時候只能用{{value}} 建議：遍歷對象不帶index下標的時候同時用{{key}}和{{value}} --> $key:{{$key}},key:{{key}}, value:{{value}} </li> </ul> <div>遍歷對象key、value（帶下標index）</div> <ul> <li v-for="(index,key,value) in itemObjs"> <!-- index代表的是當前屬性的下標，key代表的是當前對象的屬性名稱，value代表的是當前對象的屬性值 index取值的時候只能用{{$index}} key取值的時候只能用{{$key}} value取值的時候只能用{{value}} 建議：遍歷對象不帶index下標的時候同時用{{key}}和{{value}} --> $index:{{$index}}, $key:{{$key}}, value:{{value}} </li> </ul> <hr /> <h3>v-on</h3> <ul> <li v-for="(index,item) in itemArrs"> <div class="item" v-on:click="itemClick01"> <span>index:{{$index}}, item:{{item}}</span> <button v-on:click="itemClick02($index,item)">內聯語句（參數item參數）</button> <button v-on:click="itemClick03(item,$event)">內聯語句（參數event參數）</button> <button v-on:click.stop="itemClickStop(item)">阻止冒泡</button> <a href="http://www.baidu.com">跳轉到百度</a> <a href="http://www.baidu.com" v-on:click.prevent="itemClickPrevent()">阻止a標簽默認行為，不會跳轉到百度</a> <input v-on:keyup.enter="keyUpEnter($event)" placeholder="獲取焦點后點擊enter試試" /> </div> </li> </ul> <h3>v-bind</h3> <div> <!-- 綁定 attribute --> <img v-bind:src="imageSrc"> <!-- 縮寫 --> <img :src="imageSrc"> <!-- 綁定 class --> <div :class="{ red: isRed }">對象class</div> <div :class="[classA, classB]">數組class</div> <div :class="[classA, { classB: isB, classC: isC }]">對象數組class混用</div> <!-- 綁定 style --> <div :style="{ fontSize: size + 'px' }">對象style</div> <div :style="[styleObjectA, styleObjectB]" style="background-color: ;">數組style</div> </div> </div> <body> <script> var dr01 = new Vue({ el: "#dr01", data: { msgText: "this is msgText!", msgHtml: '<span style="color:red;">this is msgHtml</span>', msgBoolean01: true, msgBoolean02: false, itemArrs: ["item A", "item B", "item C", "item D"], itemObjs: { key01: "this is value01", key02: "this is value02", key03: "this is value03" }, imageSrc: "img/favicon.ico", isRed: true, classA: "class-a", classB: "class-b", isB: true, isC: true, size: "14", styleObjectA: { backgroundColor: "#cccccc" }, styleObjectB: { color: "red" }, }, methods: { //方法處理器 itemClick01: function() { console.log("u clicked the parent div"); }, //內聯語句 itemClick02: function(index, item) { console.log("current index: " + index + "; item: " + item); }, //event參數傳遞 itemClick03: function(item, event) { console.log("current item: " + item + "; event target tagName: " + event.target.tagName); }, //阻止冒泡 itemClickStop: function(item) { console.log("child button is clicked, please watch whether the parent div's log is priented!") }, //阻止默認的行為 itemClickPrevent: function() { console.log("Prevent Default behaviour"); }, //點擊 keyUpEnter: function(event) { console.log("keyCode: " + event.keyCode); }, } }) </script> </body> </html>
v-text: 更新元素的textContent
在內部，{{Mustache}}插值也被編譯為textNode的一個v-text指令，所以下面兩個span渲染結果一致
<h3>v-text</h3> <div v-text="msgText"></div> <div>{{msgText}}</div>
v-html：更新元素的 innerHTML，示例：{{{ Mustache }}}
<h3>v-html</h3> <div v-html="msgHtml"></div> <div>{{{msgHtml}}}</div>
v-if與v-else（根據條件判斷結果渲染頁面，也就是說只會渲染if和else里面的一個）
<h3>v-if</h3> <div>msgBoolean01:true</div> <div v-if="msgBoolean01">(here is v-if code block)if msgBoolean01 is true show this div</div> <div v-else>(here is v-else code block)if msgBoolean01 is false show this div</div> <div>msgBoolean01:false</div> <div v-if="msgBoolean02">(here is v-if code block)if msgBoolean02 is true show this div</div> <div v-else>(here is v-else code block)if msgBoolean02 is false show this div</div>
template v-if與template v-else（根據條件判斷結果渲染頁面，也就是說只會渲染if和else里面的一個）
<h3>template v-if</h3> <div>msgBoolean01:true</div> <template v-if="msgBoolean01"> <div>(here is template v-if code block)if msgBoolean01 is true show this div</div> </template> <template v-else> <div>(here is template v-else code block)if msgBoolean01 is false show this div</div> </template>
<div>msgBoolean02:false</div> <template v-if="msgBoolean02"> <div>(here is template v-if code block)if msgBoolean02 is true show this div</div> </template> <template v-else> <div>(here is template v-else code block)if msgBoolean02 is false show this div</div> </template>
v-show與v-else（v-show的語句與v-if不同，不論判斷條件結果如何，都會渲染整個html頁面，只是將判斷結果為false的那個節點加上style="display:none;"）
<h3>v-show</h3> <div>msgBoolean01:true</div> <div v-show="msgBoolean01">(here is v-show code block)if msgBoolean01 is true show this div</div> <div v-else>(here is v-else code block)if msgBoolean01 is false show this div</div>
<div>msgBoolean01:false</div> <div v-show="msgBoolean02">(here is v-show code block)if msgBoolean02 is true show this div</div> <div v-else>(here is v-else code block)if msgBoolean02 is false show this div</div>
v-else:不需要表達式，但是使用的前提條件是前面的兄弟節點必須是v-if或者v-show
v-for
<div>遍歷數組：</div> <ul> <li v-for="(index,item) in itemArrs"> <!-- index代表的是當前item的下標，如果要取出下標的值則用{{$index}}即可 --> index:{{$index}}, item:{{item}} </li> </ul> <div>遍歷對象key、value（不帶下標index）</div> <ul> <li v-for="(key,value) in itemObjs"> <!-- key代表的是當前對象的屬性名稱，value代表的是當前對象的屬性值 key取值的時候可以用{{$key}}，也可以使用{{key}} value取值的時候只能用{{value}} 建議：遍歷對象不帶index下標的時候同時用{{key}}和{{value}} --> $key:{{$key}},key:{{key}}, value:{{value}} </li> </ul> <div>遍歷對象key、value（帶下標index）</div> <ul> <li v-for="(index,key,value) in itemObjs"> <!-- index代表的是當前屬性的下標，key代表的是當前對象的屬性名稱，value代表的是當前對象的屬性值 index取值的時候只能用{{$index}} key取值的時候只能用{{$key}} value取值的時候只能用{{value}} 建議：遍歷對象不帶index下標的時候同時用{{key}}和{{value}} --> $index:{{$index}}, $key:{{$key}}, value:{{value}} </li> </ul>
itemArrs和itemObjs定義如下：
itemArrs: ["item A", "item B", "item C", "item D"], itemObjs: { key01: "this is value01", key02: "this is value02", key03: "this is value03" },
結果：
v-on: 綁定事件
html頁面
<h3>v-on</h3> <ul> <li v-for="(index,item) in itemArrs"> <div class="item" v-on:click="itemClick01"> <span>index:{{$index}}, item:{{item}}</span> <button v-on:click="itemClick02($index,item)">內聯語句（參數item參數）</button> <button v-on:click="itemClick03(item,$event)">內聯語句（參數event參數）</button> <button v-on:click.stop="itemClickStop(item)">阻止冒泡</button> <a href="http://www.baidu.com">跳轉到百度</a> <a href="http://www.baidu.com" v-on:click.prevent="itemClickPrevent()">阻止a標簽默認行為，不會跳轉到百度</a> <input v-on:keyup.enter="keyUpEnter($event)" /> </div> </li> </ul>
定義在vue的methods
methods: { //方法處理器 itemClick01: function() { console.log("u clicked the button"); }, //內聯語句 itemClick02: function(index, item) { console.log("current index: " + index + "; item: " + item); }, //event參數傳遞 itemClick03: function(item, event) { console.log("current item: " + item + "; event target tagName: " + event.target.tagName); }, //阻止冒泡 itemClickStop: function(item) { console.log("child button is clicked, please watch whether the parent div's log is priented!") }, //阻止默認的行為 itemClickPrevent: function() { console.log("Prevent Default behaviour"); }, //點擊 keyUpEnter: function(event) { console.log("keyCode: " + event.keyCode); }, }
簡單介紹：
通過v-for來遍歷items，div內的span標簽是遍歷的結果，后面緊跟了幾個點擊事件：
div上的itemClick01是方法處理器
itemClick02是可以傳遞當前item值的內聯語句
itemClick03是可以傳遞當前item的event事件的內聯語句
itemClickStop是阻止冒泡，即相應完當前標簽的事件后，阻止點擊事件傳遞到上層div
itemClickPrevent是阻止默認行為，a標簽本身是跳轉到其他頁面，加上itemClickPrevent后阻止了打開新頁面的行為
keyUpEnter是響應enter鍵的事件，但是前提是光標是當前input內
頁面顯示結果如下（定義了item的hover，當前鼠標懸停在第二個item上）
點擊“內聯語句（參數item參數）”
current index: 1; item: item B
u clicked the parent div
點擊“內聯語句（參數event參數）”
current item: item B; event target tagName: BUTTON
u clicked the parent div
點擊“阻止冒泡”
child button is clicked, please watch whether the parent div's log is priented!
點擊“跳轉到百度”：跳轉到了百度頁面。
點擊“阻止a標簽默認行為，不會跳轉到百度”：沒有響應
點擊“input標簽”： u clicked the parent div ，並點擊enter鍵： keyCode: 13
v-bind
<h3>v-bind</h3> <div> <!-- 綁定 attribute --> <img v-bind:src="imageSrc"> <!-- 縮寫 --> <img :src="imageSrc"> <!-- 綁定 class --> <div :class="{ red: isRed }">對象class</div> <div :class="[classA, classB]">數組class</div> <div :class="[classA, { classB: isB, classC: isC }]">對象數組class混用</div> <!-- 綁定 style --> <div :style="{ fontSize: size + 'px' }">對象style</div> <div :style="[styleObjectA, styleObjectB]">數組style</div> </div>
data中的定義
imageSrc: "img/favicon.ico", isRed: true, classA: "class-a", classB: "class-b", isB: true, isC: true, size: "14", styleObjectA: { backgroundColor: "#cccccc" }, styleObjectB: { color: "red" },
展示結果：
v-model就不說了，前面有講到。
至於v-ref、v-el、v-pre、v-cloak先不解釋，有興趣的可以去官網看看，用到的時候我會回來補充。