2. 程式人生 > >Vue.js 學習筆記之二：資料驅動開發

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

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

`標籤中使用模版語法綁定了一個名稱為`sayHello`的資料，該模版語法實際上是`v-text`指令的語法糖。換句話說，該`

`標籤更規範的語法應該是： ```HTML

``` 考慮到我們傳統上編寫 HTML 標籤的習慣，使用`{{ data_name }}`這樣的模版標記會是更讓人舒服的做法。當然了，`v-text`指令設定的是當前元素標籤下面的文字內容，如果要為標籤本身的屬性繫結資料，就得要使用`v-bind`指令，具體語法是在要設定的標籤屬性名前面加上`v-bind:`字首。例如，如果想為``標籤的`src`屬性繫結資料，就可以這樣做： ```HTML ``` 另外，`v-bind`指令還有一個簡寫形式，只需要在要繫結資料的標籤屬性名之前加一個`:`字首即可。在之前的`01_sayHello`程式中，我採用的就是這種形式。在頁面元素上綁定了資料之後，接下來就可以在相對應的 JavaScript 指令碼中建立 Vue 例項了，這就是我之前在`01_sayHello`程式的`main.js`檔案中編寫的內容。這個 Vue 例項物件中至少要定義以下兩個成員： - **`el`成員**：該成員用於設定當前 Vue 例項所對應的元素容器，這通常是一個``元素，某些情況也可以是 HTML5 提供的`
`、`
`等容器類標籤。該成員的值可以是任何一個符合 CSS 選擇器語法的字串，例如`#ID`、`.CLASSNAME`等。 - **`data`成員**：該成員用於設定頁面元素中繫結的資料，它的值本身也是一個 JSON 格式的物件，該物件的每個成員都對應一個頁面元素中繫結的物件，例如在之前的`01_sayHello`程式中，我綁定了`sayHello`和`vueLogo`這兩個資料，就必須要在 Vue 物件的`data`成員中為為它們設定相應的值。 ### 事件處理 當然，`01_sayHello`程式目前只是一個單向顯示資料的業務。如果想要讓其具備互動能力，還需要為頁面元素繫結事件。在 Vue.js 框架中，繫結事件首先要通過`v-on`指令來為目標元素標籤註冊事件處理函式，例如如果我們想在`01_sayHello`程式用一個按鈕來控制``元素的顯示與否，可以將該程式的`index.htm`程式碼修改如下： ```HTML

{{ sayHello }}

``` 在這裡，我主要做了如下修改： - 首先，在``標籤中增加了一個`v-show`指令，該指令可用於繫結一個布林型別的資料（即這裡的`isShow`），以此來決定是否顯示其所在的標籤。 - 然後，在頁面中新增了一個按鈕標籤，並用`v-bind`指令設定了該標籤的`value`屬性，該屬性的值是一個條件表示式，它將根據`isShow`的值顯示不同的文字。 - 最後，用`v-on`指令（`@`是該指令`v-on:`字首的簡寫形式）為新增的按鈕標籤註冊了一個名為`toggleShow`的單擊事件處理函式。 下面繼續來對`main.js`中的程式碼進行修改，具體如下： ```JavaScript 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`的檔案，其程式碼如下： ```HTML

待辦事項

已完成事項

``` 接下來，我會在同一目錄下再建立一個名為`js`的目錄，並在該目錄下建立`main.js`指令碼檔案，其程式碼如下： ```JavaScript // 程式名稱： 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`指令將``標籤繫結到`newTask`資料中，該指令與`v-bind`指令不同的在於，它是一種雙向繫結。也就是說，`v-model`指令不止可以讓 JavaScript 程式碼中對繫結資料的修改反映到頁面元素中，也可以讓頁面元素獲取到的使用者輸入資料同步到 JavaScript 程式碼中。在 JavaScript 程式碼獲取到文字框中的使用者輸入內容之後，我們就可以通過事件處理函式`addNew`將其加入到一個名為`taskList`的資料列表中，然後將該事件處理函式註冊給輸入回車和滑鼠單擊事件。 第二種方式是用單選鈕、複選框等選擇性元素來獲取使用者用滑鼠勾選的資訊。例如在上面這個程式中，我在``元素中用`v-for`指令建立了一系列``，它們都提供`v-model`指令將自己雙向繫結到了另一個名為`doneList`資料列表上。在 Vue.js 框架中，如果一組複選框元素被`v-model`指令繫結到了一個列表型別的資料上，那麼當這些複選框被選上時，它們的`value`屬性值就會被自動新增到這個被繫結的資料列表中。 為了證明被選中的複選框被加入到了`doneList`資料列表中，我還在頁面中添加了一個``元素，並對`doneList`資料列表進行了遍歷顯示。需要說明的是，用於遍歷資料列表的`v-for`指令主要有兩種形式： - **當我們只要遍歷列表中的值時**，可以這樣寫：`v-for="item in dataList"`，這時候資料列表（`dataList`）中的每一項資料就會在遍歷過程中逐一被迭代變數（`item`）說讀取。 - **當我們需要同時獲取列表值及其在列表中的索引時**，可以這樣寫：`v-for="( item,index ) in dataList"`，這時候資料列表（`dataList`）在遍歷過程中，每一項資料的值會被`item`變數讀取，而每一項資料的索引會被`index`變數讀取。 最後需要說明的是，對於``元素本身，我使用了`v-if`指令，它的效果與之前的`v-show`指令基本相同，唯一的區別是：`v-if`指令會直接在 DOM 樹上增加或刪除其所在的元素節點，而`v-show`指令則是單純通過其所在元素的`style`屬性隱藏或顯示該元素而已。在執行效率上，`v-show`指令要更高效一些。在這裡，我們設定了當`doneList`列表中沒有資料時，程式就直接將``元素從頁面中移除，反之則在頁面中新增該元素。下面來看一下`02_toDoList`程式執行的效果： ![](https://img2020.cnblogs.com/blog/691082/202009/691082-20200930160254255-723547003.png)

相關推薦

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

在 Vue.js 框架中，與 HTML 頁面元素的互動方式沒有像原生 JavaScript 介面那麼直接，它是通過先在 HTML 元素標籤中嵌入一系列類似於普通標籤屬性的 Vue 指令屬性來繫結資料，然後再通過在 JavaScript 程式碼中修改這些被繫結的資料來修改頁面元素的顯示方式與內容。在程式設計方法

Vue.js 學習筆記之三：與伺服器的資料互動

顯而易見的，之前的`02_toDoList`存在著一個很致命的缺陷。那就是它的資料只存在於瀏覽器端，一但使用者關閉或重新載入頁面，他之前加入到程式中的資料就會全部丟失，一切又恢復到程式的初始狀態。要想解決這個問題，就需要 Web 應用的前端在適當的時間將獲得的輸入資料儲存到後端伺服器上，然後在需要時再從伺服器

【Vue.js學習筆記】3：資料繫結,事件繫結

資料繫結 使用Vue時在Vue物件的el欄位中要指定一下根容器，這裡用id選擇器。這個例子同時學習了data和methods的基本用法。 資料繫結（data-binding）可以將Vue物件中的data的值繫結到HTML標籤中的某些位置，則修改時只需要修改物件中相應data的值即

Vue.js 學習筆記之四：Vue 元件基礎

到目前為止，這個系列的筆記所展示的都是一些極為簡單的單頁面 Web 應用程式，並且頁面上通常只有幾個簡單的互動元素。但在實際生產環境中，Web 應用程式的使用者介面往往是由多個複雜的頁面共同組成的。這時候，我們就需要開始注意程式碼的可複用性了，針對這個問題，Vue.js 框架提出的解決方案就是先將使用者介面上

Vue.js 學習筆記之六：構建更復雜的元件

在掌握瞭如何構建與編譯 Vue 元件的基礎知識之後，接下來就可以試著來構建一些更具有實際用處的複雜元件了。為了賦予元件更具實用性的後面，首先要做的就是讓這些元件具備監聽使用者自定義事件的能力，並且允許使用者為這些自定義事件註冊相應的處理函式，而這一切都要從`v-on`指令在 Vue 元件中的使用說起。 ##

Junit學習筆記之三：測試驅動開發

1.正常的開發流程 編碼--->測試--->重複--->提交 基於測試驅動的開發 測試--->編碼--->重複--->提交 先寫了測試之後，由於測試的覆蓋率要求為100%，所以就會讓程式碼中可能存在的分支都進行測試，這樣先寫測試單元，可以

【Vue.js學習筆記】5：雙向資料繫結,計算屬性

雙向資料繫結 雙向資料繫結往往會用到input、select、textarea等表單標籤上，因為總是涉及一個數據資料的地方和輸出資料的地方。 當資料發生變化的時候，檢視也就發生變化，當檢視發生變化的時候，資料也會跟著同步變化。 資料雙向繫結，一定是對於UI控制元件來說的，

Redis學習筆記之二：Redis的資料儲存結構

Redis與Mysql等關係型資料庫的第一點區別就是Redis的資料儲存結構，Mysql等關係型資料庫以表的形式存放資料，而Redis提供Key-Value形式的儲存格式。與Mysql等資料庫的第二

Linux運維學習筆記之二：常用命令2

linux 運維 筆記71、passwd：修改用戶密碼語法passwd [參數]username選項-k --keep-tokens ：保留即將過期的用戶在期滿後仍能使用-l --lock ：鎖定用戶無權更改其密碼，只能root才能操作-u --unlock ：解除鎖定-S --status ：查看用戶狀

《逐夢旅程：Windows遊戲編程之從零開始》學習筆記之二：GDI框架

register 開發 操作 程序 turn use 繪制 cal 完整 1 //===========================================【程序說明】=================================== 2 //

Vue.js學習筆記（二）

head 改變 vue ntb con UNC 關註 tle element Vue.js不支持IE8及以下的版本，因為vue使用了IE8無法模擬的ECMAScript5的特性，它支持所有兼容ECMAScript5的瀏覽器。 1 <!DOCTYPE html>

Memcached學習筆記之二：入門使用

使用 現在伺服器已經正常運行了，下面我們就來寫java的客戶端連線程式。 將java_memcached-release.zip解壓，把java_memcached-release.jar檔案複製到java專案的lib目錄下， 然後我們來編寫程式碼，比如我提供的一個應用類如下： &n

vue.js學習筆記（二）--指令的使用

部落格地址：https://fisher-zh.github.io vue之實現列表的新增點選。 使用指令：v-on v-for v-on v-bind v-model html <!DOCTYPE html> <html lang="en"&

hive程式設計指南學習筆記之二：hive資料庫及其中的表查詢

show databases;                                      /*

SpringSecurity學習筆記之二：SpringSecurity結構及基本配置

Spring Security3.2分為11個模組，如下表所示： Spring Security3.2引入了新的Java配置方案，完全不在需要通過XML來配置安全性功能。如下，展現了Spring Security最簡單的Java配置： @EnableWebSecurity

【Vue.js學習筆記】9：使用npm搭建Vue-CLI腳手架並建立Vue專案

在第一篇的時候確實可以建立，這次跟著視訊搭建一次，比較一下和上次的區別，更正一下上次的錯誤操作，加深理解。 重新搭建Vue-CLI腳手架 在Node.js的安裝目錄下，刪除node_cache/和node_global下的所有內容，即讓Node處於剛剛安裝完成的狀態，連cnpm也

【Vue.js學習筆記】8：建立多個Vue例項物件,認識Vue中的元件

建立多個Vue例項物件 這裡在同一個js檔案中建立了兩個Vue例項物件，它們各自能完成前面學的那些功能，同時使用物件名稱也可以互相訪問，協同實現一些功能。 index.html <!DOCTYPE html> <html lang="en" xmlns:v-

【Vue.js學習筆記】7：v-for渲染,Vue的小Demo

v-for渲染 v-for是Vue中常用的列表渲染方法， 可以將一個列表渲染為一系列的HTML元素，也可以用來遍歷物件內的k-v對。另外關於模板元素渲染在官方文件上見這裡。 index.html <!DOCTYPE html> <html lang="en"

【Vue.js學習筆記】6：動態繫結CSS樣式,條件渲染和v-show

動態繫結CSS樣式 這部分涉及官方文件中的Class與Style繫結。 index.html <!DOCTYPE html> <html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:

【Vue.js學習筆記】4：事件修飾符,鍵盤事件,鍵值修飾符

事件修飾符 在Vue的官方文件中給出了引入v-on:的事件修飾符的理念是，不希望在方法中去處理DOM細節。 事件冒泡 事件在事件源上發生，處理事件的方法並未繫結在該事件源上，事件就要向外或者向內傳播（propagation），也稱事件冒泡。在JS裡，可以用事件物件的stopP