溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
這篇文章主要講解了“Vue如何綁定data屬性”，文中的講解內(nèi)容簡單清晰，易于學(xué)習(xí)與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學(xué)習(xí)“Vue如何綁定data屬性”吧！
Vue.js是JavaScript的一個MVVM庫，M是指模型數(shù)據(jù)，V是指視圖容器，VM是指視圖模型，模型數(shù)據(jù)通過視圖模型監(jiān)聽視圖容器的變化，而視圖容器通過視圖模型獲取模型數(shù)據(jù)的變化進(jìn)行渲染，實現(xiàn)了數(shù)據(jù)的雙向綁定。
data屬性
data屬性是Vue實例的數(shù)據(jù)對象，可以綁定的是對象或者是函數(shù)。
當(dāng)數(shù)據(jù)對象一旦被data綁定就會發(fā)生變化，數(shù)據(jù)對象中的屬性會擁有g(shù)et和set屬性，用來監(jiān)聽數(shù)據(jù)變化，實時響應(yīng)。
Vue實例會代理data綁定對象上的所有屬性，即所有屬性直接添加到Vue實例化對象中。
Vue實例可以通過$data屬性訪問原始數(shù)據(jù)對象。
Vue實例是通過new Vue()創(chuàng)建的，{{ }}是Vue進(jìn)行插值的語法，app是Vue的實例化對象，這里需要注意的是el綁定的是視圖容器，即DOM對象，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>在控制臺查看app，可以發(fā)現(xiàn)app擁有很多屬性或方法，其中以 $ 與 _ 開頭的都是app內(nèi)置的屬性或方法，從下圖中標(biāo)紅的位置可以發(fā)現(xiàn)：
Vue實例化對象中的$el屬性綁定的是DOM對象；
data屬性綁定的數(shù)據(jù)對象obj中的屬性msg直接添加到了Vue實例化對象中，并且擁有了get和set屬性；
通過$data屬性可以訪問原始的模型對象，原始的數(shù)據(jù)對象發(fā)生了變化，變得和Vue實例中的數(shù)據(jù)是相同的，即obj.msg===app.$data.msg。
Vue具體輕量級框架、簡單易學(xué)、雙向數(shù)據(jù)綁定、組件化、數(shù)據(jù)和結(jié)構(gòu)的分離、虛擬DOM、運行速度快等優(yōu)勢，Vue中頁面使用的是局部刷新，不用每次跳轉(zhuǎn)頁面都要請求所有數(shù)據(jù)和dom，可以大大提升訪問速度和用戶體驗。
感謝各位的閱讀，以上就是“Vue如何綁定data屬性”的內(nèi)容了，經(jīng)過本文的學(xué)習(xí)后，相信大家對Vue如何綁定data屬性這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關(guān)知識點的文章，歡迎關(guān)注！
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號
手機(jī)網(wǎng)站二維碼