Vue.js數(shù)據(jù)綁定之data屬性
Vue.js是JavaScript的一個(gè)MVVM庫，M是指模型數(shù)據(jù)，V是指視圖容器，VM是指視圖模型，模型數(shù)據(jù)通過視圖模型監(jiān)聽視圖容器的變化，而視圖容器通過視圖模型獲取模型數(shù)據(jù)的變化進(jìn)行渲染，實(shí)現(xiàn)了數(shù)據(jù)的雙向綁定。
data屬性
data屬性是Vue實(shí)例的數(shù)據(jù)對(duì)象，可以綁定的是對(duì)象或者是函數(shù)。
當(dāng)數(shù)據(jù)對(duì)象一旦被data綁定就會(huì)發(fā)生變化，數(shù)據(jù)對(duì)象中的屬性會(huì)擁有g(shù)et和set屬性，用來監(jiān)聽數(shù)據(jù)變化，實(shí)時(shí)響應(yīng)。
Vue實(shí)例會(huì)代理data綁定對(duì)象上的所有屬性，即所有屬性直接添加到Vue實(shí)例化對(duì)象中。
Vue實(shí)例可以通過$data屬性訪問原始數(shù)據(jù)對(duì)象。
Vue實(shí)例是通過new Vue()創(chuàng)建的，{{ }}是Vue進(jìn)行插值的語法，app是Vue的實(shí)例化對(duì)象，這里需要注意的是el綁定的是視圖容器，即DOM對(duì)象，data屬性綁定的是模型數(shù)據(jù)。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
{{msg}}
</div>
</body>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script>
obj={
msg:"hello Vue";
};
var app=new Vue({
el:'#app',
data:obj
})
</script>
</html>
在控制臺(tái)查看app，可以發(fā)現(xiàn)app擁有很多屬性或方法，其中以 $ 與 _ 開頭的都是app內(nèi)置的屬性或方法，從下圖中標(biāo)紅的位置可以發(fā)現(xiàn)：
Vue實(shí)例化對(duì)象中的$el屬性綁定的是DOM對(duì)象；
data屬性綁定的數(shù)據(jù)對(duì)象obj中的屬性msg直接添加到了Vue實(shí)例化對(duì)象中，并且擁有了get和set屬性；
通過$data屬性可以訪問原始的模型對(duì)象，原始的數(shù)據(jù)對(duì)象發(fā)生了變化，變得和Vue實(shí)例中的數(shù)據(jù)是相同的，即obj.msg===app.$data.msg。
以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
下面小編就為大家分享一篇vue之瀏覽器存儲(chǔ)方法封裝實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-03-03
這篇文章主要介紹了Vue render深入開發(fā)講解2018-04-04
Vue引入highCharts實(shí)現(xiàn)數(shù)據(jù)可視化
這篇文章主要為大家詳細(xì)介紹了Vue引入highCharts實(shí)現(xiàn)數(shù)據(jù)可視化，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-03-03
Vue導(dǎo)出el-table表格為Excel文件的兩種方式
在開發(fā)過程中,我們經(jīng)常需要將表格數(shù)據(jù)導(dǎo)出為 Excel 文件,大多數(shù)情況下,由后端處理即可,但是當(dāng)數(shù)據(jù)量不大、需要快速響應(yīng)用戶操作、或者數(shù)據(jù)已經(jīng)在前端進(jìn)行處理和展示時(shí),前端該如何實(shí)現(xiàn)呢,本文將介紹兩種方法,需要的朋友可以參考下2024-09-09
react+vite動(dòng)態(tài)導(dǎo)入報(bào)錯(cuò)@vite-ignore的問題及解決
這篇文章主要介紹了react+vite動(dòng)態(tài)導(dǎo)入報(bào)錯(cuò)@vite-ignore的問題及解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
這篇文章主要介紹了vue項(xiàng)目配置使用flow類型檢查的步驟，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-03-03
跨域問題是由瀏覽器引起的安全限制,而不是Vue框架本身導(dǎo)致的,Vue本身并不限制跨域訪問,它只是一個(gè)前端框架,負(fù)責(zé)構(gòu)建用戶界面和處理數(shù)據(jù)邏輯,本文給大家介紹了在Vue中解決跨域問題的常用方式,需要的朋友可以參考下2023-10-10
vue3+vite使用History路由模式打包部署項(xiàng)目的步驟及注意事項(xiàng)
這篇文章主要介紹了vue3+vite使用History路由模式打包部署項(xiàng)目的步驟及注意事項(xiàng),配置過程包括在Vue項(xiàng)目中設(shè)置路由模式、調(diào)整打包配置以及Nginx服務(wù)器的配置,正確的部署配置能夠確保應(yīng)用順利運(yùn)行,提升用戶體驗(yàn),需要的朋友可以參考下2024-10-10
解決vue-quill-editor上傳內(nèi)容由于圖片是base64的導(dǎo)致字符太長的問題
vue-quill-editor默認(rèn)插入圖片是直接將圖片轉(zhuǎn)為base64再放入內(nèi)容中，如果圖片較多，篇幅太長，就會(huì)比較煩惱，接下來通過本文給大家介紹vue-quill-editor上傳內(nèi)容由于圖片是base64的導(dǎo)致字符太長的問題及解決方法,需要的朋友可以參考下2018-08-08
這篇文章，我們通過實(shí)現(xiàn)一個(gè)簡單版的和Vue中computed具有相同功能的函數(shù)來了解computed是如何工作的。對(duì)Vue.js中的computed工作原理感興趣的朋友跟隨腳本之家小編一起學(xué)習(xí)吧2018-03-03