Vue.js數(shù)據(jù)綁定之data屬性
Vue.js是JavaScript的一個(gè)MVVM庫(kù)，M是指模型數(shù)據(jù)，V是指視圖容器，VM是指視圖模型，模型數(shù)據(jù)通過(guò)視圖模型監(jiān)聽(tīng)視圖容器的變化，而視圖容器通過(guò)視圖模型獲取模型數(shù)據(jù)的變化進(jìn)行渲染，實(shí)現(xiàn)了數(shù)據(jù)的雙向綁定。
data屬性
data屬性是Vue實(shí)例的數(shù)據(jù)對(duì)象，可以綁定的是對(duì)象或者是函數(shù)。
當(dāng)數(shù)據(jù)對(duì)象一旦被data綁定就會(huì)發(fā)生變化，數(shù)據(jù)對(duì)象中的屬性會(huì)擁有g(shù)et和set屬性，用來(lái)監(jiān)聽(tīng)數(shù)據(jù)變化，實(shí)時(shí)響應(yīng)。
Vue實(shí)例會(huì)代理data綁定對(duì)象上的所有屬性，即所有屬性直接添加到Vue實(shí)例化對(duì)象中。
Vue實(shí)例可以通過(guò)$data屬性訪問(wèn)原始數(shù)據(jù)對(duì)象。
Vue實(shí)例是通過(guò)new Vue()創(chuàng)建的，{{ }}是Vue進(jìn)行插值的語(yǔ)法，app是Vue的實(shí)例化對(duì)象，這里需要注意的是el綁定的是視圖容器，即DOM對(duì)象，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>
在控制臺(tái)查看app，可以發(fā)現(xiàn)app擁有很多屬性或方法，其中以 $ 與 _ 開(kāi)頭的都是app內(nèi)置的屬性或方法，從下圖中標(biāo)紅的位置可以發(fā)現(xiàn)：
Vue實(shí)例化對(duì)象中的$el屬性綁定的是DOM對(duì)象；
data屬性綁定的數(shù)據(jù)對(duì)象obj中的屬性msg直接添加到了Vue實(shí)例化對(duì)象中，并且擁有了get和set屬性；
通過(guò)$data屬性可以訪問(wèn)原始的模型對(duì)象，原始的數(shù)據(jù)對(duì)象發(fā)生了變化，變得和Vue實(shí)例中的數(shù)據(jù)是相同的，即obj.msg===app.$data.msg。
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
vue3中setup-script的應(yīng)用實(shí)例
script-setup是一個(gè)比較有爭(zhēng)議的新特性,作為 setup 函數(shù)的語(yǔ)法糖,褒貶不一,不過(guò)經(jīng)歷了幾次迭代之后,目前在體驗(yàn)上來(lái)說(shuō),感受還是非常棒的,這篇文章主要給大家介紹了關(guān)于vue3中setup-script應(yīng)用的相關(guān)資料,需要的朋友可以參考下2022-01-01
詳解vue-cli + webpack 多頁(yè)面實(shí)例配置優(yōu)化方法
本篇文章主要介紹了詳解vue-cli + webpack 多頁(yè)面實(shí)例配置優(yōu)化方法，具有一定的參考價(jià)值，有興趣的可以了解一下2017-07-07
在Vue中，路由守衛(wèi)分為三種：全局路由守衛(wèi)、獨(dú)享路由守衛(wèi)以及組件內(nèi)路由守衛(wèi)，本文重點(diǎn)介紹Vue路由守衛(wèi)案例代碼,需要的朋友可以參考下2023-02-02
Vue中.vue文件比main.js先執(zhí)行的問(wèn)題及解決
這篇文章主要介紹了Vue中.vue文件比main.js先執(zhí)行的問(wèn)題及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-12-12
這篇文章主要介紹了vue3聲明字段名為枚舉的類型方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
這篇文章主要介紹了Vue使用echarts可視化組件的方法,本文通過(guò)實(shí)例代碼案例給大家詳細(xì)介紹，需要的朋友可以參考下2021-07-07
vue3使用ref監(jiān)聽(tīng)復(fù)雜類型過(guò)程
文章主要介紹了如何使用Vue的watch函數(shù)監(jiān)聽(tīng)由ref創(chuàng)建的響應(yīng)式數(shù)據(jù),特別是針對(duì)引用數(shù)據(jù)類型,通過(guò)定義數(shù)據(jù)、監(jiān)聽(tīng)變化并使用方法改值,可以在控制臺(tái)查看監(jiān)聽(tīng)效果,文章還提到了在watch中使用{deep:true}和immediate:true選項(xiàng),以實(shí)現(xiàn)深度監(jiān)聽(tīng)和初始化時(shí)立即觸發(fā)監(jiān)聽(tīng)器2025-10-10
Vue filter 過(guò)濾器、以及在table中的使用介紹
這篇文章主要介紹了Vue filter 過(guò)濾器、以及在table中的使用介紹，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-09-09
本文主要介紹了Vue-Element-Admin前端接入SSO的方法步驟，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-04-04
Vue3+Element?Plus的項(xiàng)目搭建過(guò)程詳解
這篇文章主要為大家介紹了Vue3+Element?Plus的項(xiàng)目搭建過(guò)程詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-08-08