站長資訊網(wǎng)Vue.js教程欄目介紹Vue.js學(xué)習(xí)之二的數(shù)據(jù)驅(qū)動開發(fā) 。
在 Vue.js 框架中，與 HTML 頁面元素的交互方式?jīng)]有像原生 JavaScript 接口那么直接，它是通過先在 HTML 元素標(biāo)簽中嵌入一系列類似于普通標(biāo)簽屬性的 Vue 指令屬性來綁定數(shù)據(jù)，然后再通過在 JavaScript 代碼中修改這些被綁定的數(shù)據(jù)來修改頁面元素的顯示方式與內(nèi)容。在編程方法上，我們通常將這種用數(shù)據(jù)內(nèi)容的變化來驅(qū)動整個程序業(yè)務(wù)運作的方式稱之為"數(shù)據(jù)驅(qū)動開發(fā)"。這部分筆記將記錄如何利用數(shù)據(jù)驅(qū)動的開發(fā)方式來完成數(shù)據(jù)綁定、事件響應(yīng)，以實現(xiàn)控制頁面元素與 CSS 樣式等各項基本功能。
數(shù)據(jù)綁定
在之前的01_sayHello程序中，我們現(xiàn)在<h1>標(biāo)簽中使用模版語法綁定了一個名稱為sayHello的數(shù)據(jù)，該模版語法實際上是v-text指令的語法糖。換句話說，該<h1>標(biāo)簽更規(guī)范的語法應(yīng)該是：
<h1 v-text="sayHello"></h1>
考慮到我們傳統(tǒng)上編寫 HTML 標(biāo)簽的習(xí)慣，使用{{ data_name }}這樣的模版標(biāo)記會是更讓人舒服的做法。當(dāng)然了，v-text指令設(shè)置的是當(dāng)前元素標(biāo)簽下面的文本內(nèi)容，如果要為標(biāo)簽本身的屬性綁定數(shù)據(jù)，就得要使用v-bind指令，具體語法是在要設(shè)置的標(biāo)簽屬性名前面加上v-bind:前綴。例如，如果想為<img>標(biāo)簽的src屬性綁定數(shù)據(jù)，就可以這樣做：
<img v-bind:src="vueLogo" style="width:200px">
另外，v-bind指令還有一個簡寫形式，只需要在要綁定數(shù)據(jù)的標(biāo)簽屬性名之前加一個:前綴即可。在之前的01_sayHello程序中，我采用的就是這種形式。在頁面元素上綁定了數(shù)據(jù)之后，接下來就可以在相對應(yīng)的 JavaScript 腳本中創(chuàng)建 Vue 實例了，這就是我之前在01_sayHello程序的main.js文件中編寫的內(nèi)容。這個 Vue 實例對象中至少要定義以下兩個成員：
el成員：該成員用于設(shè)置當(dāng)前 Vue 實例所對應(yīng)的元素容器，這通常是一個<p>元素，某些情況也可以是 HTML5 提供的<header>、<footer>等容器類標(biāo)簽。該成員的值可以是任何一個符合 CSS 選擇器語法的字符串，例如#ID、.CLASSNAME等。data成員：該成員用于設(shè)置頁面元素中綁定的數(shù)據(jù)，它的值本身也是一個 JSON 格式的對象，該對象的每個成員都對應(yīng)一個頁面元素中綁定的對象，例如在之前的01_sayHello程序中，我綁定了sayHello和vueLogo這兩個數(shù)據(jù)，就必須要在 Vue 對象的data成員中為為它們設(shè)置相應(yīng)的值。
事件處理
當(dāng)然，01_sayHello程序目前只是一個單向顯示數(shù)據(jù)的業(yè)務(wù)。如果想要讓其具備交互能力，還需要為頁面元素綁定事件。在 Vue.js 框架中，綁定事件首先要通過v-on指令來為目標(biāo)元素標(biāo)簽注冊事件處理函數(shù)，例如如果我們想在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>標(biāo)簽中增加了一個v-show指令，該指令可用于綁定一個布爾類型的數(shù)據(jù)（即這里的isShow），以此來決定是否顯示其所在的標(biāo)簽。 - 然后，在頁面中新增了一個按鈕標(biāo)簽，并用
v-bind指令設(shè)置了該標(biāo)簽的value屬性，該屬性的值是一個條件表達式，它將根據(jù)isShow的值顯示不同的文本。 - 最后，用
v-on指令（@是該指令v-on:前綴的簡寫形式）為新增的按鈕標(biāo)簽注冊了一個名為toggleShow的單擊事件處理函數(shù)。
下面繼續(xù)來對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成員中定義了之前綁定的布爾類型數(shù)據(jù)isShow，并將其默認(rèn)值設(shè)置為 true。 - 然后，為 Vue 對象新增了一個名為
methods的成員。該成員用于設(shè)置頁面元素中注冊的事件處理函數(shù)，它的值也是一個 JSON 格式的對象。該對象的每個成員都對應(yīng)一個已在頁面元素中用v-on指令注冊的事件處理函數(shù)。在這里就是toggleShow，該函數(shù)每次調(diào)用都會將isShow的值取反。
這樣一來，當(dāng)我們在 Web 瀏覽器中打開該應(yīng)用程序就會看到之前的 Vue 圖標(biāo)旁邊多了個文本內(nèi)容為隱藏的按鈕。當(dāng)按鈕被單擊之后，圖標(biāo)就會消失，按鈕上的文本也變成顯示。之后，如果該按鈕再次被單擊，一切又會恢復(fù)原狀。
用戶輸入
對于用戶來說，除了觸發(fā)事件之外，允許用戶在運行時輸入具體的數(shù)據(jù)也是一個應(yīng)用程序必不可少的一項功能。下面將通過編寫一個"待辦事項"的程序來學(xué)習(xí)如何使用 Vue.js 框架實現(xiàn)能處理用戶輸入數(shù)據(jù)的應(yīng)用程序界面。為此，我需要在code目錄下創(chuàng)建一個名為02_toDoList的目錄，并在該目錄中創(chuàng)建一個名為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="添加新任務(wù)" @click="addNew"> </p> </body> </html>
接下來，我會在同一目錄下再創(chuàng)建一個名為js的目錄，并在該目錄下創(chuàng)建main.js腳本文件，其代碼如下：
// 程序名稱： toDoList // 實現(xiàn)目標(biāo)： // 1. 學(xué)習(xí) 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 應(yīng)用程序在前端接受用戶輸入信息的方式主要有兩種：第一種方式是用文本框元素來獲取用戶從鍵盤輸入的信息。在 Vue.js 框架中，我們可以用v-model指令將<input type="text">標(biāo)簽綁定到newTask數(shù)據(jù)中，該指令與v-bind指令不同的在于，它是一種雙向綁定。也就是說，v-model指令不止可以讓 JavaScript 代碼中對綁定數(shù)據(jù)的修改反映到頁面元素中，也可以讓頁面元素獲取到的用戶輸入數(shù)據(jù)同步到 JavaScript 代碼中。在 JavaScript 代碼獲取到文本框中的用戶輸入內(nèi)容之后，我們就可以通過事件處理函數(shù)addNew將其加入到一個名為taskList的數(shù)據(jù)列表中，然后將該事件處理函數(shù)注冊給輸入回車和鼠標(biāo)單擊事件。
第二種方式是用單選鈕、復(fù)選框等選擇性元素來獲取用戶用鼠標(biāo)勾選的信息。例如在上面這個程序中，我在<p id="todo">元素中用v-for指令創(chuàng)建了一系列<input type="checkbox">，它們都提供v-model指令將自己雙向綁定到了另一個名為doneList數(shù)據(jù)列表上。在 Vue.js 框架中，如果一組復(fù)選框元素被v-model指令綁定到了一個列表類型的數(shù)據(jù)上，那么當(dāng)這些復(fù)選框被選上時，它們的value屬性值就會被自動添加到這個被綁定的數(shù)據(jù)列表中。
為了證明被選中的復(fù)選框被加入到了doneList數(shù)據(jù)列表中，我還在頁面中添加了一個<p id="done">元素，并對doneList數(shù)據(jù)列表進行了遍歷顯示。需要說明的是，用于遍歷數(shù)據(jù)列表的v-for指令主要有兩種形式：
- 當(dāng)我們只要遍歷列表中的值時，可以這樣寫：
v-for="item in dataList"，這時候數(shù)據(jù)列表（dataList）中的每一項數(shù)據(jù)就會在遍歷過程中逐一被迭代變量（item）說讀取。 - 當(dāng)我們需要同時獲取列表值及其在列表中的索引時，可以這樣寫：
v-for="( item,index ) in dataList"，這時候數(shù)據(jù)列表（dataList）在遍歷過程中，每一項數(shù)據(jù)的值會被item變量讀取，而每一項數(shù)據(jù)的索引會被index變量讀取。
最后需要說明的是，對于<p id="done">元素本身，我使用了v-if指令，它的效果與之前的v-show指令基本相同，唯一的區(qū)別是：v-if指令會直接在 DOM 樹上增加或刪除其所在的元素節(jié)點，而v-show指令則是單純通過其所在元素的style屬性隱藏或顯示該元素而已。在執(zhí)行效率上，v-show指令要更高效一些。在這里，我們設(shè)置了當(dāng)doneList列表中沒有數(shù)據(jù)時，程序就直接將<p id="done">元素從頁面中移除，反之則在頁面中添加該元素。下面來看一下02_toDoList程序運行的效果：
