Vue渲染資料理解以及Vue指令

摘要： 一、Vue渲染資料原理 原生JS改變頁面資料，必須要獲取頁面節點，也即是進行DOM操作，jQuery之類的框架只是簡化DOM操作的寫法，實質並沒有改變操作頁面資料的底層原理，DOM操作影響效能（導致瀏覽器的重繪和迴流），Vue是一個mvvm框架（庫），大幅度減少了DOM操作，操作資料如下圖...

一、Vue渲染資料原理

原生JS改變頁面資料，必須要獲取頁面節點，也即是進行DOM操作，jQuery之類的框架只是簡化DOM操作的寫法，實質並沒有改變操作頁面資料的底層原理，DOM操作影響效能（導致瀏覽器的重繪和迴流），Vue是一個mvvm框架（庫），大幅度減少了DOM操作，操作資料如下圖：

View也就是頁面，Model是指資料，VM是Vue例項，頁面所需的資料或者方法都定義在vm中

頁面通過Vue例項（vm）來獲取資料，資料改變是通過改變Vue例項中的資料使展示在頁面上的資料發生改變，並不是直接改變頁面上的資料。

注：Vue例項包括根例項（new Vue({})）和元件例項

二、指令：擴充套件html標籤功能

1、v-model：表單控制元件元素上建立 雙向資料 繫結。它會根據控制元件型別自動選取正確的方法來更新元素

（ v-model 並不關心表單控制元件初始化所生成的值。因為它會選擇 Vue 例項資料來作為具體的值。）

對於不同的控制元件，v-model會自動繫結到不同的值上

（1）<input type="text" v-model="value" /> v-model繫結的是其 value值；

（2）<input type="checkbox"v-model="checked" value="test">單個勾選框 v-model繫結的是checked的狀態，即是否勾選上，其值為布林值；

（3）<input type="checkbox"value="Jack" v-model="checkedNames">

<input type="checkbox"value="John" v-model="checkedNames">

<input type="checkbox"value="John" v-model="checkedNames">多個勾選框，v-model繫結的是勾選上的選項的value值所組成的一個數組；

（4）<input type="radio" value="One" v-model="picked">

<input type="radio"value="Two" v-model="picked">單選按鈕，v-model繫結是選中的那一項的value值
（5）<select v-model="selected">

<option value="one">A</option>
<option value="two">B</option>
<option value="three">C</option>
</select>單選列表，若 option中規定了value屬性，v-model繫結的是選中的那一項的value值，若option中沒有規定value屬性，v-model繫結的是選中的那一項的內容

（6）<select v-model="selected" multiple>

<option value="one">A</option>
<option>B</option>
<option value="three">C</option>
</select>多選列表，繫結到陣列，與單選列表類似，規定了value值，陣列就由所選項的value組成，未規定value值，陣列就由所選項的內容組成

（7）<textarea v-model="textarea"></textarea> v-model繫結的是其 value值;

2、v-for列表渲染

<ul>
<li v-for="item in items">
{{ item.message }}
</li>
</ul>


<div v-for="(item, index) in items"></div>
<div v-for="(val, key) in object"></div>
<div v-for="(val, key, index) in object"></div>

3、v-on:繫結事件（縮寫@）

　　<div id="app">
<div v-on:click="testclick">click</div>
</div>
<script>
new Vue({
el: "#app",
methods:{
testclick: function(){
alert(111)
}
}
})
</script>

注：繫結事件直接在dom上完成，所有的 Vue.js 事件處理方法和表示式都嚴格繫結在當前檢視的 ViewModel 上

常用的一些事件有：click、dbclick、keydown、keyup、mouseover、 mouseout、mousedown........

4、v-bind:繫結屬性（縮寫：）

<!-- 繫結一個屬性 -->
<img v-bind:src="imageSrc">
<!-- 縮寫 -->
<img :src="imageSrc">
<!--在繫結 class 或 style 特性時，支援其它型別的值，如陣列或物件-->
<!-- class 繫結 -->
<div :class="{ red: isRed }"></div> <!--這裡的red是類名，isRed是資料名，值為ture或false-->
<div :class="[classA, classB]"></div> <!--這裡的classA/classB都是資料名，他們的值是類名，自動渲染到div上-->
<div :class="[classA, { classB: isB, classC: isC }]"> <!--同上，classA,isB,isC是資料名，classA的資料值，classB，classC是類名，isB，isC的資料值是true/false-->
<!-- style 繫結 -->
<div :style="{ fontSize: size + 'px' }"></div>
<div :style="[styleObjectA, styleObjectB]"></div> <!--styleObjectA是資料名，其結構形如：styleObjectA:{backgroundColor:'red'}複合樣式採用駝峰命名-->
<!-- 沒有引數(屬性名)時，可以繫結到一個包含鍵值對的物件 -->
<div v-bind="{ id: someProp, 'other-attr': otherProp }"></div>
<!-- 通過 prop 修飾符繫結 DOM 屬性 -->
<div v-bind:text-content.prop="text"></div>
<!-- 在繫結 prop 時，prop 必須在子元件中宣告。可以用修飾符指定不同的繫結型別。 “prop” 必須在 my-component 中宣告。 -->
<my-component :prop="someThing"></my-component>
<!-- XLink -->
<svg><a :xlink:special="foo"></a></svg>

關於props的繫結：用於父元件向子元件傳值

在父元件中，使用子元件時，<Child v-bind:data="data"/>，通過v-bind把子元件需要的資料傳遞給子元件；

在子元件中通過props來接受傳過來的資料，常用寫法：props:['data',......]/props:{data:dataType,.....}

5、v-show根據表示式的真假切換元素的display的屬性值

表示式為真，display:block；表示式為假，display:none

6、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>
<!-- v-for 指令-->
<ul>
<li v-for="i in list" v-once>{{i}}</li>
</ul>

7、v-html 更新元素的 innerHTML 。注意：內容按普通 HTML 插入 - 不會作為 Vue 模板進行編譯

<!--rawHtml將會按照HTML的格式 插入到span中-->
<span v-html="rawHtml"></span>

8、v-text更新元素的 textContent

<span v-text="msg"></span>
<!-- 和下面的一樣 -->
<span>{{msg}}</span>

9、v-if、v-else根據表示式的值的真假條件渲染元素

<div v-if="Math.random() > 0.5">
Sorry
</div>
<div v-else>
Not sorry
</div>