原文
大綱
1、什么是vue指令
2、向指令中傳入?yún)?shù)
3、指令中帶入修飾符
4、指令的縮寫
5、常見的vue指令
5.1、v-model雙向綁定數(shù)據(jù)
5.2、v-for循環(huán)
5.3、v-if 元素的存在與否
5.4、v-else 搭配v-if使用
5.5、v-else-if搭配v-if使用
5.6、v-bind 屬性綁定
5.7、v-style 通過v-bind實現(xiàn)style的綁定
5.8、v-class 通過v-bind實現(xiàn)class的綁定
5.9、v-on 事件綁定
5.10、v-text 讀取文本
5.11、v-html 讀取html標簽
5.12、v-once 只渲染一次
5.13、v-pre 把標簽內部的元素原位輸出
5.14、v-show 是否顯示
1、什么是vue指令
指令 (Directives) 是帶有 v- 前綴的特殊屬性。指令屬性的值預期是單個 JavaScript 表達式 (v-for 是例外情況，稍后我們再討論)。指令的職責是，當表達式的值改變時，將其產(chǎn)生的連帶影響，響應式地作用于 DOM。
<p v-if="seen">現(xiàn)在你看到我了</p>
<!--
這里，v-if 指令將根據(jù)表達式 seen 的值的真假來插入/移除 <p> 元素。
-->
2、向指令中傳入?yún)?shù)
一些指令能夠接收一個“參數(shù)”，在指令名稱之后以冒號表示。
例如，v-bind 指令可以用于響應式地更新 HTML 屬性：
<a v-bind:href="url">...</a>
<!--
在這里 href 是參數(shù)，告知 v-bind 指令將該元素的 href 屬性與表達式 url 的值綁定。
-->
另一個例子是 v-on 指令，它用于監(jiān)聽 DOM 事件：
<a v-on:click="doSomething">...</a>
<!--
在這里參數(shù)是監(jiān)聽的事件名。
-->
3、指令中帶入修飾符
修飾符 (Modifiers) 是以半角句號 . 指明的特殊后綴，用于指出一個指令應該以特殊方式綁定。例如，.prevent 修飾符告訴 v-on 指令對于觸發(fā)的事件調用 event.preventDefault()：
<form v-on:submit.prevent="onSubmit">...</form>
4、指令的縮寫
v- 前綴作為一種視覺提示，用來識別模板中 Vue 特定的特性。當你在使用 Vue.js 為現(xiàn)有標簽添加動態(tài)行為 (dynamic behavior) 時，v- 前綴很有幫助，然而，對于一些頻繁用到的指令來說，就會感到使用繁瑣。同時，在構建由 Vue.js 管理所有模板的單頁面應用程序 (SPA - single page application) 時，v- 前綴也變得沒那么重要了。因此，Vue.js 為 v-bind 和 v-on 這兩個最常用的指令，提供了特定簡寫：
<!--
v-bind 縮寫
-->
<!-- 完整語法 -->
<a v-bind:href="url">...</a>
<!-- 縮寫 -->
<a :href="url">...</a>
<!--
v-on 縮寫
-->
<!-- 完整語法 -->
<a v-on:click="doSomething">...</a>
<!-- 縮寫 -->
<a @click="doSomething">...</a>
它們看起來可能與普通的 HTML 略有不同，但 : 與 @ 對于特性名來說都是合法字符，在所有支持 Vue.js 的瀏覽器都能被正確地解析。而且，它們不會出現(xiàn)在最終渲染的標記中。縮寫語法是完全可選的，但隨著你更深入地了解它們的作用，你會慶幸擁有它們。
5、常見的vue指令
5.1、v-model雙向綁定數(shù)據(jù)
<input type="text" v-model="msg"/>
{{msg}} <!--取數(shù)據(jù)-->
5.2、v-for循環(huán)
我們用 v-for 指令根據(jù)一組數(shù)組的選項列表進行渲染。v-for 指令需要使用 item in items 形式的特殊語法，items 是源數(shù)據(jù)數(shù)組并且 item 是數(shù)組元素迭代的別名。
<ul>
<li v-for="item of items" v-bind:key="item.age">
<span>{{item.name}}</span>
<span>{{item.age}}</span>
</li>
</ul>
items: [
{'name': 'xiaohong1', 'age': 12},
{'name': 'xiaohong2', 'age': 12},
{'name': 'xiaohong3', 'age': 12},
{'name': 'xiaohong4', 'age': 12}
]
5.3、v-if 元素的存在與否
控制元素的存在與否，當傳入v-if的值是true的時候則v-if綁定的DOM存在（切記這里說的是存在與否而不是顯示與否）
<div>
<span class="title">存在或不存在：v-if</span><br>
<span v-if="condition">存在</span><br>
<span v-if="!condition">不存在</span><br>
</div>
5.4、v-else 搭配v-if使用
使用 v-else 指令來表示 v-if 的“else 塊”
v-else 元素必須緊跟在帶 v-if 或者 v-else-if 的元素的后面，否則它將不會被識別。
<div v-if="Math.random() > 0.5">
Now you see me
</div>
<div v-else>
Now you don't
</div>
5.5、v-else-if搭配v-if使用
2.1.0 新增
v-else-if，顧名思義，充當 v-if 的“else-if 塊”，可以連續(xù)使用：
類似于 v-else，v-else-if 也必須緊跟在帶 v-if 或者 v-else-if 的元素之后。
<div v-if="type === 'A'">
A
</div>
<div v-else-if="type === 'B'">
B
</div>
<div v-else-if="type === 'C'">
C
</div>
<div v-else>
Not A/B/C
</div>
5.6、v-bind 屬性綁定
通過v-bind可以動態(tài)綁定標簽上的屬性的值，如input的value/name等屬性的值。
<input v-bind:value="name">
5.7、v-style 通過v-bind實現(xiàn)style的綁定
vue中沒有專門style的綁定，但是可以通過v-bind實現(xiàn)類似于v-style的綁定。
<span v-bind:style="{'color':'red'}">綁定color:red樣式</span>
5.8、v-class 通過v-bind實現(xiàn)class的綁定
vue中沒有專門class的綁定，但是可以通過v-bind實現(xiàn)類似于v-class的綁定。
<span v-bind:class="'text'">綁定title樣式</span>
5.9、v-on 事件綁定
可以用 v-on 指令監(jiān)聽 DOM 事件，并在觸發(fā)時運行一些 JavaScript 代碼
然而許多事件處理邏輯會更為復雜，所以直接把 JavaScript 代碼寫在 v-on 指令中是不可行的
因此 v-on 還可以接收一個需要調用的方法名稱
<span v-on:click="clickMe()">點擊我輸出日志</span>
5.10、v-text 讀取文本
會將變量中的內容以文本的形式輸出，哪怕內容中含有html標簽，也不會解析，而是以文本的形式輸出。
如:someHtml: '<i><b>我是一些html斜體字</b></i>' 得到的結果就是：<i><b>我是一些html斜體字</b></i>
<span v-text="someText"></span>
5.11、v-html 讀取html標簽
會將變量中的內容讀取出來，會解析內容中的html標簽
如下得到的結果就是加粗的斜體字：我是一些html斜體字
<span v-html="someHtml"></span>
5.12、v-once 只渲染一次
v-once 進入頁面時,只渲染一次,不再進行渲染:<span v-once>我只渲染一次</span>
如果如下綁定在事件中，那么這個事件只會執(zhí)行一次，而且是在渲染的時候自動幫我們執(zhí)行了這個事件，之后的點擊效果就失效
<span v-on.once:click="clickMe()">我是只渲染一次的點擊事件</span>
5.13、v-pre 把標簽內部的元素原位輸出
不會解析somePreText內的東西，直接原樣輸出{{soemPreText}}
<span v-pre>{{soemPreText}}</span>
5.14、v-show 是否顯示
控制dom是否顯示，即顯示或隱藏
不同的是帶有 v-show 的元素始終會被渲染并保留在 DOM 中。v-show 只是簡單地切換元素的 CSS 屬性 display。
注意，v-show 不支持 <template> 元素，也不支持 v-else。
<span v-show="condition">顯示</span><br>
<span v-show="!condition">隱藏</span><br>
