Vue渲染數據理解以及Vue指令

1、Vue渲染數據原理

原生JS改變頁面數據，必需要獲取頁面節點，也便是進行DOM操做，jQuery之類的框架只是簡化DOM操做的寫法，實質並無改變操做頁面數據的底層原理，DOM操做影響性能（致使瀏覽器的重繪和迴流），Vue是一個mvvm框架（庫），大幅度減小了DOM操做，操做數據以下圖：

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

頁面經過Vue實例（vm）來獲取數據，數據改變是經過改變Vue實例中的數據使展現在頁面上的數據發生改變，並非直接改變頁面上的數據。

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

2、指令：擴展html標籤功能

一、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值;

二、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>

三、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........

四、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,.....} 

注意：:value="1"和value="1"的區別：

:value="1"會按照Js語法來解析 ""中的值，在這裏是整數；value="1"輸出就是一個字符串

再好比 ：:value="[1,2,3]"中[1,2,3]就是一個數組；value="[1,2,3]"中的[1,2,3]就是一個字符串

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

表達式爲真，display:block；表達式爲假，display:none

六、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>

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

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

八、v-text更新元素的 textContent

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

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

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