Vue.js單向綁定和雙向綁定實例分析
更新時間：2018年08月14日 11:35:20 作者：筱葭
這篇文章主要介紹了Vue.js單向綁定和雙向綁定,結(jié)合實例形式分析了vue.js單向綁定與雙向綁定相關(guān)原理、實現(xiàn)方法及操作技巧,需要的朋友可以參考下
本文實例講述了Vue.js單向綁定和雙向綁定。分享給大家供大家參考，具體如下：
1、單向綁定
單向數(shù)據(jù)綁定的實現(xiàn)思路：
① 所有數(shù)據(jù)只有一份
② 一旦數(shù)據(jù)變化，就去更新頁面(只有data-->DOM，沒有DOM-->data)
③ 若用戶在頁面上做了更新，就手動收集(雙向綁定是自動收集)，合并到原有的數(shù)據(jù)中。
<!DOCTYPE html>
<html>
<head></head>
<body>
<div id="app">
{{message}}
</div>
<script>
var app = new Vue({
el: '#app',
data: {
message: ''
}
});
</script>
</body>
</html>
2、雙向綁定
數(shù)據(jù)的雙向綁定是vue實現(xiàn)的一大功能。
使用v-model指令，實現(xiàn)視圖和數(shù)據(jù)的雙向綁定。
所謂雙向綁定，指的是vue實例中的data與其渲染的DOM元素的內(nèi)容保持一致，無論誰被改變，另一方會相應(yīng)的更新為相同的數(shù)據(jù)。這是通過設(shè)置屬性訪問器實現(xiàn)的。
v-model主要用在表單的input輸入框，完成視圖和數(shù)據(jù)的雙向綁定。
v-model只能用在<input>、<select>、<textarea>這些表單元素上。
雙向綁定的缺點：不知道data什么時候變了，也不知道是誰變了，變化后也不會通知，當(dāng)然可以watch來監(jiān)聽data的變化，但這復(fù)雜，還不如單向綁定。
<!DOCTYPE html>
<html>
<head></head>
<body>
<div id="app">
<input type="text" v-model="message">
<p>{{message}}</p>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
message: ''
}
});
</script>
</body>
</html>
希望本文所述對大家vue.js程序設(shè)計有所幫助。
相關(guān)文章
這篇文章主要為大家介紹了Vue3?源碼解讀之?Teleport?組件使用示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-08-08
vite 這個是尤大開發(fā)的新工具,目的是以后替代webpack,下面這篇文章主要給大家介紹了關(guān)于如何創(chuàng)建基于vite的vue項目的相關(guān)資料,文中通過圖文介紹的非常詳細(xì),需要的朋友可以參考下2023-11-11
vue與vue-i18n結(jié)合實現(xiàn)后臺數(shù)據(jù)的多語言切換方法
下面小編就為大家分享一篇vue與vue-i18n結(jié)合實現(xiàn)后臺數(shù)據(jù)的多語言切換方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03
Vue中使用video.js實現(xiàn)截圖和視頻錄制與下載
這篇文章主要為大家詳細(xì)介紹了Vue中如何使用video.js實現(xiàn)截圖和視頻錄制與下載,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-03-03
這篇文章主要為大家詳細(xì)介紹了如何通過Vue全局組件的掛載來實現(xiàn)彈窗組件，文中的示例代碼講解詳細(xì)，具有一定的借鑒價值，感興趣的可以了解一下2022-11-11
Vue2.0中三種常用傳值方式(父傳子、子傳父、非父子組件傳值)
在Vue的框架開發(fā)的項目過程中，經(jīng)常會用到組件來管理不同的功能，有一些公共的組件會被提取出來。下面通過本文給大家介紹Vue開發(fā)中常用的三種傳值方式父傳子、子傳父、非父子組件傳值，需要的朋友參考下吧2018-08-08
這篇文章主要介紹了ant-design-vue中tree增刪改的操作方法,本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-11-11
Vuex是專為Vue.js應(yīng)用程序開發(fā)的狀態(tài)管理模式，這篇文章主要介紹了Vuex的屬性，本文通過示例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2022-08-08
Pinia和Vuex一樣都是是vue的全局狀態(tài)管理器,其實Pinia就是Vuex5,只不過為了尊重原作者的貢獻(xiàn)就沿用了名字Pinia,下面這篇文章主要給大家介紹了關(guān)于Vue.js狀態(tài)管理之Pinia與Vuex的相關(guān)資料,需要的朋友可以參考下2023-02-02
Vue 2.0學(xué)習(xí)筆記之使用$refs訪問Vue中的DOM
這篇文章主要介紹了Vue 2.0學(xué)習(xí)筆記之使用$refs訪問Vue中的DOM，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-12-12