Vue.js 學習筆記之二：數據驅動開發

時間 2020-10-01

標籤 vue.js vue 學習筆記之二數據驅動開發欄目 JavaScript 简体版

原文原文鏈接

在 Vue.js 框架中，與 HTML 頁面元素的交互方式沒有像原生 JavaScript 接口那麼直接，它是經過先在 HTML 元素標籤中嵌入一系列相似於普通標籤屬性的 Vue 指令屬性來綁定數據，而後再經過在 JavaScript 代碼中修改這些被綁定的數據來修改頁面元素的顯示方式與內容。在編程方法上，咱們一般將這種用數據內容的變化來驅動整個程序業務運做的方式稱之爲"數據驅動開發"。這部分筆記將記錄如何利用數據驅動的開發方式來完成數據綁定、事件響應，以實現控制頁面元素與 CSS 樣式等各項基本功能。html

數據綁定

在以前的01_sayHello程序中，咱們如今<h1>標籤中使用模版語法綁定了一個名稱爲sayHello的數據，該模版語法其實是v-text指令的語法糖。換句話說，該<h1>標籤更規範的語法應該是：前端

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

考慮到咱們傳統上編寫 HTML 標籤的習慣，使用{{ data_name }}這樣的模版標記會是更讓人舒服的作法。固然了，v-text指令設置的是當前元素標籤下面的文本內容，若是要爲標籤自己的屬性綁定數據，就得要使用v-bind指令，具體語法是在要設置的標籤屬性名前面加上v-bind:前綴。例如，若是想爲<img>標籤的src屬性綁定數據，就能夠這樣作：vue

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

另外，v-bind指令還有一個簡寫形式，只須要在要綁定數據的標籤屬性名以前加一個:前綴便可。在以前的01_sayHello程序中，我採用的就是這種形式。在頁面元素上綁定了數據以後，接下來就能夠在相對應的 JavaScript 腳本中建立 Vue 實例了，這就是我以前在01_sayHello程序的main.js文件中編寫的內容。這個 Vue 實例對象中至少要定義如下兩個成員：node

el成員：該成員用於設置當前 Vue 實例所對應的元素容器，這一般是一個<div>元素，某些狀況也能夠是 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>
    <div 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" />
        -->
    </div>
</body>
</html>

在這裏，我主要作了以下修改：瀏覽器

首先，在<img>標籤中增長了一個v-show指令，該指令可用於綁定一個布爾類型的數據（即這裏的isShow），以此來決定是否顯示其所在的標籤。
而後，在頁面中新增了一個按鈕標籤，並用v-bind指令設置了該標籤的value屬性，該屬性的值是一個條件表達式，它將根據isShow的值顯示不一樣的文本。
最後，用v-on指令（@是該指令v-on:前綴的簡寫形式）爲新增的按鈕標籤註冊了一個名爲toggleShow的單擊事件處理函數。

下面繼續來對main.js中的代碼進行修改，具體以下：app

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>
    <div id="app">
        <h1>待辦事項</h1>
        <div 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>
        </div>
        <div id="done" v-if="doneList.length > 0">
            <h2>已完成事項</h2>
            <ul>
                <li v-for="task in doneList">
                    <label :for="task">{{ task }}</label>
                </li>
            </ul>
        </div>
        <input type="text" v-model="newTask" @keyup.enter="addNew">
        <input type="button" value="添加新任務" @click="addNew">
    </div>
</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的數據列表中，而後將該事件處理函數註冊給輸入回車和鼠標單擊事件。

第二種方式是用單選鈕、複選框等選擇性元素來獲取用戶用鼠標勾選的信息。例如在上面這個程序中，我在<div id="todo">元素中用v-for指令建立了一系列<input type="checkbox">，它們都提供v-model指令將本身雙向綁定到了另外一個名爲doneList數據列表上。在 Vue.js 框架中，若是一組複選框元素被v-model指令綁定到了一個列表類型的數據上，那麼當這些複選框被選上時，它們的value屬性值就會被自動添加到這個被綁定的數據列表中。

爲了證實被選中的複選框被加入到了doneList數據列表中，我還在頁面中添加了一個<div id="done">元素，並對doneList數據列表進行了遍歷顯示。須要說明的是，用於遍歷數據列表的v-for指令主要有兩種形式：

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

最後須要說明的是，對於<div id="done">元素自己，我使用了v-if指令，它的效果與以前的v-show指令基本相同，惟一的區別是：v-if指令會直接在 DOM 樹上增長或刪除其所在的元素節點，而v-show指令則是單純經過其所在元素的style屬性隱藏或顯示該元素而已。在執行效率上，v-show指令要更高效一些。在這裏，咱們設置了當doneList列表中沒有數據時，程序就直接將<div id="done">元素從頁面中移除，反之則在頁面中添加該元素。下面來看一下02_toDoList程序運行的效果：