【猿說VUE】初試模板語法，開啓VUE編碼之旅

模板語法

官網描述：

Vue.js 使用了基於 HTML 的模板語法，允許開發者聲明式地將 DOM 綁定至底層 Vue 實例的數據。所有 Vue.js 的模板都是合法的 HTML ，所以能被遵循規範的瀏覽器和 HTML 解析器解析。

在底層的實現上，Vue 將模板編譯成虛擬 DOM 渲染函數。結合響應系統，Vue 能夠智能地計算出最少需要重新渲染多少組件，並把 DOM 操作次數減到最少。

4.1 插值

主要是將數據插入到html文件中，可以包含文本、html元素、元素屬性、表達式等。類似使用jQuery操作DOM。

官方提醒：網站上動態渲染的任意 HTML 可能會非常危險，因爲它很容易導致 XSS 攻擊。請只對可信內容使用 HTML 插值，絕不要對用戶提供的內容使用插值。

4.1.1 插入文本

數據綁定最常見的形式就是使用 {{…}}（雙大括號）的文本插值。大括號內標籤將會被替代爲對應數據對象上 msgbindtext 屬性的值。無論何時，綁定的數據對象上 msgbindtext 屬性發生了改變，插值處的內容都會更新。

    <div id="app">
      <h2>VUE插值之文本</h2> 
      <p>數據綁定最常見的形式就是使用雙大括號的文本插值：{{msgbindtext}}</p>
    </div>


    <script type="text/javascript">
        const vm = new Vue({
            el: '#app',
            data: {
                msgbindtext: "插值文本"
            }
        })    
    </script>

4.1.2 插入html

通常我們使用雙大括號（參考4.1.1）會將數據解釋爲普通文本，而非HTML代碼。爲了輸出真正的HTML，可以使用 v-html 指令。如下示例中 span 的內容將會被替換成爲屬性值 msgbindhtml，直接作爲HTML顯示，此時將會忽略解析屬性值中的數據綁定。

    <div id="app">
      <h2>VUE插值之HTML</h2>
      <p>你需要使用v-html指令：<span v-html="msgbindhtml"></span></p>
    </div>

    <script type="text/javascript">
        const vm = new Vue({
            el: '#app',
            data: {
                msgbindtext: "插值文本",
                msgbindhtml: "<span style='color:red'>紅色的v-html指令。</span>"
            }
        })    
    </script>

4.1.3 插入屬性

如果需要設定HTML元素的屬性時應該使用v-bind指令。但是對於布爾attribute (因爲布爾類型只要存在就意味着值爲 true)，v-bind工作起來略有不同，如下：

<button v-bind:disabled="isButtonDisabled">Button</button>

如果 isButtonDisabled 的值是 null、undefined 或 false，則 disabled 屬性甚至不會被包含在渲染出來的button控件中。

下面是一段示例代碼：

<div id="app">
  <h2>VUE插值之屬性</h2>
  <p><label>點擊變換顏色：</label> <input id="ipAttribute" type="checkbox" v-model="useFlag"> 
  <div id="divAttribute" v-bind:class="{'clsChange': useFlag}">使用v-bind指令改變顏色屬性</div>
  </p>
</div>

<script type="text/javascript">
    const vm = new Vue({
        el: '#app',
        data: {
            msgbindtext: "插值文本",
            msgbindhtml: "<span style='color:red'>紅色的v-html指令。</span>",
            useFlag: false
        }
    })    
</script>

4.1.4 插入表達式

模板中數據綁定除了支持簡單的屬性鍵值外，Vue.js還提供了的JavaScript表達式的支持。這些表達式將會在所屬Vue實例的數據作用域下作爲被解析成JavaScript 。使用限制：每個綁定只能包含單個表達式，不支持JavaScript語句和控制流程。

官方提醒：模板表達式都被放在沙盒中，只能訪問全局變量的一個白名單，如 Math 和 Date 。你不應該在模板表達式中試圖訪問用戶定義的全局變量。

    <div id="app">
      <h2>VUE插值之表達式</h2>
      <p>四則運算表達式： {{ (3 + 6) * 2}}</p>
      <p>三目運算表達式： {{ useFlag ? 'YES' : 'NO'}}</p>
      <p>對象方法表達式： {{ msgReverse.split(',').reverse().join(',')}}</p>
      <p>v-bind綁定表達式：<a v-bind:href="blogUrl + 'gavinbj'">黑白猿博客</a></p>
    </div>

	<script type="text/javascript">
      const vm = new Vue({
        el: '#app',
        data: {
          msgbindtext: "插值文本",
          msgbindhtml: "<span style='color:red'>紅色的v-html指令。</span>",
          useFlag: false,
          msgReverse: "1,2,3,4",
          blogUrl: "https://blog.csdn.net/"
        }
      })    
    </script>

4.2 指令

指令是帶有 v- 前綴的特殊attribute。指令屬性的預期值是單個JavaScript 表達式。指令的職責是，當表達式的值改變時，將其產生的連帶影響，響應式地作用於DOM。

4.2.1 VUE指令基礎

看如下代碼示例：

    <div id="app">
      <h2>VUE指令</h2>
      <p v-if="showFlag">通過指令控制標籤是否顯示</p>
      <hr>
      <h2>VUE指令之帶參數</h2>
      <p><a v-bind:href="bolgUrlGavin">黑白猿博客</a></p>
      <hr>
      <h2>VUE指令之修飾符</h2>
      <p><div v-on:click.stop="stopUp">阻止向上冒泡</div></p>
      <p></p>
    </div>
    
        
    <script type="text/javascript">
      const vm = new Vue({
        el: '#app',
        data: {
          bolgUrlGavin: "https://blog.csdn.net/gavinbj",
          showFlag: true
        },
        methods: {
          stopUp(){
            alert("阻止向上冒泡事件");
          }
        }
      })

• 基本：v-if 指令將根據表達式 showFlag 的值的真假來控制文字的顯示和隱藏。
• 參數：在指令後以冒號來表示。上面代碼中v-bind指令被用來響應地更新HTML屬性，此時href即爲指令的參數，v-bind指令將該元素的href屬性與表達式 bolgUrlGavin的值進行綁定。
• 修飾符：以半角點號 . 指明的特殊後綴，用於表明該指令需要使用特殊方式進行綁定。上面代碼中.stop即爲修飾符，通知v-on指令對於觸發的事件調用event.stopPropagation()。

4.2.2 數據雙向綁定

v-model指令用來在input、select、textarea、checkbox、radio 等表單控件元素上創建雙向數據綁定，根據表單上的值，自動更新綁定的元素的值。按鈕的事件我們可以使用v-on監聽事件，並對用戶的輸入進行響應。

    <div id="app">
      <h2>VUE指令之雙向數據綁定</h2>
      <p>雙向綁定顯示內容：{{msgBindTwo}}</p>
      <input v-model="msgBindTwo">
      <hr>
      <h2>VUE指令之綁定事件監聽</h2>
      <button v-on:click="stopUp">指令事件</button>
      <button @click="stopUp">指令事件縮寫方式</button>
      <p></p>
      <p></p>
    </div>

    <script type="text/javascript">
      const vm = new Vue({
        el: '#app',
        data: {
          msgBindTwo: "雙向綁定顯示內容"
        },
        methods: {
          stopUp(){
            alert("阻止向上冒泡事件");
          }
        }
      })
    </script>

4.2.3 過濾器

Vue.js允許自定義過濾器，可以用於常見的文本內容格式化，由“管道符”指示，通常添加在JavaScript表達式的尾部。過濾器主要用在兩個地方：雙大括號插值和v-bind表達式。

<!-- 在兩個大括號中 -->
{{ message | capitalize }}

<!-- 在 v-bind 指令中 -->
<div v-bind:id="rawId | formatId"></div>

我們來看一個基礎使用方法的示例：

    <div id="app">
      <h2>VUE指令之過濾器</h2>
      <p>此處顯示自定義過濾器處理後的字符串：{{ msgnote | upfilter }}</p>
    </div>

	<script type="text/javascript">
      const vm = new Vue({
        el: '#app',
        data: {
          msgnote: "i am gavin！"

        },
        methods: {
        },
        filters: {
          upfilter: function(value){
            return value.toUpperCase();
          }
        }
      })
    </script>

注意：過濾器函數接受表達式的值作爲第一個參數。

擴展內容：過濾器可以串聯使用

{{ message | filterA | filterB }}

過濾器是 JavaScript 函數，因此可以接受參數：

{{ message | filterA('arg1', arg2) }}

這裏，message 是第一個參數，字符串 ‘arg1’ 將傳給過濾器作爲第二個參數， arg2 表達式的值將被求值然後傳給過濾器作爲第三個參數。

4.3 縮寫

v- 前綴作爲一種視覺提示，用來識別模板中 Vue 特定的屬性。當你在使用 Vue.js 爲現有標籤添加動態行爲時，v- 前綴很有幫助，然而，對於一些頻繁用到的指令來說，就會感到使用繁瑣。同時，在構建由 Vue 管理所有模板的單頁面應用程序 (SPA - single page application)時，v- 前綴也變得沒那麼重要了。因此，Vue 爲 v-bind 和 v-on 這兩個最常用的指令，提供了特定簡寫：

4.3.1 v-bind縮寫

<!-- 完整語法 -->
<a v-bind:href="url">...</a>

<!-- 縮寫 -->
<a :href="url">...</a>

<!-- 動態參數的縮寫 (2.6.0+) -->
<a :[key]="url"> ... </a>

4.3.2v-on縮寫

<!-- 完整語法 -->
<a v-on:click="doSomething">...</a>

<!-- 縮寫 -->
<a @click="doSomething">...</a>

<!-- 動態參數的縮寫 (2.6.0+) -->
<a @[event]="doSomething"> ... </a>

官網說明：縮寫看起來可能與普通的 HTML 略有不同，但 : 與 @ 對於屬性名來說都是合法字符，在所有支持Vue的瀏覽器都能被正確地解析。而且，它們不會出現在最終渲染的標記中。縮寫語法是完全可選的，但隨着你更深入地瞭解它們的作用，你會慶幸擁有它們。

4.4 完整代碼

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>N002:VUE模板語法</title>
  </head>

  <style>
    .clsChange {
      background: #444;
      color: #eee;
    }
  </style>
  <body>
    <div id="app">
      <h2>VUE插值之文本</h2> 
      <p>數據綁定最常見的形式就是使用雙大括號的文本插值：{{msgbindtext}}</p>
      <hr>
      <h2>VUE插值之HTML</h2>
      <p>你需要使用v-html指令：<span v-html="msgbindhtml"></span></p>
      <hr>
      <h2>VUE插值之屬性</h2>
      <p><label>點擊變換顏色：</label> <input id="ipAttribute" type="checkbox" v-model="useFlag"> 
        <div id="divAttribute" v-bind:class="{'clsChange': useFlag}">使用v-bind指令改變顏色屬性</div>
      </p>
      <hr>
      <h2>VUE插值之表達式</h2>
      <p>四則運算表達式： {{ (3 + 6) * 2}}</p>
      <p>三目運算表達式： {{ useFlag ? 'YES' : 'NO'}}</p>
      <p>對象方法表達式： {{ msgReverse.split(',').reverse().join(',')}}</p>
      <p>v-bind綁定表達式：<a v-bind:href="blogUrl + 'gavinbj'">黑白猿博客</a></p>
      <hr color=#987cb9 SIZE=5>
      <h2>VUE指令</h2>
      <p v-if="showFlag">通過指令控制標籤是否顯示</p>
      <hr>
      <h2>VUE指令之帶參數</h2>
      <p><a v-bind:href="bolgUrlGavin">黑白猿博客</a></p>
      <hr>
      <h2>VUE指令之修飾符</h2>
      <p><div v-on:click.stop="stopUp">阻止向上冒泡</div></p>
      <hr>
      <h2>VUE指令之雙向數據綁定</h2>
      <p>雙向綁定顯示內容：{{msgBindTwo}}</p>
      <input v-model="msgBindTwo">
      <hr>
      <h2>VUE指令之綁定事件監聽</h2>
      <button v-on:click="stopUp">指令事件</button>
      <button @click="stopUp">指令事件縮寫方式</button>
      <hr>
      <h2>VUE指令之過濾器</h2>
      <p>此處顯示自定義過濾器處理後的字符串：{{ msgnote | upfilter }}</p>
    </div>


    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script type="text/javascript">
      const vm = new Vue({
        el: '#app',
        data: {
          msgbindtext: "插值文本",
          msgbindhtml: "<span style='color:red'>紅色的v-html指令。</span>",
          useFlag: false,
          msgReverse: "1,2,3,4",
          blogUrl: "https://blog.csdn.net/",
          bolgUrlGavin: "https://blog.csdn.net/gavinbj",
          showFlag: true,
          msgBindTwo: "雙向綁定顯示內容",
          msgnote: "i am gavin！"

        },
        methods: {
          stopUp(){
            alert("阻止向上冒泡事件");
          }

        },
        filters: {
          upfilter: function(value){
            return value.toUpperCase();
          }
        }

      })
    
    </script>

  </body>
</html>