Vue.js 學習之二：資料驅動開發-Vue.js-PHP中文網

資料綁定

事件處理

用户输入

首頁

web前端

Vue.js

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

coldplay.xixi

Oct 13, 2020 am 10:51 AM

vue.js

<p>Vue.js教學欄位介紹Vue.js學習之二的資料驅動開發。

<p>

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

資料綁定

<p>在先前的01_sayHello程式中，我們現在<h1>標籤中使用模版語法綁定了一個名稱為sayHello的數據，此模版語法其實是v-text指令的語法糖。換句話說，該<h1>標籤更規範的語法應該是：

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

登入後複製

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

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

登入後複製

<p>另外，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成員中為為它們設定對應的值。

事件處理

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




    
    
    
    
    
    你好，Vue.js


    
        <h1> {{ sayHello }}

登入後複製

<p>在這裡，我主要做瞭如下修改：

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

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

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

登入後複製

<p>在這裡，我主要做瞭如下修改：

首先，在 Vue 对象的data成员中定义了之前绑定的布尔类型数据isShow，并将其默认值设置为 true。
然后，为 Vue 对象新增了一个名为methods的成员。该成员用于设置页面元素中注册的事件处理函数，它的值也是一个 JSON 格式的对象。该对象的每个成员都对应一个已在页面元素中用v-on指令注册的事件处理函数。在这里就是toggleShow，该函数每次调用都会将isShow的值取反。

<p>这样一来，当我们在 Web 浏览器中打开该应用程序就会看到之前的 Vue 图标旁边多了个文本内容为隐藏的按钮。当按钮被单击之后，图标就会消失，按钮上的文本也变成显示。之后，如果该按钮再次被单击，一切又会恢复原状。

用户输入

<p>对于用户来说，除了触发事件之外，允许用户在运行时输入具体的数据也是一个应用程序必不可少的一项功能。下面将通过编写一个"待办事项"的程序来学习如何使用 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>

登入後複製

<p>接下来，我会在同一目录下再创建一个名为js的目录，并在该目录下创建main.js脚本文件，其代码如下：

// 程序名称： toDoList
// 实现目标：
//   1. 学习 v-model、v-for 等指令
//   2. 掌握如何处理用户输入

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

登入後複製

<p>下面来具体分析一下这个程序。在通常情况下，Web 应用程序在前端接受用户输入信息的方式主要有两种：第一种方式是用文本框元素来获取用户从键盘输入的信息。在 Vue.js 框架中，我们可以用v-model指令将<input type="text">标签绑定到newTask数据中，该指令与v-bind指令不同的在于，它是一种双向绑定。也就是说，v-model指令不止可以让 JavaScript 代码中对绑定数据的修改反映到页面元素中，也可以让页面元素获取到的用户输入数据同步到 JavaScript 代码中。在 JavaScript 代码获取到文本框中的用户输入内容之后，我们就可以通过事件处理函数addNew将其加入到一个名为taskList的数据列表中，然后将该事件处理函数注册给输入回车和鼠标单击事件。

<p>第二种方式是用单选钮、复选框等选择性元素来获取用户用鼠标勾选的信息。例如在上面这个程序中，我在<p id="todo">元素中用v-for指令创建了一系列<input type="checkbox">，它们都提供v-model指令将自己双向绑定到了另一个名为doneList数据列表上。在 Vue.js 框架中，如果一组复选框元素被v-model指令绑定到了一个列表类型的数据上，那么当这些复选框被选上时，它们的value属性值就会被自动添加到这个被绑定的数据列表中。

<p>为了证明被选中的复选框被加入到了doneList数据列表中，我还在页面中添加了一个<p id="done">元素，并对doneList数据列表进行了遍历显示。需要说明的是，用于遍历数据列表的v-for指令主要有两种形式：

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

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

<p>