[TOC] ## 前言 `v-`前綴作為一種視覺提示，用來識別模板中 Vue 特定的特性。當你在使用 Vue.js 為現有標簽添加動態行為 (dynamic behavior) 時，`v-`前綴很有幫助，然而，對于一些頻繁用到的指令來說，就會感到使用繁瑣。同時，在構建由 Vue 管理所有模板的[單頁面應用程序 (SPA - single page application)](https://en.wikipedia.org/wiki/Single-page_application)時，`v-`前綴也變得沒那么重要了。因此，Vue 為`v-bind`和`v-on`這兩個最常用的指令，提供了特定簡寫 ### -插值 數據綁定常見的就是雙花括號`{{ hellow }}` ``` <標簽> {{ hellow }} </標簽> ``` 修改js中hellow的值標簽處也會發送變化更新update 通過`v-once`你也可以執行一次性的插值當數據改變時插入處不更新 只渲染元素和組件**一次**。隨后的重新渲染，元素/組件及其所有的子節點將被視為靜態內容并跳過。這可以用于優化更新性能。 ``` //單個元素 <span v-once> this will never change: {{msg}} </span> //有子元素 <div v-once> <h1>comment</h1> <p>{{msg}}</p> </div> //組件 <my-component v-once :comment = 'msg'></my-component> //指令 <ul> <li v-for =' i in list' v-once>{{ i }}</li> </ul> ``` ### `v-html` 和`v-text` 這兩貨看上去和JavaScript那兩很像啊！實際用途也是差不多的我們先舉出JavaScript的來看看 > * `innerHTML`：獲取從對象的起始位置到終止位置的全部內容，包括HTML標簽。當內容都是文本的時候，可以把這個屬性當做`textContent`屬性來用 > * `innerText`：獲取從對象的起始位置到終止位置的內容，但它不會包括HTML標簽 > * `outerHTML`：除了包含`innerHTML`的全部內容外，還會包含對象標簽本身 > * `textContent`：設置或返回指定節點的文本內容，以及它的所有后代。有時候，此屬性可用于取代`nodeValue`屬性，但請記住**此屬性同時會返回所有子節點的文本**。得到的結果跟`innerText`的結果是一樣的。如果是設置，則原本的子元素會被同時替換掉 > * `nodeValue`：和`textContent`很像，都是用來獲取某個元素中的內容，不過`nodeValue`并不能直接操作某個DOM元素，它只能用來獲取某段文本節點中的內容 > * `outerText`：和`outerHTML`有同樣的功能，它們都包括自身，不同的是`outerText`獲取的是元素內容，而`outerHTML`獲取到的內容包括元素 > 著作權歸大漠所有。 舉個栗子?? ``` <div id = 'app'> <h1 v-text ="'Username:' + name"></h1> </div> ``` 此處要注意的是雙引號是vue設定的邊界你要在里面輸入文本還需要單引號否則會報錯的這里的`v-text`感覺和`{{ name }}`功能相同`{{}}`代表的就是`""`，所以在`v-text=""`中，我們在內容里面就不需要再寫`{{}}`了，直接寫數據屬性就行了。 ### `v-text`也可以和`v-for`一起愉快玩耍 這兩貨結合起來也是好用的不要不要的 ``` <li v-for='(value,key) in person' v-text="key + ':' + value"></li> ``` ``` var app = new Vue({ el: '#app', data: { person: { name: '大漠', set: '男', age: 30 } } }) ``` 接下來到`v-html`出場啦 ``` <div v-html = 'cat'></div> //js var app = new Vue({ el: '#app', data:{ cat:"<img src='cat.png'>" } }) ``` > **注意：**你不能使用`v-html`來復合局部模板，因為Vue不是基于字符串的模板引擎。反之，對于用戶界面（UI），組件更適合作為可重用和可組合的基本單位。-來w3cplus大漠 ### 特性 Mustache 語法不能作用在 HTML 特性上，遇到這種情況應該使用 `v-bind`還能指定類型如`v-bind:title="arr"`數組`v-bind:title="obj"`對象等`v-bind:href` 一些指令能夠接收一個“參數”，在指令名稱之后以冒號表示。例如，`v-bind`指令可以用于響應式地更新 HTML 特性，另一個是`v-on`他用于監聽事件類似與jquery的`on` 在這`id`是參數告知v-bind綁定該id ~~~ <div v-bind:id="dynamicId"></div> ~~~ `v-bind的簡寫` 去掉`v-bind`即可 ``` <a v-bind:herf ='url'>...</a> <a :herf = 'url'>...</a> //簡寫 ``` `v-on的簡寫` 把`on`代替了@ ` <button v-on:click ='什么事件' >hellow</button> <button @click = '什么事件' >hellow</button> ` ### JavaScript表達式 ``` {{ number + 1 }} {{ ok ? 'YES' : 'NO' }} {{ message.split('').reverse().join('') }} ``` 傳入值進行 運算 ### 指令 在初體驗中我們使用`v-`的就是指令 指令 (Directives) 是帶有`v-`前綴的特殊特性 ### 動態參數 2.6.0新增括號擴起來的是動態如果data中attributename傳入的是href那么就是`v-bind:href` ``` <a v-bind:[attributeName] = 'url'>...</a> ``` 同樣作為監聽的`on`也是如此