[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`也是如此
- 前言
- 你真的懂This嗎?
- 對象和對象構造函數
- 工廠功能和模塊模式
- API的使用
- async and await
- 關于async的很棒的一篇文章
- 掘金:關于forEach,map,fiter循環操作
- Node.js 實例與基礎
- 原創: Express 學習使用筆記
- 零碎知識點方法
- 關于滾動吸頂的方法
- Vue學習筆記
- Vue向導
- vuex是啥?
- vue代碼風格指南
- 關于vue的初體驗
- 超詳細解毒Vue
- Vue實例
- 模版語言
- 組件基礎
- 條件渲染、列表渲染、Class與style綁定
- Todolist的制作超詳細
- vue-router
- Vue基礎2.0x 筆記
- 搭建vuepress
- JavaScript之ES6
- 箭頭函數
- 這就是This