vue指令概覽

原文

　　簡書原文：https://www.jianshu.com/p/5fd47b7422fd

大綱

　　一、什麼是vue指令
　　二、向指令中傳入參數
　　三、指令中帶入修飾符
　　四、指令的縮寫
　　五、常見的vue指令
　　5.一、v-model雙向綁定數據
　　5.二、v-for循環
　　5.三、v-if 元素的存在與否
　　5.四、v-else 搭配v-if使用
　　5.五、v-else-if搭配v-if使用
　　5.六、v-bind 屬性綁定
　　5.七、v-style 經過v-bind實現style的綁定
　　5.八、v-class 經過v-bind實現class的綁定
　　5.九、v-on 事件綁定
　　5.十、v-text 讀取文本
　　5.十一、v-html 讀取html標籤
　　5.十二、v-once 只渲染一次
　　5.1三、v-pre 把標籤內部的元素原位輸出
　　5.1四、v-show 是否顯示

一、什麼是vue指令

　　指令 (Directives) 是帶有 v- 前綴的特殊屬性。指令屬性的值預期是單個 JavaScript 表達式 (v-for 是例外狀況，稍後咱們再討論)。指令的職責是，當表達式的值改變時，將其產生的連帶影響，響應式地做用於 DOM。

<p v-if="seen">如今你看到我了</p>

<!--
    這裏，v-if 指令將根據表達式 seen 的值的真假來插入/移除 <p> 元素。
-->

二、向指令中傳入參數

　　一些指令可以接收一個「參數」，在指令名稱以後以冒號表示。
　　例如，v-bind 指令能夠用於響應式地更新 HTML 屬性：

<a v-bind:href="url">...</a>
<!--
    在這裏 href 是參數，告知 v-bind 指令將該元素的 href 屬性與表達式 url 的值綁定。
-->

　　另外一個例子是 v-on 指令，它用於監聽 DOM 事件：

<a v-on:click="doSomething">...</a>

<!--
    在這裏參數是監聽的事件名。
-->

三、指令中帶入修飾符

　　修飾符 (Modifiers) 是以半角句號 . 指明的特殊後綴，用於指出一個指令應該以特殊方式綁定。例如，.prevent 修飾符告訴 v-on 指令對於觸發的事件調用 event.preventDefault()：

<form v-on:submit.prevent="onSubmit">...</form>

四、指令的縮寫

　　v- 前綴做爲一種視覺提示，用來識別模板中 Vue 特定的特性。當你在使用 Vue.js 爲現有標籤添加動態行爲 (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 的瀏覽器都能被正確地解析。並且，它們不會出如今最終渲染的標記中。縮寫語法是徹底可選的，但隨着你更深刻地瞭解它們的做用，你會慶幸擁有它們。

五、常見的vue指令

5.一、v-model雙向綁定數據

<input type="text" v-model="msg"/>
{{msg}} <!--取數據-->

5.二、v-for循環

　　咱們用 v-for 指令根據一組數組的選項列表進行渲染。v-for 指令須要使用 item in items 形式的特殊語法，items 是源數據數組而且 item 是數組元素迭代的別名。

<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.三、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.四、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.五、v-else-if搭配v-if使用

　　2.1.0 新增
　　v-else-if，顧名思義，充當 v-if 的「else-if 塊」，能夠連續使用：
　　相似於 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.六、v-bind 屬性綁定

　　經過v-bind能夠動態綁定標籤上的屬性的值，如input的value/name等屬性的值。

<input v-bind:value="name">

5.七、v-style 經過v-bind實現style的綁定

　　vue中沒有專門style的綁定，可是能夠經過v-bind實現相似於v-style的綁定。

<span v-bind:style="{'color':'red'}">綁定color:red樣式</span>

5.八、v-class 經過v-bind實現class的綁定

　　vue中沒有專門class的綁定，可是能夠經過v-bind實現相似於v-class的綁定。

<span v-bind:class="'text'">綁定title樣式</span>

5.九、v-on 事件綁定

　　能夠用 v-on 指令監聽 DOM 事件，並在觸發時運行一些 JavaScript 代碼。
　　然而許多事件處理邏輯會更爲複雜，因此直接把 JavaScript 代碼寫在 v-on 指令中是不可行的。
　　所以 v-on 還能夠接收一個須要調用的方法名稱。

<span v-on:click="clickMe()">點擊我輸出日誌</span>

5.十、v-text 讀取文本

　　會將變量中的內容以文本的形式輸出，哪怕內容中含有html標籤，也不會解析，而是以文本的形式輸出。
　　如:someHtml: '<i><b>我是一些html斜體字</b></i>' 獲得的結果就是：<i><b>我是一些html斜體字</b></i>

<span v-text="someText"></span>

5.十一、v-html 讀取html標籤

　　會將變量中的內容讀取出來，會解析內容中的html標籤
　　以下獲得的結果就是加粗的斜體字：我是一些html斜體字

<span v-html="someHtml"></span>

5.十二、v-once 只渲染一次

　　v-once 進入頁面時,只渲染一次,再也不進行渲染:<span v-once>我只渲染一次</span>
　　若是以下綁定在事件中，那麼這個事件只會執行一次，並且是在渲染的時候自動幫咱們執行了這個事件，以後的點擊效果就失效

<span v-on.once:click="clickMe()">我是隻渲染一次的點擊事件</span>

5.1三、v-pre 把標籤內部的元素原位輸出

　　不會解析somePreText內的東西，直接原樣輸出{{soemPreText}}

<span v-pre>{{soemPreText}}</span>

5.1四、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>