Vue 3 模板語法

模板語法

實驗介紹

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

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

若是你熟悉虛擬 DOM 而且偏心 JavaScript 的原始力量，你也能夠不用模板，直接寫渲染 (render) 函數，使用可選的 JSX 語法。

插值

文本

文本中的數據綁定是數據綁定最多見的形式，就是使用雙大括號 {{}}，這個大括號的內容時刻與響應式系統中監測的數據綁定着，只要響應式系統中的數據發生變化，大括號的內容就會跟着發生變化，接下來咱們來試試一下吧。

在 src/views/ 新建 TemplateM.vue：

<template>
  <div class="template-m-wrap">
    {{ count }}
    <br />
    <button @click="click">加 1</button>
  </div>
</template>

<script>
export default {
  name: "TemplateM",
  data() {
    return {
      count: 0,
    };
  },
  methods: {
    click() {
      this.count++;
    },
  },
};
</script>

運行 npm run serve 跑起來以後，使用 http://localhost:8080/template_m 查看瀏覽器：

原始 HTML

咱們上面說道，雙大括號會將數據解析爲普通文本，而非 HTML 代碼，要實現真正的 HTML 代碼的綁定，則須要一些指令來配合了。

接着在上面的例子的基礎上面加上咱們的代碼：

<template>
  <div class="template-m-wrap">
    {{ count }}
    <br />
    <button @click="click">加 1</button>
    <br />
    這是原始 HTML 演示
    <br/>
    <div v-text="msg">
        綁定文本
    </div>
    <div v-html="msg2">
        綁定 HTML
    </div>
    <div v-text="msg" v-html="msg2"></div>
  </div>
</template>

<script>
export default {
  name: "TemplateM",
  data() {
    return {
      count: 0,
      msg: 111111,
      msg2: `<h2>這是一個 h2 標籤</h2>`
    };
  },
  methods: {
    click() {
      this.count++;
    },
  },
};
</script>

接下來，咱們一樣訪問 http://localhost:8080/template_m 查看瀏覽器：

從上圖咱們能夠看到 v-text 用於渲染文本，v-html 用於渲染帶有原始 HTML 代碼的指令，最後一行代碼咱們得出結論，多個指令一同使用時，後面的指令會覆蓋前面的指令。

HTML 屬性綁定

咱們原生的 HTML 元素不是有不少不同的屬性？像 title，class，id 等等，Vue 其實也提供了這些屬性的綁定規則。

接着在 src/views/TemplateM.vue 寫下這些代碼：

<template>
  <div class="template-m-wrap">
    {{ count }}
    <br />
    <button @click="click">加 1</button>
    <br />
    這是原始 HTML 演示
    <br/>
    <div v-text="msg">
        綁定文本
    </div>
    <div v-html="msg2">
        綁定 HTML
    </div>
    <div v-text="msg" v-html="msg2"></div>
    <br /> 
    
    <div v-bind:id="id" v-bind:class="cls" v-bind:title="title">
        原生 HTML 屬性綁定規則
    </div>
  </div>
</template>

<script>
export default {
  name: "TemplateM",
  data() {
    return {
      count: 0,
      msg: 111111,
      msg2: `<h2>這是一個 h2 標籤</h2>`,
      id: 'hhfff',
      cls: 'red',
      title: '這是原生 HTML 屬性規則綁定提示'
    };
  },
  methods: {
    click() {
      this.count++;
    },
  },
};
</script>

最後仍是訪問 http://localhost:8080/template_m 查看瀏覽器，咱們能夠看到 id，class，title 都被渲染在 HTML 屬性上面了：

js 表達式

實際上 Vue 給咱們提供了不少關於 js 表達式，使得咱們開發更加高效，敏捷，接着上面的代碼繼續書寫：

<template>
  <div class="template-m-wrap">
    {{ count }}
    <br/>
    {{count+msg}}
    <br>
    {{ok ? '好的' : '壞的'}}
    <br />
    {{name.split('')[0]}}
  </div>
</template>

<script>
export default {
  name: "TemplateM",
  data() {
    return {
      count: 0,
      msg: 1111,
      ok: true,
      name: 'Ken'
    };
  },
};
</script>

接下來，仍是訪問 http://localhost:8080/template_m 查看瀏覽器：

指令

指令 (Directives) 是帶有 v- 前綴的特殊 attribute。指令 attribute 的值預期是單個 JavaScript 表達式 (v-for 和 v-on 是例外狀況，稍後咱們再討論)。指令的職責是，當表達式的值改變時，將其產生的連帶影響，響應式地做用於 DOM。回顧咱們在介紹中看到的例子：

<template>
  <div class="template-m-wrap">
    <div v-if="ok">ok</div>
    <div v-else>not ok</div>
  </div>
</template>

<script>
export default {
  name: "TemplateM",
  data() {
    return {
      ok: true,
    };
  },
};
</script>

仍是訪問 http://localhost:8080/template_m 查看瀏覽器，只渲染了 ok：

參數

像一些指令可以接收一個參數，在指令名稱以後以 : 冒號的形式，例如咱們上面講到的 v-text，v-html，v-bind，v-on：

<div 
     v-text="msg" 
     v-html="msg2" 
     v-bind:class="cls" 
     v-bind:id="id" 
     v-bind:title="title"
></div> // 綁定變量
<button v-on:click="click"></button> // 監聽點擊事件

動態參數

動態參數，對參數進行變量化。使用 [] 來解析咱們綁定的屬性變量：

<template>
    <div>
        <div 
             v-bind:[cls]="cls" 
             v-bind:[id]="id" 
             v-bind:[title]="title"
        ></div> // 綁定變量
        <button v-on:[eventName]="click">anana</button> // 監聽點擊事件    
    </div>
</template>
<script>
export default {
    name: 'TemplateM',
    data() {
        return {
            cls: "class",
            id: 'id',
            title: 'title',
            eventName: 'click'
        }
    },
    methods: {
        click() {}
    }
}
</script>

縮寫

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

v-bind 縮寫

// 完整的寫法
<div v-bind:id="id" v-bind:class="cls" v-bind:title="title">
// 縮寫方式
<div :id="id" :class="cls" :title="title">
// 動態參數
<div :[id]="id" :[cls]="cls" :[title]="title">

v-on 縮寫

<button v-on:click="click">anana</button> // 監聽點擊事件    
<button :[eventName]="click">anana</button> // 監聽點擊事件
<button @[eventName]="click">anana</button> // 監聽點擊事件    
<button @click="click">anana</button> // 監聽點擊事件

它們看起來可能與普通的 HTML 略有不一樣，但 : 與 @ 對於 attribute 名來講都是合法字符，在全部支持 Vue 的瀏覽器都能被正確地解析。並且，它們不會出如今最終渲染的標記中。縮寫語法是徹底可選的，但隨着你更深刻地瞭解它們的做用，你會慶幸擁有它們。

注意事項

對動態參數值約定

動態參數預期會求出一個字符串，異常狀況下值爲 null。這個特殊的 null 值能夠被顯性地用於移除綁定。任何其它非字符串類型的值都將會觸發一個警告。

#對動態參數表達式約定

動態參數表達式有一些語法約束，由於某些字符，如空格和引號，放在 HTML attribute 名裏是無效的。例如：

<!-- 這會觸發一個編譯警告 -->
<a v-bind:['foo' + bar]="value"> ... </a>

變通的辦法是使用沒有空格或引號的表達式，或用計算屬性替代這種複雜表達式。

在 DOM 中使用模板時 (直接在一個 HTML 文件裏撰寫模板)，還須要避免使用大寫字符來命名鍵名，由於瀏覽器會把 attribute 名所有強制轉爲小寫：

<!--
在 DOM 中使用模板時這段代碼會被轉換爲 `v-bind:[someattr]`。
除非在實例中有一個名爲「someattr」的 property，不然代碼不會工做。
-->
<a v-bind:[someAttr]="value"> ... </a>

#JavaScript 表達式

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