Vue.js單向綁定和雙向綁定實例分析

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

這篇文章主要介紹了Vue.js單向綁定和雙向綁定,結合實例形式分析了vue.js單向綁定與雙向綁定相關原理、實現(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)容保持一致，無論誰被改變，另一方會相應的更新為相同的數(shù)據(jù)。這是通過設置屬性訪問器實現(xiàn)的。

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

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

雙向綁定的缺點：不知道data什么時候變了，也不知道是誰變了，變化后也不會通知，當然可以watch來監(jiān)聽data的變化，但這復雜，還不如單向綁定。

<!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程序設計有所幫助。

您可能感興趣的文章:

vue 路由meta 設置導航隱藏與顯示功能的示例代碼
這篇文章主要介紹了vue 路由meta 設置導航隱藏與顯示功能，本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下
2020-09-09
vue圓形進度條環(huán)形進度條組件內(nèi)部顯示圖片示例
這篇文章主要為大家介紹了vue圓形進度條環(huán)形進度條組件內(nèi)部顯示圖片示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪
2023-11-11
如何使用ant-design-vue的Table組件
這篇文章主要介紹了如何使用ant-design-vue的Table組件，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-06-06
Nuxt pages下不同的頁面對應layout下的頁面布局操作
這篇文章主要介紹了Nuxt pages下不同的頁面對應layout下的頁面布局操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2020-11-11
Vue雙向數(shù)據(jù)綁定與響應式原理深入探究
本節(jié)介紹雙向數(shù)據(jù)綁定以及響應式的原理，回答了雙向數(shù)據(jù)綁定和數(shù)據(jù)響應式是否相同，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習吧
2022-08-08
vue實現(xiàn)微信瀏覽器左上角返回按鈕攔截功能
這篇文章主要介紹了vue實現(xiàn)微信瀏覽器左上角返回按鈕攔截功能,本文通過實例代碼相結合的形式給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下
2020-01-01
vue項目打包清除console.log的四種方法總結
大家在項目開發(fā)的時候,需要看看一些后端接口返回的結果,會多次使用console.log項目開發(fā)完成打包的時候,發(fā)現(xiàn)控制臺一堆的console.log,非常頭疼,下面這篇文章主要給大家介紹了關于vue項目打包清除console.log的四種方法,需要的朋友可以參考下
2023-04-04
vue.js實現(xiàn)數(shù)據(jù)庫的JSON數(shù)據(jù)輸出渲染到html頁面功能示例
這篇文章主要介紹了vue.js實現(xiàn)數(shù)據(jù)庫的JSON數(shù)據(jù)輸出渲染到html頁面功能,結合實例形式分析了vue.js針對本地json數(shù)據(jù)的讀取、遍歷輸出相關操作技巧,需要的朋友可以參考下
2019-08-08
Vuex利用state保存新聞數(shù)據(jù)實例
本篇文章主要介紹了Vuex利用state保存新聞數(shù)據(jù)實例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-06-06
vue-cli中devServer.proxy相關配置項的使用
這篇文章主要介紹了vue-cli中devServer.proxy相關配置項的使用詳解，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-04-04