溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
Vue.js中怎么綁定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.js中怎么綁定data屬性問題的解答就分享到這里了，希望以上內容可以對大家有一定的幫助，如果你還有很多疑惑沒有解開，可以關注億速云行業資訊頻道了解更多相關知識。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
