ReVue Day 2-2 模板語法
===

###### tags:`Vue`

[TOC]

## 動態渲染：基於 "Mustache" 模板和 Virtual DOM

[1:16:30]
- Vue 使用的模板是基於 html 語法，這就是為什麼他的學習曲線較低。
- 底層使用虛擬 DOM，來計算需要重新渲染哪些部分。
> 這就是為甚麼不要直接操作原生 DOM，會導致 Virtual DOM 計算錯誤。

### 模板語法 (Template Syntax)

用兩個花括弧 `{{ data }}`，將資料渲染進 DOM 系統

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

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})

> 動態更新畫面：
>
> 打开你的浏览器的 JavaScript 控制台，并修改 app.message 的值，你将看到上例相应地更新。

### 用 v-bind: 綁定元素 attribute

<div id="app-2">
  <span v-bind:title="message">
    鼠标悬停几秒钟查看此处动态绑定的提示信息！
  </span>
</div>

var app2 = new Vue({
  el: '#app-2',
  data: {
    message: '页面加载于 ' + new Date().toLocaleString()
  }
})

- v-bind attribute 被称为指令
- 前缀 v-，表示它是 Vue 提供的特殊 attribute
- 在这里的意思是：<br> “将这个元素节点的 title attribute 和 Vue 实例的 message property 保持一致”。

v-if 條件式
---

用 v-if 控制切换一个元素是否显示

<div id="app-3">
  <p v-if="seen">现在你看到我了</p>
</div>

var app3 = new Vue({
  el: '#app-3',
  data: {
    seen: true
  }
})


> 继续在控制台输入 app3.seen = false，你会发现之前显示的消息消失了。

> 此外，Vue 也提供一个强大的过渡效果系统，可以在 Vue 插入/更新/移除元素时自动应用过渡效果。
> https://cn.vuejs.org/v2/guide/transitions.html

v-for: 綁定 array 資料，渲染為 ”項目列表“
---

<div id="app-4">
  <ol>
    <li v-for="todo in todos">
      {{ todo.text }}
    </li>
  </ol>
</div>

var app4 = new Vue({
  el: '#app-4',
  data: {
    todos: [
      { text: '学习 JavaScript' },
      { text: '学习 Vue' },
      { text: '整个牛项目' }
    ]
  }
})


> 在控制台里，输入 app4.todos.push({ text: '新项目' })
>
> 你会发现列表最后添加了一个新项目。

v-on: “browser 事件监听器“

<div id="app-5">
  <p>{{ message }}</p>
  <button v-on:click="reverseMessage">反转消息</button>
</div>

var app5 = new Vue({
  el: '#app-5',
  data: {
    message: 'Hello Vue.js!'
  },
  methods: {
    reverseMessage: function () {
      this.message = this.message.split('').reverse().join('')
    }
  }
})


v-model：表單的雙向綁定
---

Vue 提供 v-model 語法，讓你輕鬆實現"表單 input" 和"元件狀態"之間的雙向綁定

<div id="app-6">
  <p>{{ message }}</p>
  <input v-model="message">
</div>

var app6 = new Vue({
  el: '#app-6',
  data: {
    message: 'Hello Vue!'
  }
})


### v-model 和 v-bind 不同之處？

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

    <h4>v-model</h4>
    <input v-model="message">

    <br>

    <h4>v-bind</h4>
    <input v-bind:value="message">
</div>

var app6 = new Vue({
  el: '#app-7',
  data: {
    message: 'Hello Vue!'
  }
})