# 第二章 數據綁定
>[success] 可在此處查看運行文檔中的代碼示例結果：[https://github.com/jianyaoo/Vue](https://github.com/jianyaoo/Vue)
[toc]
## 1 - vue實例
每一個vue應用都是起始于先創建一個vue實例，創建方式如下,通過new關鍵字創建對象。
```
var vm = new Vue({
el:"",
data:"",
.....
})
```
>[info] 通過`new Vue`創建了一個vue的根實例。一個Vue應用一般由根實例、可嵌套的、可復用的組件樹組成
## 2 - 響應式數據
>[info] 當一個Vue實例被創建的時候，它會將data對象中的所有屬性添加到Vue的響應式系統中，當數據發生改變時，視圖也會發生改變。當數據發生變化時，視圖會重新渲染。
**<span style="padding-top:15px;display:inline-block;">代碼實例</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] 需要注意的是：只有在創建實例時添加的data屬性值才會存在響應式系統中。如果是后期動態通過`vm.`的 方式添加上去的，則不會存在于響應式中
>**解決方式：盡量不要通過動態添加data屬性，如果在后期需要用到一個data屬性則在實例化時就聲明為相對應類型的空值即可。**
```
var vm = new Vue({
data:{
newTodoList:"",
count:0,
todos:[]
}
})
```
**<div style="padding-top:15px;">阻止響應</div>**
如果定義的data對象使用了`Object.freeze()`，則會進行修改現在的屬性，這會直接導致數據無法在系統中進行響應式。該現象說明：無論是修改了屬性值還是修改了視圖的本質都是，先修改data屬性值，data屬性值發生變化觸發視圖修改。
```
<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"; // 執行后顯示的依舊是hello vue
},
}
})
</script>
</body>
```
## 3 - 模板語法
### 插值
在模板中數據綁定最常見的方式就是雙大括號法的文本賦值
```html
<span>hello,{{name}}</span>
```
Mustache 標簽將會被替代為對應數據對象上`name`屬性的值。無論何時，綁定的數據對象上`name`屬性發生了改變，插值處的內容都會更新。
在使用插值表達式時的兩種情況：`文本`，`原始HTML`
#### 文本
**第一種：文本**
>[info] 文本插值即插入到dom元素中的信息為文本格式，即純文本，不會對html代碼進行解析。
```html
<div id="app">
<p>{{msg}}</p>
<p v-text='msg'></p>
//兩者的效果一樣
</div>
```
#### HTML
**第二種：原始HTML格式**
>[info] 如果想要修改dom元素的innerHtml，即將data對象中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"; // 執行后顯示的依舊是hello vue
},
}
})
</script>
</body>
```
**運行結果比較**
>[danger] 在自己的站點直接渲染html是一件非常危險的事情，可能會導致跨站腳本攻擊。一定 **不要** 動態渲染用戶輸入的內容，只對自己信任的內容使用html渲染。
#### 特性
**特性**
使用插值語法只能是渲染內容，不能直接作用到html標簽上，如果想要對html標簽進行操作需要使用 `v-bind`指令。
```
<div v-bind:id="app"></div>
```
#### 使用js表達式
在插值語法中允許使用簡單的js表達式，但是請注意**只能使用簡單的表達式，任何語句都不支持。流控制也不支持，需要使用三元表達式**。
```
<p>{{msg.split(' ').reverse().join(',')}}</p>
```
>[info] msg = "hello vue" 顯示結果為vue,hello
### 指令
**<span style="padding-top:15px;display:inline-block;">什么是指令</span>**
指令是帶有`v-`前綴的特殊特性
**<span style="padding-top:15px;display:inline-block;">指令的預期值<span>**
指令的預期值是單個的JS表達式
**<span style="padding-top:15px;display:inline-block;">指令的職責<span>**
當表達式的發生變化時，將其產生的影響作用到dom上
#### 參數
>[info] 一個指令可以接受一個參數，以：的形式表示
#### 修飾符
修飾符是半角句號`.`指明的特殊后綴，用于表示當前指令應該以特殊方式進行綁定。
