Vue模板語法

模板語法： 

• 插值表達式
• 指令
• 事件綁定
• 屬性綁定
• 樣式綁定
• 分支循環結構

1. 插值表達式

使用{{ }}的形式將數據顯示在頁面中

<div>{{msg}}</div>

2. 指令

① 什么是指令？

• 指令的本質就是自定義屬性
• 指令的格式：以v-開始（比如： v-cloak）

② v-cloak指令用法

• 插值表達式存在的問題：“閃動”。即當不斷刷新頁面時，可能會出現閃動的現象，就是先出現{{msg}}插值表達式，之后才會迅速替換為具體顯示的內容
• 如何解決該問題：使用v-cloak指令
• 解決該問題的原理：先隱藏，替換好值之后再顯示最終的值

 官網：https://cn.vuejs.org/v2/api/ 

<div id="app">
    <div v-cloak>{{msg}}</div>
</div>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
    /*
      v-cloak指令的用法
      1、提供樣式: [v-cloak]是屬性選擇器
        [v-cloak]{
          display: none;
        }
      2、在插值表達式所在的標簽中添加v-cloak指令

      背后的原理：先通過樣式隱藏內容，然后在內存中進行值的替換，替換好之后再顯示最終的結果
    */
    var vm = new Vue({
      el: '#app',
      data: {
        msg: 'Hello Vue'
      }
    });
</script>

雖然刷新之后還是會有閃動的現象，但是不會出現插值表達式{{msg}}。

③ 數據綁定指令 

• v-text 填充純文本，相比插值表達式更加簡潔。v-text跟插值表達式一樣都是顯示數據的，但是v-text不會有閃動的現象。

• v-html 填充HTML片段，該方法存在安全問題。跨域的訪問不推薦使用該指令，同網站可以使用。在網站上動態渲染任意HTML是非常危險的，因為容易導致XSS攻擊。只在可信的內容上使用v-html，永不用在用戶提交的內容上。

• v-pre 填充原始信息，顯示原始信息，跳過編譯過程（分析編譯過程）

<!-- 插值表達式的方式顯示數據 -->
<div>{{msg}}</div>
<!-- v-text的方式顯示數據 -->
<div v-text='msg'></div>
<!-- v-html的方式顯示數據
       msg1:'<h1>HTML</h1>'
       顯示到頁面的是h1大小的 -->
<div v-html='msg1'></div>
<!-- 填充原始信息，也就是顯示到頁面上的是{{msg}}，而不是編譯后的msg的具體內容 -->
<div v-pre>{{msg}}</div>

④ 數據響應式

• 如何理解響應式：html5中的響應式（屏幕尺寸的變化導致樣式的變化）；數據的響應式（數據的變化導致頁面內容的變化）

• 什么是數據綁定：將數據填充到標簽中。用指令和插值表達式將數據填充到頁面中的標簽里面都稱為數據綁定，用指令和插值表達式形式的數據綁定默認都是響應式的
• v-once 只編譯一次：顯示內容之后不再具有響應式功能

v-once的應用場景：如果顯示的信息后續不需要再修改，就可以使用v-once，這樣可以提高性能。

<div v-once>{{info}}</div>

⑤ 雙向數據綁定

什么是雙向數據綁定？

數據內容的變化→頁面內容；用戶在頁面修改內容→數據內容的變化

使用v-model指令進行雙向綁定數據：

<input type='text' v-model='uname'/>

MVVM設計思想： 

M(model)：提供數據

V(view)：提供頁面展示效果

VM(View-Model)：實現控制邏輯

view與model不能直接交互，必須要有中介View-Model

3. 事件綁定

① Vue如何處理事件？ 

• v-on指令用法

<input type='button' v-on:click='num++'/>

• v-on簡寫形式

<input type=‘button' @click='num++'/>

② 事件函數的調用方式 

• 直接綁定函數名稱

<button v-on:click='say'>Hello</button>

• 調用函數

<button v-on:click='say()'>Say hi</button>

/* 事件綁定 */
var vm = new Vue({
    el: '#app',
    data: {
        num: 0
    },
    // 函數必須定義在methods屬性當中
    methods: {
        handle: function() {
            // 這里的this是Vue的實例對象
            console.log(this == vm);
            // 注意，函數里面不能直接使用data里的數據，必須要加上this.，否則會報錯num沒定義
            this.num++;
        }
    }
})

<!-- 函數調用 -->
<button @click='handle'>點擊1</button>
<button @click='handle()'>點擊2</button>

③ 事件函數參數傳遞 

• 普通參數和事件對象

<button v-on:click='say1()'>Say hi1</button>
<button v-on:click='say2("hi", $event)'>Say hi2</button>

• 如果事件直接綁定函數名稱，那么默認會傳遞事件對象作為事件函數的第一個參數
• 如果事件綁定函數調用，那么事件對象必須作為最后一個參數顯示傳遞，並且事件對象的名稱必須是$event

④ 事件修飾符

• .stop 阻止冒泡

傳統的阻止冒泡的方式是在函數里添加這樣一句代碼：event.stopPropagation();

<a v-on:click.stop="handle">跳轉</a>

• .prevent 阻止默認行為

原生JS中阻止默認行為是在函數里添加這樣一句代碼：event.preventDefault();

<a v-on:click.prevent="handle">跳轉</a>

事件修飾符可以連寫，但是要注意先后順序，具體的可以參考官方文檔

⑤ 按鍵修飾符 

• .enter 回車鍵

<input v-on:keyup.enter='submit'>

// 按回車鍵提交文本框中的內容
methods: {
    submit: function() {
        console.log(this.username, this.password);
    }
}

• .esc 退出鍵

<input v-on:keyup.delete='handle'>

// 按delete鍵清空文本框中的內容
methods: {
    handle: function() {
        this.username = '';
    }
}

⑥ 自定義按鍵修飾符 

• 全局config.keyCodes對象

Vue.config.keyCodes.f1 = 65

<!-- 點擊a按鍵后觸發handle事件 -->
<input type="text" v-on:keyup.f1='handle'>

規則：自定義按鍵修飾符名字是自定義的，但是對應的值必須是按鍵對應event.keyCode值

4. 屬性綁定

① Vue如何動態處理屬性？

• v-bind指令用法 

<a v-bind:href='url'>跳轉</a>

• 縮寫形式 

<a :href='url'>跳轉</a>

② v-model的底層實現原理  

<!-- 這三種方式都是雙向綁定數據 -->
<!-- handle函數中的內容為：this.msg=event.target.value; -->
<input v-bind:value="msg" v-on:input="handle">
<input v-bind:value="msg" v-on:input="msg=$event.target.value">
<input v-model="msg">

5. 樣式綁定

① class樣式處理

• 對象語法 

<!-- 單個類名綁定 -->
<div v-bind:class="{ active: isActive }"></div>
<!-- 多個類名綁定 -->
<div v-bind:class="{ active: isActive, error: isError }"></div>

例如下面這段代碼：

  <div id="app">
    <div v-bind:class="{active: isActive,error: isError}">
      測試樣式
    </div>
    <button v-on:click='handle'>切換</button>
  </div>
  <script type="text/javascript" src="js/vue.js"></script>
  <script type="text/javascript">
    /*
      樣式綁定
    */
    var vm = new Vue({
      el: '#app',
      data: {
        isActive: true,
        isError: true
      },
      methods: {
        handle: function(){
          // 控制isActive的值在true和false之間進行切換
          this.isActive = !this.isActive;
          this.isError = !this.isError;
        }
      }
    });
  </script>

• 數組語法

<div v-bind:class="[activeClass, errorClass]"></div>

例如下面這段代碼：

  <div id="app">
    <div v-bind:class='[activeClass, errorClass]'>測試樣式</div>
    <button v-on:click='handle'>切換</button>
  </div>
  <script type="text/javascript" src="js/vue.js"></script>
  <script type="text/javascript">
    /*
      樣式綁定
    */
    var vm = new Vue({
      el: '#app',
      data: {
        activeClass: 'active',
        errorClass: 'error'
      },
      methods: {
        handle: function(){
          this.activeClass = '';
          this.errorClass = '';
        }
      }
    });
  </script>

樣式綁定的一些細節：

• 對象綁定和數組綁定可以結合使用：

<div v-bind:class='[activeClass, errorClass, {test: isTest}]'>測試樣式</div>

• 如果樣式過多，都寫在標簽中太過於復雜，class綁定的值可以簡化：

data: {
    arrClasses: ['active', 'error']
}
// 或者
data: {
    objClasses: {
        active: true,
        error: true
    }
}

• 默認的class如何處理？默認的class樣式會保留

<!-- 默認的base樣式會保留，不會被覆蓋 -->
<div class='base' v-bind:class='objClasses'></div>

② style樣式處理

• 對象語法 

<div v-bind:style="{ color: activeColor, fontSize: fontSize }"></div>

• 數組語法 

<div v-bind:style="[baseStyles, overridingStyles]"></div>

用法與class樣式處理的用法差不多

6. 分支循環結構

① 分支結構

• v-if

• v-else

• v-else-if

• v-show  

注意，分支結構渲染出來的實際上只有一個div：

<div id="app">
    <div v-if='score>=90'>優秀</div>
    <div v-else-if='score<90&&score>=80'>良好</div>
    <div v-else-if='score<80&&score>60'>一般</div>
    <div v-else>比較差</div>
</div>

② v-if與v-show的區別

• v-if控制元素是否渲染到頁面

• v-show控制元素是否顯示（已經渲染到了頁面），類似於display: none  

• 如果我們需要頻繁的顯示和隱藏某個元素，那就使用v-show

• 如果我們希望元素渲染之后基本上變化比較少了，那就是用v-if

③ 循環結構

• v-for遍歷數組 

<li v-for='item in list'>{{item}}</li>

<li v-for='(item,index) in list'>{{item}} + '---' +{{index}}</li>

data: {
    list: ['apple', 'orange', 'banana']
}

如果是復雜的數據類型，例如：

data: {
    myFruits: [{
        ename: 'apple',
        cname: '蘋果'
    },{
        ename: 'orange',
        cname: '橘子'
    },{
        ename: 'banana',
        cname: '香蕉'
    }]
}

<li v-for='item in myFruits'>
    <span>{{item.ename}}</span>
    <span>------</span>
    <span>{{item.cname}}</span>
</li>

• key的作用：幫助Vue區分不同的元素，從而提高性能

<li :key='item.id' v-for='(item,index) in list'>{{item}} + '---' {{index}}</li>

• v-for遍歷對象 

里面的參數順序是固定的，但是名字可以自定義

<div v-for='(value, key, index) in object'></div>

使用原生的JS遍歷對象：

var obj = {
    uname: 'lisi',
    age: 12,
    gender: 'male'
}
// 注意：for in循環不推薦遍歷數組，只用於遍歷對象
for (var key in obj) {
    console.log(key, obj[key]);
}

• v-if和v-for結合使用

<div v-if='value==12' v-for='(value, key, index) in object'></div>