Vue.js數(shù)據(jù)綁定之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。
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
下面小編就為大家分享一篇vue之瀏覽器存儲方法封裝實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03
這篇文章主要介紹了Vue render深入開發(fā)講解2018-04-04
Vue引入highCharts實現(xiàn)數(shù)據(jù)可視化
這篇文章主要為大家詳細(xì)介紹了Vue引入highCharts實現(xiàn)數(shù)據(jù)可視化，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下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)行處理和展示時,前端該如何實現(xiàn)呢,本文將介紹兩種方法,需要的朋友可以參考下2024-09-09
react+vite動態(tài)導(dǎo)入報錯@vite-ignore的問題及解決
這篇文章主要介紹了react+vite動態(tài)導(dǎo)入報錯@vite-ignore的問題及解決方案,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
這篇文章主要介紹了vue項目配置使用flow類型檢查的步驟，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-03-03
跨域問題是由瀏覽器引起的安全限制,而不是Vue框架本身導(dǎo)致的,Vue本身并不限制跨域訪問,它只是一個前端框架,負(fù)責(zé)構(gòu)建用戶界面和處理數(shù)據(jù)邏輯,本文給大家介紹了在Vue中解決跨域問題的常用方式,需要的朋友可以參考下2023-10-10
vue3+vite使用History路由模式打包部署項目的步驟及注意事項
這篇文章主要介紹了vue3+vite使用History路由模式打包部署項目的步驟及注意事項,配置過程包括在Vue項目中設(shè)置路由模式、調(diào)整打包配置以及Nginx服務(wù)器的配置,正確的部署配置能夠確保應(yīng)用順利運(yùn)行,提升用戶體驗,需要的朋友可以參考下2024-10-10
解決vue-quill-editor上傳內(nèi)容由于圖片是base64的導(dǎo)致字符太長的問題
vue-quill-editor默認(rèn)插入圖片是直接將圖片轉(zhuǎn)為base64再放入內(nèi)容中，如果圖片較多，篇幅太長，就會比較煩惱，接下來通過本文給大家介紹vue-quill-editor上傳內(nèi)容由于圖片是base64的導(dǎo)致字符太長的問題及解決方法,需要的朋友可以參考下2018-08-08
這篇文章，我們通過實現(xiàn)一個簡單版的和Vue中computed具有相同功能的函數(shù)來了解computed是如何工作的。對Vue.js中的computed工作原理感興趣的朋友跟隨腳本之家小編一起學(xué)習(xí)吧2018-03-03