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


Posted in Javascript onAugust 14, 2018

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

1、单向绑定

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

① 所有数据只有一份

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

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

<!DOCTYPE html>
<html>
<head></head>
<body>
   <div id="app">
    {{message}}
   </div>
   <script>
    var app = new Vue({
       el: '#app',
       data: {
        message: ''
       }
    });
   </script>
</body>
</html>

2、双向绑定

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

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

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

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

v-model只能用在<input><select><textarea>这些表单元素上。

双向绑定的缺点:不知道data什么时候变了,也不知道是谁变了,变化后也不会通知,当然可以watch来监听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程序设计有所帮助。

Javascript 相关文章推荐
能说明你的Javascript技术很烂的五个原因分析
Oct 28 Javascript
Javascript判断对象是否相等实现代码
Mar 18 Javascript
jquery设置控件位置的方法
Aug 21 Javascript
客户端js性能优化小技巧整理
Nov 05 Javascript
js实现显示当前状态的导航效果代码
Aug 28 Javascript
js性能优化技巧
Nov 29 Javascript
详解MVC如何使用开源分页插件(shenniu.pager.js)
Dec 16 Javascript
r.js来合并压缩css文件的示例
Apr 26 Javascript
jQuery ajax仿Google自动提示SearchSuggess功能示例
Mar 28 jQuery
layui按条件隐藏表格列的实例
Sep 19 Javascript
vue实现权限控制路由(vue-router 动态添加路由)
Nov 04 Javascript
js实现页面导航层级指示效果
Aug 25 Javascript
微信小程序异步API为Promise简化异步编程的操作方法
Aug 14 #Javascript
jQuery实现的简单拖拽功能示例【测试可用】
Aug 14 #jQuery
jQuery+CSS实现的标签页效果示例【测试可用】
Aug 14 #jQuery
layui的table单击行勾选checkbox功能方法
Aug 14 #Javascript
解决layui 复选框等内置控件不显示的问题
Aug 14 #Javascript
深入浅析Node环境和浏览器的区别
Aug 14 #Javascript
解决JavaScript layui 下拉框不显示的问题
Aug 14 #Javascript
You might like
php设计模式 Interpreter(解释器模式)
2011/06/26 PHP
php基础设计模式大全(注册树模式、工厂模式、单列模式)
2015/08/31 PHP
PHP模板引擎Smarty自定义变量调解器用法
2016/04/11 PHP
php文件上传类完整实例
2016/05/14 PHP
jquery 查找新建元素代码
2010/07/06 Javascript
深入理解Javascript作用域与变量提升
2013/12/09 Javascript
Node.js中对通用模块的封装方法
2014/06/06 Javascript
jQuery原型属性和原型方法详解
2015/07/07 Javascript
如何解决IONIC页面底部被遮住无法向上滚动问题
2016/09/06 Javascript
微信小程序 五星评分(包括半颗星评分)实例代码
2016/12/14 Javascript
js实现增加数字显示的环形进度条效果
2017/02/05 Javascript
Bootstrap如何激活导航状态
2017/03/22 Javascript
基于Vue实现后台系统权限控制的示例代码
2017/08/29 Javascript
在Vue组件中使用 TypeScript的方法
2018/02/28 Javascript
细说webpack6 Babel的使用详解
2019/09/26 Javascript
解决layui laydate 时间控件一闪而过的问题
2019/09/28 Javascript
ZK中使用JS读取客户端txt文件内容问题
2019/11/07 Javascript
Vue事件处理原理及过程详解
2020/03/11 Javascript
vue项目页面嵌入代码块vue-prism-editor的实现
2020/10/30 Javascript
python获取文件后缀名及批量更新目录下文件后缀名的方法
2014/11/11 Python
Python实现的堆排序算法原理与用法实例分析
2017/11/22 Python
Python装饰器原理与用法分析
2018/04/30 Python
python实现学员管理系统
2019/02/26 Python
Django框架之登录后自定义跳转页面的实现方法
2019/07/18 Python
python3中eval函数用法使用简介
2019/08/02 Python
python实现堆排序的实例讲解
2020/02/21 Python
python利用google翻译方法实例(翻译字幕文件)
2020/09/21 Python
matplotlib grid()设置网格线外观的实现
2021/02/22 Python
matplotlib阶梯图的实现(step())
2021/03/02 Python
经济实惠的豪华背包和行李袋:Packs Project
2018/10/17 全球购物
职高毕业生自我鉴定
2013/10/21 职场文书
大学生两会精神学习心得体会
2014/03/10 职场文书
实习报告评语
2014/04/26 职场文书
安全知识竞赛主持词
2015/06/30 职场文书
MySQL 百万级数据的4种查询优化方式
2021/06/07 MySQL
table不让td文字溢出操作方法
2022/12/24 HTML / CSS