Vue.js单向绑定和双向绑定实例分析

作者：猪哥 2018-08-22

本文实例讲述了Vue.js单向绑定和双向绑定。分享给大家供大家参考，具体如下：

1、单向绑定

单向数据绑定的实现思路：

① 所有数据只有一份

② 一旦数据变化，就去更新页面(只有data-->DOM，没有DOM-->data)

③ 若用户在页面上做了更新，就手动收集(双向绑定是自动收集)，合并到原有的数据中。





   
    {{message}}

2、双向绑定

数据的双向绑定是vue实现的一大功能。

使用v-model指令，实现视图和数据的双向绑定。

所谓双向绑定，指的是vue实例中的data与其渲染的DOM元素的内容保持一致，无论谁被改变，另一方会相应的更新为相同的数据。这是通过设置属性访问器实现的。

v-model主要用在表单的input输入框，完成视图和数据的双向绑定。

v-model只能用在、</span>这些表单元素上。 </p> <p> 双向绑定的缺点：不知道<span style="color:#0000ff;">data</span>什么时候变了，也不知道是谁变了，变化后也不会通知，当然可以<code>watch</code>来监听<span style="color:#0000ff;">data</span>的变化，但这复杂，还不如单向绑定。 </p> <div class="jb51code"> <pre class="brush:js;"><!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> </pre> </div> </div> </div> </section> <div class="wrap-box"> <div class="turnPage wrapStyle"> <a href="https://m.111com.net/art-165015.htm">上一个：<span>微信小程序异步API为Promise简化异步编程的操作方法</span></a> <a href="https://m.111com.net/art-165040.htm">下一个：<span>JS中‘hello’与new String(‘hello’)引出的问题详解</span></a> </div> </div> <section class="wrap-box"> <div class="g-tit"> <h2>相关文章</h2> </div> <ul class="s-list nobord notop"> <li> <a href="https://m.111com.net/art-228472.htm" class="s-card"> <div class="s-card-l"> <p class="tit">HTML简单购物数量小程序代码展示</p> <div class="info"> <span class="person">html5教程</span> <span class="time">2022-10-31</span> </div> </div> </a> </li> <li> <a href="https://m.111com.net/art-228464.htm" class="s-card"> <div class="s-card-l"> <p class="tit">html canvas实现弹幕功能</p> <div class="info"> <span class="person">html5教程</span> <span class="time">2022-10-31</span> </div> </div> <div class="s-card-pic"> <img src="https://assets.111com.net/images/lazy.gif" data-src="https://img.111com.net/m00/7a/2e/958ae89e848fc8c7c37e0cd93d1ddf83_c_246_164.gif" alt="html canvas实现弹幕功能" /> </div> </a> </li> <li> <a href="https://m.111com.net/art-228463.htm" class="s-card"> <div class="s-card-l"> <p class="tit">HTML中空格表示的意义</p> <div class="info"> <span class="person">html5教程</span> <span class="time">2022-10-31</span> </div> </div> </a> </li> <li> <a href="https://m.111com.net/art-228462.htm" class="s-card"> <div class="s-card-l"> <p class="tit">html area标签解读</p> <div class="info"> <span class="person">html5教程</span> <span class="time">2022-10-31</span> </div> </div> <div class="s-card-pic"> <img src="https://assets.111com.net/images/lazy.gif" data-src="https://img.111com.net/m00/cb/62/2cb1a4fa41104ed71ef069688f3411a2_c_246_164.png" alt="html area标签解读" /> </div> </a> </li> <li> <a href="https://m.111com.net/art-228461.htm" class="s-card"> <div class="s-card-l"> <p class="tit">html使用表单标签实现注册页面代码展示</p> <div class="info"> <span class="person">html5教程</span> <span class="time">2022-10-31</span> </div> </div> </a> </li> <li> <a href="https://m.111com.net/art-228460.htm" class="s-card"> <div class="s-card-l"> <p class="tit">使用HTML截图并保存为本地图片的代码展示</p> <div class="info"> <span class="person">html5教程</span> <span class="time">2022-10-31</span> </div> </div> </a> </li> </ul> </section> <section class="wrap-box"> <div class="g-tit"> <h2>精彩推荐</h2> </div> <ul class="card-box"> <li class="card3"> <a href="https://m.111com.net/azgame/46853.htm" target="_self" class="figure"> <div class="figure-box"> <img src="https://assets.111com.net/images/lazy.gif" data-src="https://img.111com.net/attachment/m_soft/46853/5dcb71bae30a3.png" alt="一剑斩仙" /> </div> <p class="figure-head">一剑斩仙</p> <span class="figure-btn">下载</span> </a> </li> <li class="card3"> <a href="https://m.111com.net/azgame/224592.htm" target="_self" class="figure"> <div class="figure-box"> <img src="https://assets.111com.net/images/lazy.gif" data-src="https://img.111com.net/m00/77/b7/b0a10d2c1b09f241dabff441346fb91c.png" alt="超级雷电战机" /> </div> <p class="figure-head">超级雷电战机</p> <span class="figure-btn">下载</span> </a> </li> <li class="card3"> <a href="https://m.111com.net/azgame/30153.htm" target="_self" class="figure"> <div class="figure-box"> <img src="https://assets.111com.net/images/lazy.gif" data-src="https://img.111com.net/attachment/m_soft/30153/6d482cbc24.jpg" alt="烈火一刀" /> </div> <p class="figure-head">烈火一刀</p> <span class="figure-btn">下载</span> </a> </li> <li class="card3"> <a href="https://m.111com.net/azgame/42147.htm" target="_self" class="figure"> <div class="figure-box"> <img src="https://assets.111com.net/images/lazy.gif" data-src="https://img.111com.net/attachment/m_soft/42147/5d4cf5dfeb6ca.png" alt="天使纪元" /> </div> <p class="figure-head">天使纪元</p> <span class="figure-btn">下载</span> </a> </li> </ul> <ul class="card-box-b"> <li class="card10"> <a href="https://m.111com.net/azgame/127872.htm" target="_self" class="figure2"> <div class="figure-box"> <img src="https://assets.111com.net/images/lazy.gif" data-src="https://img.111com.net/mobile/202111/15/35c0b8587a.png" alt="完美修真" /> </div> <div class="figure-cont"> <p class="figure-head">完美修真</p> <div class="figure-desc"> <span>角色扮演</span> <span>538.52 MB</span> </div> <div class="figure-desc"> <p>高清画质体验，华丽场景视觉盛宴</p> </div> </div> <span class="figure-btn">下载</span> </a> </li> <li class="card10"> <a href="https://m.111com.net/azgame/30904.htm" target="_self" class="figure2"> <div class="figure-box"> <img src="https://assets.111com.net/images/lazy.gif" data-src="https://img.111com.net/attachment/m_soft/30904/fd82743d5b.png" alt="永恒领主" /> </div> <div class="figure-cont"> <p class="figure-head">永恒领主</p> <div class="figure-desc"> <span>即时网游</span> <span>392.00 MB</span> </div> <div class="figure-desc"> <p>3D魔幻MMO</p> </div> </div> <span class="figure-btn">下载</span> </a> </li> <li class="card10"> <a href="https://m.111com.net/azgame/113807.htm" target="_self" class="figure2"> <div class="figure-box"> <img src="https://assets.111com.net/images/lazy.gif" data-src="https://img.111com.net/mobile/202107/01/275a3dca7e.png" alt="九州八荒录" /> </div> <div class="figure-cont"> <p class="figure-head">九州八荒录</p> <div class="figure-desc"> <span>角色扮演</span> <span>232.56 MB</span> </div> <div class="figure-desc"> <p>九州八荒，一剑入魂。</p> </div> </div> <span class="figure-btn">下载</span> </a> </li> <li class="card10"> <a href="https://m.111com.net/azgame/372634.htm" target="_self" class="figure2"> <div class="figure-box"> <img src="https://assets.111com.net/images/lazy.gif" data-src="https://img.111com.net/m00/f5/99/f276753f2f8beb9dd0cceb843afcf723.png" alt="航海王燃烧意志" /> </div> <div class="figure-cont"> <p class="figure-head">航海王燃烧意志</p> <div class="figure-desc"> <span>角色扮演</span> <span>1.42 GB</span> </div> <div class="figure-desc"> <p>热血激战动作冒险游戏</p> </div> </div> <span class="figure-btn">下载</span> </a> </li> <li class="card10"> <a href="https://m.111com.net/azgame/37526.htm" target="_self" class="figure2"> <div class="figure-box"> <img src="https://assets.111com.net/images/lazy.gif" data-src="https://img.111com.net/m00/f3/6a/29dc4894964b32d77cad35e9676985d4.png" alt="君临传奇" /> </div> <div class="figure-cont"> <p class="figure-head">君临传奇</p> <div class="figure-desc"> <span>角色扮演</span> <span>43.57 MB</span> </div> <div class="figure-desc"> <p>经典RPG战斗手游</p> </div> </div> <span class="figure-btn">下载</span> </a> </li> </ul> </section> <footer class="foot"> <a href="https://m.111com.net/" class="logo-icon"> <img src="https://assets.111com.net/mobile/images/logo2.png" alt="一聚教程网"> </a> <p>Copyright © 2010-2024</p> <p>111com.net All Rights Reserved</p> </footer> <div class="back-top" style="display: block;"> <span class="icon-box"><svg class="icon" viewBox="0 0 1024 1024"> <path d="M213.333333 640h170.666667v256h256v-256h170.666667l-298.666667-341.333333zM170.666667 128h682.666666v85.333333H170.666667z" fill="#0374f3"> </path> </svg> </span> </div> <script src="https://api.111com.net/api/stat/hits?type=article&id=165034"></script> </div> <script src="https://assets.111com.net/js/stat.js?v=2024022101"></script> </body> </html>