Vue.js數據綁定之data屬性
Vue.js是JavaScript的一個MVVM庫，M是指模型數據，V是指視圖容器，VM是指視圖模型，模型數據通過視圖模型監(jiān)聽視圖容器的變化，而視圖容器通過視圖模型獲取模型數據的變化進行渲染，實現(xiàn)了數據的雙向綁定。
data屬性
data屬性是Vue實例的數據對象，可以綁定的是對象或者是函數。
當數據對象一旦被data綁定就會發(fā)生變化，數據對象中的屬性會擁有get和set屬性，用來監(jiān)聽數據變化，實時響應。
Vue實例會代理data綁定對象上的所有屬性，即所有屬性直接添加到Vue實例化對象中。
Vue實例可以通過$data屬性訪問原始數據對象。
Vue實例是通過new Vue()創(chuàng)建的，{{ }}是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，可以發(fā)現(xiàn)app擁有很多屬性或方法，其中以 $ 與 _ 開頭的都是app內置的屬性或方法，從下圖中標紅的位置可以發(fā)現(xiàn)：
Vue實例化對象中的$el屬性綁定的是DOM對象；
data屬性綁定的數據對象obj中的屬性msg直接添加到了Vue實例化對象中，并且擁有了get和set屬性；
通過$data屬性可以訪問原始的模型對象，原始的數據對象發(fā)生了變化，變得和Vue實例中的數據是相同的，即obj.msg===app.$data.msg。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
這篇文章主要介紹了vue 數據遍歷篩選 過濾 排序的應用操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11
vue實現(xiàn)前端保持篩選條件到url并進行同步參數設計
這篇文章主要為大家介紹了vue實現(xiàn)前端保持篩選條件到url并進行同步參數設計思路詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-08-08
本篇文章主要介紹了vue實現(xiàn)登陸登出的實現(xiàn)示例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2021-09-09
這篇文章主要介紹了vue異步加載dom元素之后無法獲得的解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-03-03
這篇文章主要介紹了vue elementui簡易側拉欄的使用,增加了側拉欄,目的是可以選擇多條數據展示數據,本文通過示例代碼給大家介紹的非常詳細,感興趣的朋友跟隨小編一起看看吧2024-06-06
這篇文章主要介紹了vue如何將html內容轉為圖片并下載到本地，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-01-01
vue3模塊創(chuàng)建runtime-dom源碼解析
這篇文章主要為大家介紹了vue3模塊創(chuàng)建runtime-dom源碼解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-01-01
詳解Vue SSR（ Vue2 + Koa2 + Webpack4）配置指南
這篇文章主要介紹了詳解Vue SSR（ Vue2 + Koa2 + Webpack4）配置指南，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-11-11
本文介紹了在Vue項目中實現(xiàn)電子簽名功能的步驟,包括將原始文檔轉換為圖片、使用`signature_pad`和`html2canvas`庫、調整簽名位置和縮放比例、合并圖片等步驟,并提供了完整的源碼,需要的朋友可以參考下2025-02-02
這篇文章主要為大家介紹了Vue編譯器AST抽象語法樹源碼分析詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-07-07