0%

[Vue] Vue.js 基礎概述 (上)

發表於 更新於 分類於 Disqus：

Vue.js 簡介

Vue.js 是一款流行的 JavaScript 前端框架，旨在更好地組織與簡化 Web 開發。Vue 所關注的核心是 MVC 模式中的視圖層（View），同時，它也能方便地取得資料更新，並通過組件內部特定的方法實現視圖（View）與模型（Model）的互動。

——維基百科

總結一下維基百科對 Vue 的介紹，Vue 作為一款 JavaScript 的框架，有兩個特點：

  1. 直觀語法：借鏡於 MVVM 模式，畫面與資料雙向綁定，所見即所得。
  2. 多樣化延伸工具：可用來開發 SPA（單頁應用程式） 及傳統多頁應用程式。

從建立應用程式開始

  • 宣告一個 Vue 實例：使用 new 關鍵字來宣告。一個網頁上可以放不只一個 Vue 實例，但不能在一個 Vue 實例中包另一個 Vue 實例（不可巢狀）。

    1
    2
    3
    4
    5
    6
    var app = new Vue({
      ...
    });
    var app2 = new Vue({
      ...
    });

  • 綁定 DOM：一個 Vue 實例生成後必須綁定一個 HTML 元素，所以要綁定的 HTML 元素應該要設有 id。Vue 綁定 DOM 的方法是在剛剛宣告的 Vue 實例中放入 el: '元素 id'。

    1
    2
    3
    4
    5
    6
    // HTML
    <div id="app"> ... </div>
    // JS
    var app = new Vue({
      el: '#app', // HTML id
    });

  • 把資料呈現在畫面上：在 Vue 實例中繼續放入資料，資料內容是以物件形式寫入。而要把資料內容呈現在畫面上，則要在綁定的 HTML 元素中，放入兩對大括號（雙花括號），雙花括號中間包著資料的特性名稱。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    // HTML
    <div id="app">
      <p> {{ text }} </p>
    </div>
    // JS
    var app = new Vue({
      el: '#app',
      data: {
        text: '這裡是一段文字',
      },
    });

  • 關於綁定：除了用 id 綁定以外，也可以在 HTML 元素設定 class 來綁定（el 的值也要由 # 改成 .）。但是如果同時有數個同樣 class 名稱的元素，Vue 只能帶資料到同 class 名稱的第一個元素上。所以大部份都還是用 id 綁定。

基本指令

v-model — 從網頁上更動 JS 資料

上一段提到 Model 能夠從網頁上直接更改的方式，就是在輸入資料的 HTML 元素上，加上 v-model 這個屬性。

v-text — 雙花括號以外的資料綁定法

v-text 相當於 .textContent，上面都是用雙花括號包住資料的特性名稱來將 Model 渲染到網頁上，除了這個方法以外，也可以在要塞入 Model 的 HTML 元素上，加上 v-text 屬性來連接 Model 內容。

1
<div v-text="message"></div>

v-html — 傳入 HTML 標籤

v-html 相當於 .innerHTML，如果想渲染到網頁上的 Model 含有 HTML 標籤，就要在要插入資料的元素上使用 v-html 屬性並與 Model 綁定，畫面上才會正確解讀 HTML 格式。同樣的內容用雙花括號跟 v-text 顯示出來的會是一串字串，而沒辦法正確渲染出 HTML 格式。

v-bind — 以參數更新 HTML 屬性

雙花括號中填入資料特性名稱的方法，並不適用於 HTML 屬性，因此我們應該把 v-bind: 加在 HTML 屬性前面，且在屬性對應的值中放置參數（資料特性名稱），並在 Model 中定義要傳入的值。v-bind 的縮寫是去掉 v-bind、只留下一個冒號 :。

1
2
3
4
5
6
7
8
9
10
11
12
// HTML
<div id="app">
  <img v-bind:src="imgSrc" v-bind:class="className" alt="">
</div>
// JS
var app = new Vue({
  el: '#app',
  data: {
    imgSrc: '圖片位址',
    className: 'img-fluid'
  }
});

v-model vs v-bind

v-bind 是將狀態綁定到 HTML 元素上，而 v-model 是接收資料，所以基本上 v-model 只會用在 <input>、<textarea>、<select> 這些傳入資訊的元素。

v-for — 呈現資料列表

原生 JavaScript 疊代的方式依照型別的不同可以分成 for 迴圈、forEach()、for…in，而使用 Vue 的話全部都可以用 v-for 來疊代。

例如，在 JavaScript 中需要透過迴圈並用串字串方式來新增多個同樣內容的 <li>，在 Vue 只要把 v-for 放在一個 <li> 上就有同樣的結果。

下面的程式碼中， item 是一個參數（你也可以為它取別的名字）並用來指涉需要被疊代的陣列元素，list 指的是自定義的陣列名稱（陣列元素為數個物件）， in 也可以寫成 of，因為這樣更接近原生 JavaScript 疊代器的語法。

在 <li> 上使用 v-for 並綁定要呈現的 data 資料，接著在 <li> </li> 之間寫入要呈現的資料，雙花括號包起來的是 item.資料特性。

v-for 還支援第二個參數 — — 索引值（index），帶入索引值參數的方法是在原本 item 的位置改寫成 (item, index) 即可。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
// HTML
<div id="app">
  <ul>
    <li v-for="item in list">
      {{ item.name }} 今年 {{item.age}} 歲
    </li>
  </ul>
</div>
// JS
var app = new Vue({
  el: '#app',
  data: {
    list: [
      {
        name: '小明',
        age: 16
      },
      {
        name: '媽媽',
        age: 38
      },
      {
        name: '漂亮阿姨',
        age: 24
      }
    ]
  }
});

v-if — 擷取部分資訊

相當於判斷式的功能。跟 v-for 搭配使用時，可以依所設的條件渲染出部分的資料，也就是說只有資料符合條件時，該資料才會渲染出來，如果不符合條件，就不顯示。

使用方法是在已經用了 v-for 的 HTML 元素上多加上 v-if="條件" ，條件一般是以陣列元素的參數去設計的。

1
2
3
4
5
6
7
8
// HTML
<div id="app">
  <ul>
    <li v-for="item in list" v-if="item.age > 20">
      {{ item.name }} 今年 {{item.age}} 歲
    </li>
  </ul>
</div>

礙於篇幅，還有一些基礎指令沒寫出來，挪到下一篇再介紹 😃