0%

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

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>

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