Vue.js 學習之二：資料驅動開發

欄目介紹Vue.js學習之二的資料驅動開發。

在 Vue.js 框架中，與 HTML 頁面元素的互動方式沒有像原生 JavaScript 介面那麼直接，它是通過先在 HTML 元素標籤中嵌入一系列類似於普通標籤屬性的 Vue 指令屬性來繫結資料，然後再通過在 JavaScript 程式碼中修改這些被繫結的資料來修改頁面元素的顯示方式與內容。在程式設計方法上，我們通常將這種用資料內容的變化來驅動整個程式業務運作的方式稱之為"資料驅動開發"。這部分筆記將記錄如何利用資料驅動的開發方式來完成資料繫結、事件響應，以實現控制頁面元素與 CSS 樣式等各項基本功能。

資料繫結

在之前的01_sayHello程式中，我們現在<h1>標籤中使用模版語法系結了一個名稱為sayHello的資料，該模版語法實際上是v-text指令的語法糖。換句話說，該<h1>標籤更規範的語法應該是：

<h1 v-text="sayHello"></h1>

考慮到我們傳統上編寫 HTML 標籤的習慣，使用{{ data_name }}這樣的模版標記會是更讓人舒服的做法。當然了，v-text指令設定的是當前元素標籤下面的文字內容，如果要為標籤本身的屬性繫結資料，就得要使用v-bind指令，具體語法是在要設定的標籤屬性名前面加上v-bind:字首。例如，如果想為<img>標籤的src屬性繫結資料，就可以這樣做：

<img v-bind:src="vueLogo" style="width:200px">

另外，v-bind指令還有一個簡寫形式，只需要在要繫結資料的標籤屬性名之前加一個:字首即可。在之前的01_sayHello程式中，我採用的就是這種形式。在頁面元素上繫結了資料之後，接下來就可以在相對應的 JavaScript 指令碼中建立 Vue 範例了，這就是我之前在01_sayHello程式的main.js檔案中編寫的內容。這個 Vue 範例物件中至少要定義以下兩個成員：

el成員：該成員用於設定當前 Vue 範例所對應的元素容器，這通常是一個<p>元素，某些情況也可以是 HTML5 提供的<header>、<footer>等容器類標籤。該成員的值可以是任何一個符合 CSS 選擇器語法的字串，例如#ID、.CLASSNAME等。
data成員：該成員用於設定頁面元素中繫結的資料，它的值本身也是一個 JSON 格式的物件，該物件的每個成員都對應一個頁面元素中繫結的物件，例如在之前的01_sayHello程式中，我係結了sayHello和vueLogo這兩個資料，就必須要在 Vue 物件的data成員中為為它們設定相應的值。

事件處理

當然，01_sayHello程式目前只是一個單向顯示資料的業務。如果想要讓其具備互動能力，還需要為頁面元素繫結事件。在 Vue.js 框架中，繫結事件首先要通過v-on指令來為目標元素標籤註冊事件處理常式，例如如果我們想在01_sayHello程式用一個按鈕來控制<img>元素的顯示與否，可以將該程式的index.htm程式碼修改如下：

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script defer="defer" src="../node_modules/vue/dist/vue.js"></script>
    <script defer="defer" src="js/main.js"></script>
    <title>你好，Vue.js</title>
</head>
<body>
    <p id="app">
        <h1> {{ sayHello }} </h1>
        <!-- 上述模版語法背後真正的 Vue 語法：
        <h1 v-text="sayHello"></h1>
        -->
        <img :src="vueLogo" v-show="isShow" style="width:200px">
        <!-- 上述簡寫指令的完整 Vue 語法：
        <img v-bind:src="vueLogo" style="width:200px">
        -->
        <input type="button" :value="isShow?'隱藏':'顯示'" @click="toggleShow" />
        <!-- 上述簡寫指令的完整 Vue 語法：
        <input type="button" v-bind:value="isShow?'隱藏':'顯示'" v-on:click="toggleShow" />
        -->
    </p>
</body>
</html>

在這裡，我主要做了如下修改：

首先，在<img>標籤中增加了一個v-show指令，該指令可用於繫結一個布林型別的資料（即這裡的isShow），以此來決定是否顯示其所在的標籤。
然後，在頁面中新增了一個按鈕標籤，並用v-bind指令設定了該標籤的value屬性，該屬性的值是一個條件表示式，它將根據isShow的值顯示不同的文字。
最後，用v-on指令（@是該指令v-on:字首的簡寫形式）為新增的按鈕標籤註冊了一個名為toggleShow的單擊事件處理常式。

下面繼續來對main.js中的程式碼進行修改，具體如下：

const app = new Vue({
    el: '#app',
    data:{
        sayHello: '你好，Vue.js！',
        vueLogo: 'img/logo.png',
        isShow: true
    },
    methods:{
        toggleShow: function() {
            this.isShow = !this.isShow;
        }
    }
});

在這裡，我主要做了如下修改：

首先，在 Vue 物件的data成員中定義了之前繫結的布林型別資料isShow，並將其預設值設定為 true。
然後，為 Vue 物件新增了一個名為methods的成員。該成員用於設定頁面元素中註冊的事件處理常式，它的值也是一個 JSON 格式的物件。該物件的每個成員都對應一個已在頁面元素中用v-on指令註冊的事件處理常式。在這裡就是toggleShow，該函數每次呼叫都會將isShow的值取反。

這樣一來，當我們在 Web 瀏覽器中開啟該應用程式就會看到之前的 Vue 圖示旁邊多了個文字內容為隱藏的按鈕。當按鈕被單擊之後，圖示就會消失，按鈕上的文字也變成顯示。之後，如果該按鈕再次被單擊，一切又會恢復原狀。

使用者輸入

對於使用者來說，除了觸發事件之外，允許使用者在執行時輸入具體的資料也是一個應用程式必不可少的一項功能。下面將通過編寫一個"待辦事項"的程式來學習如何使用 Vue.js 框架實現能處理使用者輸入資料的應用程式介面。為此，我需要在code目錄下建立一個名為02_toDoList的目錄，並在該目錄中建立一個名為index.htm的檔案，其程式碼如下：

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script defer="defer" src="../node_modules/vue/dist/vue.js"></script>
    <script defer="defer" src="js/main.js"></script>
    <title>待辦事項</title>
</head>
<body>
    <p id="app">
        <h1>待辦事項</h1>
        <p id="todo">
            <ul>
                <li v-for="( task,index ) in taskList">
                    <input type="checkbox" v-model="doneList" :value="task">
                    <label :for="task">{{ task }}</label>
                    <input type="button" value="刪除" @click="remove(index)">
                </li>
            </ul>
        </p>
        <p id="done" v-if="doneList.length > 0">
            <h2>已完成事項</h2>
            <ul>
                <li v-for="task in doneList">
                    <label :for="task">{{ task }}</label>
                </li>
            </ul>
        </p>
        <input type="text" v-model="newTask" @keyup.enter="addNew">
        <input type="button" value="新增新任務" @click="addNew">
    </p>
</body>
</html>

接下來，我會在同一目錄下再建立一個名為js的目錄，並在該目錄下建立main.js指令碼檔案，其程式碼如下：

// 程式名稱： toDoList
// 實現目標：
//   1. 學習 v-model、v-for 等指令
//   2. 掌握如何處理使用者輸入

const app = new Vue({
    el: '#app',
    data:{
        newTask: '',
        taskList: [],
        doneList: []
    },
    methods:{
        addNew: function() {
                  if(this.newTask !== '') {
                      this.taskList.push(this.newTask);
                      this.newTask = '';
                  }
                },
        remove: function(index) {
                  if(index >=  0) {
                      this.taskList.splice(index,1);
                  }
                }
    }
});

下面來具體分析一下這個程式。在通常情況下，Web 應用程式在前端接受使用者輸入資訊的方式主要有兩種：第一種方式是用文字方塊元素來獲取使用者從鍵盤輸入的資訊。在 Vue.js 框架中，我們可以用v-model指令將<input type="text">標籤繫結到newTask資料中，該指令與v-bind指令不同的在於，它是一種雙向繫結。也就是說，v-model指令不止可以讓 JavaScript 程式碼中對繫結資料的修改反映到頁面元素中，也可以讓頁面元素獲取到的使用者輸入資料同步到 JavaScript 程式碼中。在 JavaScript 程式碼獲取到文字方塊中的使用者輸入內容之後，我們就可以通過事件處理常式addNew將其加入到一個名為taskList的資料列表中，然後將該事件處理常式註冊給輸入回車和滑鼠單擊事件。

第二種方式是用單選鈕、核取方塊等選擇性元素來獲取使用者用滑鼠勾選的資訊。例如在上面這個程式中，我在<p id="todo">元素中用v-for指令建立了一系列<input type="checkbox">，它們都提供v-model指令將自己雙向繫結到了另一個名為doneList資料列表上。在 Vue.js 框架中，如果一組核取方塊元素被v-model指令繫結到了一個列表型別的資料上，那麼當這些核取方塊被選上時，它們的value屬性值就會被自動新增到這個被繫結的資料列表中。

為了證明被選中的核取方塊被加入到了doneList資料列表中，我還在頁面中新增了一個<p id="done">元素，並對doneList資料列表進行了遍歷顯示。需要說明的是，用於遍歷資料列表的v-for指令主要有兩種形式：

當我們只要遍歷列表中的值時，可以這樣寫：v-for="item in dataList"，這時候資料列表（dataList）中的每一項資料就會在遍歷過程中逐一被迭代變數（item）說讀取。
當我們需要同時獲取列表值及其在列表中的索引時，可以這樣寫：v-for="( item,index ) in dataList"，這時候資料列表（dataList）在遍歷過程中，每一項資料的值會被item變數讀取，而每一項資料的索引會被index變數讀取。

最後需要說明的是，對於<p id="done">元素本身，我使用了v-if指令，它的效果與之前的v-show指令基本相同，唯一的區別是：v-if指令會直接在 DOM 樹上增加或刪除其所在的元素節點，而v-show指令則是單純通過其所在元素的style屬性隱藏或顯示該元素而已。在執行效率上，v-show指令要更高效一些。在這裡，我們設定了當doneList列表中沒有資料時，程式就直接將<p id="done">元素從頁面中移除，反之則在頁面中新增該元素。下面來看一下02_toDoList程式執行的效果：

更多相關免費學習：（視訊）

以上就是Vue.js 學習之二：資料驅動開發的詳細內容，更多請關注TW511.COM其它相關文章！