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