Vue.js教學欄位介紹Vue.js學習之二的資料驅動開發 。
在Vue.js 框架中,與HTML 頁面元素的互動方式沒有像原生JavaScript 介面那麼直接,它是透過先在HTML 元素標籤中嵌入一系列類似於普通標籤屬性的Vue 指令屬性來綁定數據,然後再透過在JavaScript 程式碼中修改這些被綁定的數據來修改頁面元素的顯示方式與內容。在程式方法上,我們通常將這種以資料內容的變化來驅動整個程式業務運作的方式稱之為"資料驅動開發"。這部分筆記將記錄如何利用資料驅動的開發方式來完成資料綁定、事件回應,以實現控制頁面元素與 CSS 樣式等各項基本功能。
在先前的01_sayHello
程式中,我們現在4a249f0d628e2318394fd9b75b4636b1
標籤中使用模版語法綁定了一個名稱為sayHello
的數據,此模版語法其實是v-text
指令的語法糖。換句話說,該4a249f0d628e2318394fd9b75b4636b1
標籤更規範的語法應該是:
<h1 v-text="sayHello"></h1>
考慮到我們傳統上編寫HTML 標籤的習慣,使用{{ data_name }}
這樣的模版標記會是更讓人舒服的做法。當然了,v-text
指令設定的是目前元素標籤下面的文字內容,如果要為標籤本身的屬性綁定數據,就得要使用v-bind
指令,具體語法是在要設定的標籤屬性名稱前面加上v-bind:
前綴。例如,如果想為a1f02c36ba31691bcfe87b2722de723b
標籤的src
屬性綁定數據,就可以這樣做:
<img v-bind:src="vueLogo" style="width:200px">
另外,v-bind
指令還有一個簡寫形式,只需要在要綁定資料的標籤屬性名之前加上一個:
前綴即可。在之前的01_sayHello
程式中,我採用的就是這種形式。在頁面元素上綁定了資料之後,接下來就可以在相對應的JavaScript 腳本中建立Vue 實例了,這就是我之前在01_sayHello
程式的main.js
文件中編寫的內容。這個Vue 實例物件中至少要定義以下兩個成員:
el
成員:該成員用於設定目前Vue 實例所對應的元素容器,這通常是一個e388a4556c0f65e1904146cc1a846bee
元素,某些情況也可以是HTML5 提供的1aa9e5d373740b65a0cc8f0a02150c53
、c37f8231a37e88427e62669260f0074d
等容器類標籤。該成員的值可以是任何一個符合 CSS 選擇器語法的字串,例如#ID
、.CLASSNAME
等。 data
成員:該成員用於設定頁面元素中綁定的數據,它的值本身也是一個JSON 格式的對象,該對象的每個成員都對應一個頁面元素中綁定的對象,例如在先前的01_sayHello
程式中,我綁定了sayHello
和vueLogo
這兩個數據,就必須要在Vue 物件的data
成員中為為它們設定對應的值。 當然,01_sayHello
程式目前只是一個單向顯示資料的業務。如果想要讓其具備互動能力,還需要為頁面元素綁定事件。在Vue.js 框架中,綁定事件首先要透過v-on
指令來為目標元素標籤註冊事件處理函數,例如如果我們想在01_sayHello
程式用一個按鈕來控制a1f02c36ba31691bcfe87b2722de723b
元素的顯示與否,可以將該程式的index.htm
程式碼修改如下:
你好,Vue.js
{{ sayHello }}
在這裡,我主要做瞭如下修改:
a1f02c36ba31691bcfe87b2722de723b
標籤中增加了一個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; } } });
在這裡,我主要做瞭如下修改:
data
成员中定义了之前绑定的布尔类型数据isShow
,并将其默认值设置为 true。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
指令将e67338802192d7bd5294b2aa965c9bc5
标签绑定到newTask
数据中,该指令与v-bind
指令不同的在于,它是一种双向绑定。也就是说,v-model
指令不止可以让 JavaScript 代码中对绑定数据的修改反映到页面元素中,也可以让页面元素获取到的用户输入数据同步到 JavaScript 代码中。在 JavaScript 代码获取到文本框中的用户输入内容之后,我们就可以通过事件处理函数addNew
将其加入到一个名为taskList
的数据列表中,然后将该事件处理函数注册给输入回车和鼠标单击事件。
第二种方式是用单选钮、复选框等选择性元素来获取用户用鼠标勾选的信息。例如在上面这个程序中,我在5ab0e995a190de047e013a6966610e55
元素中用v-for
指令创建了一系列514d05be645eb7d51e331036aaf6fa36
,它们都提供v-model
指令将自己双向绑定到了另一个名为doneList
数据列表上。在 Vue.js 框架中,如果一组复选框元素被v-model
指令绑定到了一个列表类型的数据上,那么当这些复选框被选上时,它们的value
属性值就会被自动添加到这个被绑定的数据列表中。
为了证明被选中的复选框被加入到了doneList
数据列表中,我还在页面中添加了一个e65cf9c0646c5567cdbd377fa7d191fd
元素,并对doneList
数据列表进行了遍历显示。需要说明的是,用于遍历数据列表的v-for
指令主要有两种形式:
v-for="item in dataList"
,這時候資料列表( dataList
)中的每一項資料就會在遍歷過程中逐一被迭代變數(item
)說讀取。 v-for="( item,index ) in dataList"
,這時候資料列表(dataList
)在遍歷過程中,每一項資料的值會被item
變數讀取,而每個資料的索引會被index
變數讀取。 最後要說明的是,對於9359e0ff49de62abac442c8fefd08430
元素本身,我使用了v-if
指令,它的效果與先前的v-show
指令基本上相同,唯一的差異在於:v-if
指令會直接在DOM 樹上增加或刪除其所在的元素節點,而v-show
指令則是單純透過其所在元素的style
屬性隱藏或顯示該元素而已。在執行效率上,v-show
指令要更有效率一些。在這裡,我們設定了當doneList
清單中沒有資料時,程式就直接將9359e0ff49de62abac442c8fefd08430
元素從頁面中移除,反之則在頁面中新增該元素。下面來看看02_toDoList
程式運行的效果:
# ##javascript#########(影片)##########
以上是Vue.js 學習之二:資料驅動開發的詳細內容。更多資訊請關注PHP中文網其他相關文章!