模板語言 Vue template (官網說法 指令 Directives)

  1. v-text
  <span v-text="msg"></span>
  <span>{{msg}}</span>

兩種寫法都可以。

  1. v-html
  <div v-html="html"></div>

如果想要動態插入內容，使用innerHTML是拿不到實例中的data的喔。

  1. v-show
  <h1 v-show="show">Hello!</h1>

等於CSS裡的display。

  1. v-if, v-else-if, v-else
  <div v-if="type === 'A'">A</div>
  <div v-else-if="type === 'B'">B</div>
  <div v-else>Not A/B</div>

v-if 和 v-show 的差別是在條件不成立的情況下，v-if不會被渲染到網頁上，v-show則是單純看不到。

  1. v-for 
    <!-- Array -->
<li v-for="todo in todos" v-if="todo.isComplete">
  {{ todo }}
</li>

<div v-for="(todo, index) in todos">
  {{ index }}: {{ todo }}
</div>

<!-- Object -->
<div v-for="value in object">
  {{ value }}
</div>

<div v-for="(value, key) in object">
  {{ key }}: {{ value }}
</div>

<div v-for="(value, key, index) in object">
  {{ index }}. {{ key }}: {{ value }}
</div>

注意v-for的優先度比v-if高，所以放在同一層的話，可以有條件的印出內容。
<br/>

6. v-model 雙向綁定
  -   限制 只能用在
  1.  input
  2.  select
  3.  textarea
  4.  components
  -   修飾符
  1.  .lazy 監聽事件用blur取代預設的change
  2.  .trim 過濾頭尾空格
  3.  .number 輸入字符串轉為數字型別
<br/>

7. v-bind(**：**)
  {% raw %}
  標籤的屬性不能使用{{class}}，應使用v-bind
  {% endraw %}
  ```html
      <a :href="url" :title.prop="hint">link</a>
      <svg :view-box.camel="viewBox"></svg>
  ```
  -   修飾符
  1.  .prop 從綁定HTML元素的屬性(attribute)改成DOM的屬性(property)
  2.  .camel 將kebab-case命名法，轉換成camelCase命名法(駝峰式)，因vue-loader內建，就不用加這個修飾符
  3.  .sync 對prop做雙向綁定，子組件改變時，會更新到父組件
<br/>

8. v-on(**@**)
  ```html
  <input @keydown.enter="onEnter">
  <input @keydown.13="onEnter">
  ```
  -   修飾符
  1.  .stop = event.stopPropagation()，阻止JS預設的事件傳遞方向**向上冒泡(event bubbling)**
  2.  .prevent = event.preventDefault()，阻止HTML元素預設事件
  3.  .{keyCode | keyAlias}，如範例，可用keyCode或按鍵名做事件觸發
  4.  [.left, .middle, .right]，分別是滑鼠的左鍵、中鍵、右鍵觸發
  5.  .once，只能觸發一次
  6.  .self，只在有事件監聽的HTML元素本身觸發(不含子元素)
  7.  .capture，將JS預設的事件傳遞方向**向上冒泡(event bubbling)**改為**向下捕獲(event capturing)**
  8.  .passive，以{ passive : true }的模式增加事件監聽，意思是會無視preventDefault()，用來解決滾動和點擊事件的瞬間卡頓
  9.  .native，監聽組件根元素的原生事件
<br/>

9. v-pre
  ```html
      <span v-pre>{{ this will not be compiled }}</span>
  ```
  加上v-pre的部分，不會被編譯
<br/>

10. v-cloak
  ```html
      <div v-cloak>
          {{ message }}
      </div>
      <style>
      [v-cloak] {
          display: none;
      }
      </style>
  ```
  讓等待渲染資料的地方不顯示{{data}}，直到渲染為止。
<br/>

11. v-once
  ```html
      <span v-once>This will never change: {{msg}}</span>
  ```
  只渲染一次，用在父層會影響到子層。
<br/>

### 特例 
圖片不能用v-model綁定，必須使用v-on:change綁定。
```html
<div id="app">
<input type="file" @change='fileSelected'>
<img v-if="image" :src="image" width="300">
</div>
<script>
const vm = new Vue({
  el: "#app",
  data: {
      image: ''
  },
  methods: {
      imageLoaded(e){
          this.image = e.target.result;
      },
      fileSelected(e){
          const file = e.target.files.item(0);
          const reader = new FileReader();
          reader.addEventListener('load', this.imageLoaded);
          reader.readAsDataURL(file);
      }
  }
})
</script>

實作

簡單的做個 TodoList 吧！ CodePen連結