- Vue.js從入門到項目實踐(超值版)
- 聚慕課教育研發中心編著
- 377字
- 2022-07-29 14:27:39
4.1.1 數據

data:在Vue實例中初始化的data中的所有數據會自動進行監聽綁定,然后可以在View中通過使用兩個大括號來綁定data中的數據。
代碼如下:

運行效果如圖4-1所示。

圖4-1 data運行效果圖(一)
在后面的代碼中,只要通過app.message='XX',即可進行視圖的實時更新,使用起來很簡單。
提示:data中的數據都是淺拷貝。這意味著,如果修改原來的對象也會改變data,從而觸發更新事件。
var info = { a: 1 } var app = new Vue({ el: '#app', data: infor }) infor.a = 3 //使得data.a = 3,這里也會觸發數據監聽,從而更新視圖 app.a = 2 //使得info.a = 2,同樣會觸發數據監聽
在組件的使用過程中也可以使用data,需要注意以下幾點。
(1)data的值必須是一個函數,并且返回值是原始對象。如果傳給組件的data是一個原始對象,則在建立多個組件實例時,它們就會共用這個data對象,修改其中一個組件實例的數據就會影響其他組件實例的數據。
(2)data中的屬性和props中的不能重名。

運行效果如圖4-2所示。

圖4-2 data運行效果圖(二)
推薦閱讀
- 版面設計與制作
- 網頁配色從入門到精通
- 中文版Dreamweaver CS6/Flash CS6/Photoshop CS6網頁設計基礎培訓
- Dreamweaver CS5+ASP動態網站設計實用手冊
- 動漫秀場:超級漫畫Q版造型素描技法
- jQuery+Bootstrap Web開發案例教程(在線實訓版)
- 網頁制作與網站建設寶典
- UI動效大爆炸:After Effects移動UI動效制作學習手冊
- 網頁設計與制作(Dreamweaver CS6)
- HTML+CSS+JavaScript網頁設計與布局:從新手到高手
- 人人都玩開心網:Ext JS+Android+SSH整合開發Web與移動SNS
- 寬帶接入技術
- 秩序之美:網頁中的網格設計
- Dreamweaver CC網頁設計從入門到精通(微課精編版)
- 從零開始讀懂Web3