Vue.js單向綁定和雙向綁定實(shí)例分析

更新時(shí)間：2018年08月14日 11:35:20 作者：筱葭

這篇文章主要介紹了Vue.js單向綁定和雙向綁定,結(jié)合實(shí)例形式分析了vue.js單向綁定與雙向綁定相關(guān)原理、實(shí)現(xiàn)方法及操作技巧,需要的朋友可以參考下

本文實(shí)例講述了Vue.js單向綁定和雙向綁定。分享給大家供大家參考，具體如下：

1、單向綁定

單向數(shù)據(jù)綁定的實(shí)現(xiàn)思路：

①　所有數(shù)據(jù)只有一份

②　一旦數(shù)據(jù)變化，就去更新頁(yè)面(只有data-->DOM，沒(méi)有DOM-->data)

③　若用戶在頁(yè)面上做了更新，就手動(dòng)收集(雙向綁定是自動(dòng)收集)，合并到原有的數(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實(shí)現(xiàn)的一大功能。

使用v-model指令，實(shí)現(xiàn)視圖和數(shù)據(jù)的雙向綁定。

所謂雙向綁定，指的是vue實(shí)例中的data與其渲染的DOM元素的內(nèi)容保持一致，無(wú)論誰(shuí)被改變，另一方會(huì)相應(yīng)的更新為相同的數(shù)據(jù)。這是通過(guò)設(shè)置屬性訪問(wèn)器實(shí)現(xiàn)的。

v-model主要用在表單的input輸入框，完成視圖和數(shù)據(jù)的雙向綁定。

v-model只能用在<input>、<select>、<textarea>這些表單元素上。

雙向綁定的缺點(diǎn)：不知道data什么時(shí)候變了，也不知道是誰(shuí)變了，變化后也不會(huì)通知，當(dāng)然可以watch來(lái)監(jiān)聽(tīng)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>

希望本文所述對(duì)大家vue.js程序設(shè)計(jì)有所幫助。

您可能感興趣的文章:

相關(guān)文章

Vue3?源碼解讀之?Teleport?組件使用示例
這篇文章主要為大家介紹了Vue3?源碼解讀之?Teleport?組件使用示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-08-08
詳解如何創(chuàng)建基于vite的vue項(xiàng)目
vite 這個(gè)是尤大開(kāi)發(fā)的新工具,目的是以后替代webpack,下面這篇文章主要給大家介紹了關(guān)于如何創(chuàng)建基于vite的vue項(xiàng)目的相關(guān)資料,文中通過(guò)圖文介紹的非常詳細(xì),需要的朋友可以參考下
2023-11-11
vue與vue-i18n結(jié)合實(shí)現(xiàn)后臺(tái)數(shù)據(jù)的多語(yǔ)言切換方法
下面小編就為大家分享一篇vue與vue-i18n結(jié)合實(shí)現(xiàn)后臺(tái)數(shù)據(jù)的多語(yǔ)言切換方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2018-03-03
Vue中使用video.js實(shí)現(xiàn)截圖和視頻錄制與下載
這篇文章主要為大家詳細(xì)介紹了Vue中如何使用video.js實(shí)現(xiàn)截圖和視頻錄制與下載,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下
2024-03-03
詳解Vue全局組件的掛載之實(shí)現(xiàn)彈窗組件
這篇文章主要為大家詳細(xì)介紹了如何通過(guò)Vue全局組件的掛載來(lái)實(shí)現(xiàn)彈窗組件，文中的示例代碼講解詳細(xì)，具有一定的借鑒價(jià)值，感興趣的可以了解一下
2022-11-11
Vue2.0中三種常用傳值方式(父?jìng)髯?、子傳父、非父子組件傳值)
在Vue的框架開(kāi)發(fā)的項(xiàng)目過(guò)程中，經(jīng)常會(huì)用到組件來(lái)管理不同的功能，有一些公共的組件會(huì)被提取出來(lái)。下面通過(guò)本文給大家介紹Vue開(kāi)發(fā)中常用的三種傳值方式父?jìng)髯?、子傳父、非父子組件傳值，需要的朋友參考下吧
2018-08-08
ant-design-vue中tree增刪改的操作方法
這篇文章主要介紹了ant-design-vue中tree增刪改的操作方法,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2020-11-11
詳解Vuex的屬性
Vuex是專為Vue.js應(yīng)用程序開(kāi)發(fā)的狀態(tài)管理模式，這篇文章主要介紹了Vuex的屬性，本文通過(guò)示例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2022-08-08
Vue.js狀態(tài)管理之Pinia與Vuex詳解
Pinia和Vuex一樣都是是vue的全局狀態(tài)管理器,其實(shí)Pinia就是Vuex5,只不過(guò)為了尊重原作者的貢獻(xiàn)就沿用了名字Pinia,下面這篇文章主要給大家介紹了關(guān)于Vue.js狀態(tài)管理之Pinia與Vuex的相關(guān)資料,需要的朋友可以參考下
2023-02-02
Vue 2.0學(xué)習(xí)筆記之使用$refs訪問(wèn)Vue中的DOM
這篇文章主要介紹了Vue 2.0學(xué)習(xí)筆記之使用$refs訪問(wèn)Vue中的DOM，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2017-12-12