Vue模板語法、V-text、V-html、V-once介紹

參考資料：
Vue.js官網教學
 Vue api 指令介紹
 Vue.js Core 30天屠龍記(第5天): 模板語法 Part 1 - Mustache 標籤

模板語法

模板語法是邏輯跟頁面之間溝通的媒介

Vue.js 使用了基於HTML 的模板語法，允許開發者聲明式(declaratively)地將DOM 綁定至底層Vue 實例的數據。官網介紹

Vue模板語法共分為兩種

1.插值 Mustache語法
2.指令如：v-bind、v-on、v-model、v-for

一、插值 Mustache語法

範例1:加入文字 jsbin連結

寫法：使用Mustache語法(就是雙大括號)

<span>Message: {{ msg }}</span>

補充：若希望文字能單次綁定 只要加上`v-once`即可，之後再變更實體內msg文字內容畫面也不會改變
<span v-once >Message: {{ msg }}</span>

二、指令 Directives

指令是Vue 所提供特殊的 DOM 屬性， Vue 內建的指令通常會以「 v- 」作為開頭。
指令中的「值」通常⽤用來表⽰某個 JS 運算式。而指令的作用，是將某個運算式執⾏後的結果回饋到對應的 DOM 上。

範例1:插入原始HTML結構

寫法：v-html

1
2
3

<h4 class="mt-3">原始 HTML</h4>
{{ rawHtml }}
<p v-html="rawHtml">這邊會渲染出原始 HTML 結構</p>

補充：
網站上動態渲染的任意HTML可能會非常危險，因為它很容易導致XSS攻擊
不建議使用地方：使用者輸入框、密碼欄位等

範例2:新增參數

寫法：使用v-bind綁定，新增屬性如id、href

1	<h4 class="mt-3" v-bind:id="htmlId">HTML 屬性</h4>

範例3:動態新增參數

Vue2.6版本新增

1
2
3

<div id="app">
  <a v-bind:[attributeName]="url"> ... </a>
</div>

說明：如果Vue實體內有一個data屬性attributeName，其值為”href”，那麼這個綁定等同v-bind:href 參考資料

範例4:修飾符

使用.當作修飾符

1	<a v-on:submit.prevent="onSubmit">...</a>

說明：.prevent修飾符等同告訴v-on指令對於觸發的事件使用event.preventDefault()

補充:介紹修飾符

官網–修飾符介紹
Vue 的修飾⼦最主要分成兩種:表單元素的修飾⼦ 與 事件的修飾⼦。

修飾符目的：
用來增強指令 (directive) 附加功能的語法糖。
寫法介紹：v-xxx 的指令後加上「 .xxx 」

而修飾符依照種類可以區分下面幾種：

表單修飾符
事件修飾符（如：事件冒泡事件）
鼠標修飾符
按鍵修飾符
鍵值修飾符

表單修飾符：

.lazy(不會即時更新input)、
.number（將input輸入資料轉為數值）、
.trim（去除首尾空白字符）

1
2
3

<p>lazy修飾符示範</p>
<div>msg: {{ msg }}</div>
<input type="text" v-model.lazy="msg">

事件修飾符：codepen範例原始碼，範例將示範如何翻轉字串
HTML部分

<div id="app">
<input type="text" class="form-control" v-model="text" @keyup.enter="reverseText">

<a href="http://www.google.com" @click.prevent="reverseText" class="btn btn-primary mt-1">反轉字串</a>

<ul>
   <li class="mt-3" v-for="item in content">
       {{ item.title }}
    </li>
  </ul>
</div>

JavaScript部分

var app = new Vue({
  el: '#app',
  data: {
    text: '',
    newText:'',
    //儲存newText資料
    content: [
      // {
      //  title:'', 
      // }
    ],
  },
  // 請在此撰寫 JavaScript
  methods: {
    reverseText:function() {
      // event.preventDefault();
      this.newText= this.text.split('').reverse().join('');
      this.content.push(
      {
        title: this.newText,
      }
      )
      this.text =''; //清空資料
    }
  }
});

注意縮寫時候，v-on: 可以全部取代為＠

內建指令如下：

V-text、V-html、V-once

V-text插入：渲染純文字內容
V-html：插入整個html結構
V-once：將 data 內的內容渲染後，不再追蹤其變化

<div v-html="rawHTML"></div>
<hr>
<div v-once>msg with v-once: {{ msg }}</div>
<hr>
<div v-text="msg"></div>

小結：模板語法撰寫重點

1.必須使用表達式（expression）。簡單來說表達式就是要能產生一個值（或是一個結果）
範例如下：

{{ rawHtml + text + (number1+number2) }}
{{ number1+number2 }}
{{ text.split('').reverse().join('') }}
{{ ok ? 'Yes': 'No'}}

有個限制，每個綁定都只能包含單個表達式，所以下面的例子都不會生效。

<!-- 这是语句，不是表达式 -->
{{ var a = 1 }}

<!-- 流控制也不会生效，请使用三元表达式 -->
{{ if (ok) { return message } }}