2020-02-21

前端學習筆記

Vue Template_Syntax - basic

模板語法-基礎篇

插值

文本

使用鬍子插值，HTML 的鬍子標籤(雙大括號)內會被填入 data 裡相對應的值。

<div id="app">
  <p>{{ message }}</p>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    message: 'Hello World!'
  }
})

運行結果：Hello World!

HTML

如果打算插入 HTML 而不是純文本，不能使用鬍子

<div id="app">
    <div>{{ message }}</div>
</div>
	
<script>
new Vue({
  el: '#app',
  data: {
    message: '<span style="color:red">Hello World!</span>'
  }
})
</script>

運行結果會是這樣：<span style=”color:red”>Hello World!</span>

鬍子標籤無法讀取 HTML，要讀取 HTML 只能使用 v-html

<div id="app">
    <div v-html="message"></div>
</div>
	
<script>
new Vue({
  el: '#app',
  data: {
    message: '<span style="color:red">Hello World!</span>'
  }
})
</script>

運行結果：Hello World!

※ 注意 Hello World! 此時已經是 <span> 而不是 <div> 了

屬性

鬍子語法同樣不能作用在 HTML attribute 上，要在 HTML 屬性裡插入資料，必須使用 v-bind 語法

<div id="app">
  <input v-bind:placeholder='vbind'>
</div>
    
<script>
new Vue({
    el: '#app',
  data:{
      vbind: '請輸入文字'
  }
});
</script>

運行結果：

MDN-HTML attribute reference

表達式

鬍子內還可以放 javascript 表達式

<div id="app">
    {{ number + 1 }}<br>
    {{ prize ? '中獎！' : '沒中' }}<br>
    {{ message.split('').reverse().join('') }}
</div>
	
<script>
new Vue({
  el: '#app',
  data: {
    prize: true,
    message: '！dlroW olleH',
    number: 8
  }
})
</script>

運行結果：
9
中獎！
Hello World！

指令

帶有 v- 前綴的特殊 attribute。
attribute 的預期值是單個 JavaScript 表達式 (v-for 例外)。
當表達式的值改變時，指令會將改變的值響應式地作用於 DOM。

參數

部分指令能夠接收參數，參數位置放在指令後並以冒號連接。

1 2	<!-- 響應式更新 HTML attribute --> <a v-bind:herf="url">...</a>

1 2	<!-- 監聽 DOM 事件 --> <button v-on:click="fn">...</button>

動態參數

參數能夠以 javascript 表達式動態求值

1	<a v-bind:[attributeName]="url">...</a>

1	<button v-on:[eventName]="doSomething">...</button>

值的限制

動態參數所求的值必須要是字串，特殊情況下值為 null，並且可以依據 null 狀態來解除綁定，除此之外其他任何型態的值都會觸發警告。

表達式的限制

空格與引號在動態參數內是無效的，請使用模板字串或是計算屬性代替。

<!-- 無效寫法 -->
<div :[key + 'foo']="value"></div>

<!-- 正確寫法 -->
<div :[`${key}foo`]="value"></div>

<div id="app">
  <div :[idorclass()]="'test'">Testing</div>
</div>

<script>
  var app = new Vue({
    el: "#app",
    methods: {
      idorclass() {
        // Just a "random" behavior
        return new Date().getTime() % 2 == 0 ? "id" : "class";
      }
    }
  });
</script>

// source: https://openbox.pt/vuejs/vue-js-2-6-dynamic-directive-arguments/

瀏覽器會自動把 HTML attribute 轉成小寫，所以在實體的 property(屬性名稱) 內記得必須使用小寫，否則程式碼不會生效。

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

new Vue({
  el: '#app',
  data: {
    attributename: 'href',  // lowercase
    url: 'http://vuejs.org',
    } 
  }
});

縮寫

v-bind 與 v-on 作為最常用的兩個指令，擁有自己的縮寫。

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

<!-- 完整語法 -->
<button v-on:click="fn">...</button>
<!-- 縮寫 -->
<button @click="fn">...</button>

# Vue, w3HexSchool