鐵人賽倒數兩天了，今天我們來看一下 Vue.js

參考來源是 Vue.js 的官網

Vue.js 是一套構建使用者介面的漸進式的 JavaScript 框架。

Get started

直接從官網中， guide 中來看說明。

1. Declarative Rendering 宣告式渲染

2. Conditionals and Loops 條件和迴圈

3. Handling User Input 處理使用者輸入

4. Composing with Components 元件的組成

Installation

可以直接在 script 內加上

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

Declarative Rendering 宣告式渲染

HTML

Vue 可以直接在 HTML 內宣告模板

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

JS

用 JS 在 data 內填入內容，這樣就可以寫入 HTML 內。

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

除了可以在 HTMl 內寫入內容外， Vue 也可以做到綁定元素的 attribute。

下面這個用法，和助教討論的時候，覺得很有意思，以前 JavaScript 要寫很多行 code 要綁來綁去，沒想到在 Vue 短短幾行就辦到了。

因為 Vue 是雙向的，當我們綁定的 message 變數內容改變的時候，HTML 也會相應的改變。

HTML

<div id="app-2">
  <span v-bind:title="message">
  </span>
</div>

JS

var app2 = new Vue({
  el: '#app-2',
  data: {
    message: 'You loaded this page on ' + new Date().toLocaleString()
  }
})

Conditionals and Loops 條件和迴圈

條件判斷 v-if

可以用 v-if 來決定是否顯示， true 是顯示，反之就不顯示，寫到這裡，我已經被 Vue 吸引住了，也太方便！

HTML

<div id="app-3">
  <p v-if="seen">Now you see me</p>
</div>

JS

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

迴圈 v-for

v-for 可以把 array 的 object 塞到 todo.text 內。

這個方法的 array 也可以是其他的資料型態，
例如：字串、數字...

HTML

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

JS

var app4 = new Vue({
  el: '#app-4',
  data: {
    todos: [
      { text: 'Learn JavaScript' },
      { text: 'Learn Vue' },
      { text: 'Build something awesome' }
    ]
  }
})

output

1. Learn JavaScript
2. Learn Vue
3. Build something awesome

明天見