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 相关文章推荐
cloudgamer出品ImageZoom 图片放大效果
Apr 01 Javascript
Jquery从头学起第四讲 jquery入门教程
Aug 01 Javascript
收集的一些Array及String原型对象的扩展实现代码
Dec 05 Javascript
javascript游戏开发之《三国志曹操传》零部件开发(三)情景对话中仿打字机输出文字
Jan 23 Javascript
jQuery实现页面下拉100像素出现悬浮窗口的方法
Sep 05 Javascript
浅谈JS之iframe中的窗口
Sep 13 Javascript
原生javascript上传图片带进度条【实例分享】
Apr 06 Javascript
微信小程序 动态传参实例详解
Apr 27 Javascript
jQuery插件开发发送短信倒计时功能代码
May 09 jQuery
Ionic3 UI组件之Gallery Modal详解
Jun 07 Javascript
vue-cli开发时,关于ajax跨域的解决方法(推荐)
Feb 03 Javascript
Openlayers学习之地图比例尺控件
Sep 28 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中常用的字符串格式化函数总结
2014/11/19 PHP
深入理解PHP中的Streams工具
2015/07/03 PHP
PHP采用超长(超大)数字运算防止数字以科学计数法显示的方法
2016/04/01 PHP
PHP使用SWOOLE扩展实现定时同步 MySQL 数据
2017/04/09 PHP
ThinkPHP中create()方法自动验证实例
2017/04/26 PHP
php mysql PDO 查询操作的实例详解
2017/09/23 PHP
PHP钩子实现方法解析
2019/05/21 PHP
js 实现复制到粘贴板的功能代码
2010/05/13 Javascript
jquery一句话全选/取消全选
2011/03/01 Javascript
基于jquery实现控制经纬度显示地图与卫星
2013/05/20 Javascript
javascript与cookie 的问题详解
2013/11/11 Javascript
函数window.open实现关闭所有的子窗口
2015/08/03 Javascript
DOM事件阶段以及事件捕获与事件冒泡先后执行顺序(图文详解)
2015/08/18 Javascript
原生js配合cookie制作保存路径的拖拽
2015/12/29 Javascript
JQuery.validate在ie8下不支持的快速解决方法
2016/05/18 Javascript
JavaScript计算器网页版实现代码分享
2016/07/15 Javascript
angular.js和vue.js中实现函数去抖示例(debounce)
2018/01/18 Javascript
Javascript 关于基本类型和引用类型的个人理解
2019/11/01 Javascript
JS正则表达式常见函数与用法小结
2020/04/13 Javascript
JavaScript文档加载模式以及元素获取
2020/07/28 Javascript
[18:32]DOTA2 HEROS教学视频教你分分钟做大人-谜团
2014/06/12 DOTA
用Python逐行分析文件方法
2019/01/28 Python
Python正则表达式匹配日期与时间的方法
2019/07/07 Python
Python3 批量扫描端口的例子
2019/07/25 Python
Python 使用指定的网卡发送HTTP请求的实例
2019/08/21 Python
基于Python的接口自动化读写excel文件的方法
2021/01/15 Python
用css3实现转换过渡和动画效果
2020/03/13 HTML / CSS
医疗保健专业人士购物网站:Scrubs & Beyond
2017/02/08 全球购物
凯特王妃父母建立的派对用品网站:Party Pieces
2017/05/28 全球购物
美国价格实惠的在线眼镜网站:Zeelool
2020/12/25 全球购物
小学庆六一活动方案
2014/02/28 职场文书
爱耳日活动总结
2014/04/30 职场文书
电台编导求职信
2014/05/06 职场文书
2015年乡镇发展党员工作总结
2015/03/31 职场文书
Python使用Kubernetes API访问集群
2021/05/30 Python
小程序与后端Java接口交互实现HelloWorld入门
2021/07/09 Java/Android