# 第二章 數(shù)據(jù)綁定
>[success] 可在此處查看運(yùn)行文檔中的代碼示例結(jié)果：[https://github.com/jianyaoo/Vue](https://github.com/jianyaoo/Vue)
[toc]
## 1 - vue實(shí)例
每一個(gè)vue應(yīng)用都是起始于先創(chuàng)建一個(gè)vue實(shí)例，創(chuàng)建方式如下,通過new關(guān)鍵字創(chuàng)建對(duì)象。
```
var vm = new Vue({
el:"",
data:"",
.....
})
```
>[info] 通過`new Vue`創(chuàng)建了一個(gè)vue的根實(shí)例。一個(gè)Vue應(yīng)用一般由根實(shí)例、可嵌套的、可復(fù)用的組件樹組成
## 2 - 響應(yīng)式數(shù)據(jù)
>[info] 當(dāng)一個(gè)Vue實(shí)例被創(chuàng)建的時(shí)候，它會(huì)將data對(duì)象中的所有屬性添加到Vue的響應(yīng)式系統(tǒng)中，當(dāng)數(shù)據(jù)發(fā)生改變時(shí)，視圖也會(huì)發(fā)生改變。當(dāng)數(shù)據(jù)發(fā)生變化時(shí)，視圖會(huì)重新渲染。
**<span style="padding-top:15px;display:inline-block;">代碼實(shí)例</span>**
```
<body>
<div id="app">
<p>{{msg}}</p>
<button @click="handleClick">修改</button>
</div>
<script type="text/javascript">
var vm = new Vue({
el:"#app",
data:{
msg:"hello vue",
},
methods:{
handleClick(){
this.msg = "hello click";
},
}
})
</script>
</body>
```
>[danger] 需要注意的是：只有在創(chuàng)建實(shí)例時(shí)添加的data屬性值才會(huì)存在響應(yīng)式系統(tǒng)中。如果是后期動(dòng)態(tài)通過`vm.`的 方式添加上去的，則不會(huì)存在于響應(yīng)式中
>**解決方式：盡量不要通過動(dòng)態(tài)添加data屬性，如果在后期需要用到一個(gè)data屬性則在實(shí)例化時(shí)就聲明為相對(duì)應(yīng)類型的空值即可。**
```
var vm = new Vue({
data:{
newTodoList:"",
count:0,
todos:[]
}
})
```
**<div style="padding-top:15px;">阻止響應(yīng)</div>**
如果定義的data對(duì)象使用了`Object.freeze()`，則會(huì)進(jìn)行修改現(xiàn)在的屬性，這會(huì)直接導(dǎo)致數(shù)據(jù)無法在系統(tǒng)中進(jìn)行響應(yīng)式。該現(xiàn)象說明：無論是修改了屬性值還是修改了視圖的本質(zhì)都是，先修改data屬性值，data屬性值發(fā)生變化觸發(fā)視圖修改。
```
<body>
<div id="app">
<p>{{msg}}</p>
<button @click="handleClick">修改</button>
</div>
<script type="text/javascript">
var obj = {
msg:"hello vue",
}
Object.freeze(obj);
var vm = new Vue({
el:"#app",
data:obj,
methods:{
handleClick(){
this.msg = "hello click"; // 執(zhí)行后顯示的依舊是hello vue
},
}
})
</script>
</body>
```
## 3 - 模板語法
### 插值
在模板中數(shù)據(jù)綁定最常見的方式就是雙大括號(hào)法的文本賦值
```html
<span>hello,{{name}}</span>
```
Mustache 標(biāo)簽將會(huì)被替代為對(duì)應(yīng)數(shù)據(jù)對(duì)象上`name`屬性的值。無論何時(shí)，綁定的數(shù)據(jù)對(duì)象上`name`屬性發(fā)生了改變，插值處的內(nèi)容都會(huì)更新。
在使用插值表達(dá)式時(shí)的兩種情況：`文本`，`原始HTML`
#### 文本
**第一種：文本**
>[info] 文本插值即插入到dom元素中的信息為文本格式，即純文本，不會(huì)對(duì)html代碼進(jìn)行解析。
```html
<div id="app">
<p>{{msg}}</p>
<p v-text='msg'></p>
//兩者的效果一樣
</div>
```
#### HTML
**第二種：原始HTML格式**
>[info] 如果想要修改dom元素的innerHtml，即將data對(duì)象中html作為html渲染輸出
>
```
<p v-html="msg2"></p>
```
**代碼示例**
```
<body>
<div id="app">
<p>{{msg}}</p>
<p v-text="msg1"></p>
<p v-html="msg2"></p>
<button @click="handleClick">修改</button>
</div>
<script type="text/javascript">
var obj = {
msg:"hello vue",
msg1:"<h1>v-text指令</h1>",
msg2:"<h1>v-html指令</h1>"
}
Object.freeze(obj);
var vm = new Vue({
el:"#app",
data:obj,
methods:{
handleClick(){
this.msg = "hello click"; // 執(zhí)行后顯示的依舊是hello vue
},
}
})
</script>
</body>
```
**運(yùn)行結(jié)果比較**
>[danger] 在自己的站點(diǎn)直接渲染html是一件非常危險(xiǎn)的事情，可能會(huì)導(dǎo)致跨站腳本攻擊。一定 **不要** 動(dòng)態(tài)渲染用戶輸入的內(nèi)容，只對(duì)自己信任的內(nèi)容使用html渲染。
#### 特性
**特性**
使用插值語法只能是渲染內(nèi)容，不能直接作用到html標(biāo)簽上，如果想要對(duì)html標(biāo)簽進(jìn)行操作需要使用 `v-bind`指令。
```
<div v-bind:id="app"></div>
```
#### 使用js表達(dá)式
在插值語法中允許使用簡單的js表達(dá)式，但是請(qǐng)注意**只能使用簡單的表達(dá)式，任何語句都不支持。流控制也不支持，需要使用三元表達(dá)式**。
```
<p>{{msg.split(' ').reverse().join(',')}}</p>
```
>[info] msg = "hello vue" 顯示結(jié)果為vue,hello
### 指令
**<span style="padding-top:15px;display:inline-block;">什么是指令</span>**
指令是帶有`v-`前綴的特殊特性
**<span style="padding-top:15px;display:inline-block;">指令的預(yù)期值<span>**
指令的預(yù)期值是單個(gè)的JS表達(dá)式
**<span style="padding-top:15px;display:inline-block;">指令的職責(zé)<span>**
當(dāng)表達(dá)式的發(fā)生變化時(shí)，將其產(chǎn)生的影響作用到dom上
#### 參數(shù)
>[info] 一個(gè)指令可以接受一個(gè)參數(shù)，以：的形式表示
#### 修飾符
修飾符是半角句號(hào)`.`指明的特殊后綴，用于表示當(dāng)前指令應(yīng)該以特殊方式進(jìn)行綁定。
- 第一篇 基礎(chǔ)篇
- 01 - 初始 vue
- 02 - 數(shù)據(jù)綁定
- 03 - 計(jì)算屬性
- 04 - v-bind及class與style綁定
- 05 - 內(nèi)置指令
- 06 - 表單與v-model
- 07 - 組件
- 08 - 自定義指令
- 文檔模板
- 第二篇 進(jìn)階篇
- 01 - Render函數(shù)
- 02 - webPack
- 03 - 插件
- 第三篇 實(shí)戰(zhàn)篇
- 01 - iview經(jīng)典組件剖析
- 02 - 知乎日?qǐng)?bào)項(xiàng)目開發(fā)
- 03 - 電商網(wǎng)站開發(fā)
- 04 - 相關(guān)開源介紹