Vue.js双向绑定操作技巧(初级入门)


Posted in Javascript onDecember 27, 2016

首先在页面引入vue.js以及其他需要用到的或者可能要用到的插件(这里我多引用了bootstrap和jquery)

Vue.js双向绑定操作技巧(初级入门)

引用的时候需要注意文件的路径,准备工作这样基本就完成了,下面正式开始入门。

vue.js最重要的一个特点就是双向数据绑定也就是我们常说的MVVM:Model-View-ViewModel。我们要实现双向绑定首先当然要有“双向”,这里vue.js为我们提供了View层和Model层。View层就是在HTML中的代码,Model层则是Javascript代码。

下面是一个最基础的实例

Vue.js双向绑定操作技巧(初级入门)

代码中标注了view层与model层的开始位置和结束位置。

在view层中我们需要创建一个标签来显示model层中程序运行的结果,并且我们要为这个标签添加一个类或者ID,这个实例中我为一个div标签添加了一个名为app的ID。

model层中是我们要执行的代码,首先我们要创建一个新的Vue对象,对象中的el对应的值是我们之前在view层中创建的标签的类名或ID名(这个标签就是vue对象的作用范围),data对应的值又是一个对象,这个对象中的键是我们在view层中“{{}}”里的代码,而值则是显示的结果。

下图为运行后的结果

Vue.js双向绑定操作技巧(初级入门)

为了方便理解,在下面的代码中我修改了message的值并在data中新增了一个键值对

Vue.js双向绑定操作技巧(初级入门)

这是实例修改后的运行结果

Vue.js双向绑定操作技巧(初级入门)

对比实例1与实例2的代码和运行结果,相信大家可以更清楚的了解vue.js最基本的工作原理。

下面我们将对数据进行双向绑定

Vue.js双向绑定操作技巧(初级入门)

在这个实例中我们添加了一个input标签,这个input标签中有一个名为v-model的属性。我们可以清楚的看见v—model属性的值与我们在p标签“{{}}”内的值以及data中的键名一样,这就是我们实现双向绑定的关键。

下面是实例3运行的结果。

Vue.js双向绑定操作技巧(初级入门)

上边为p标签显示的内容,下边是input标签的内容,这时我们就可以通过修改input的内容来改变p标签里的内容,至此我们就完成了最基础的双向绑定操作。

以上所述是小编给大家介绍的Vue.js双向绑定操作技巧(初级入门),希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
通过action传过来的值在option获取进行验证的方法
Nov 14 Javascript
js取消单选按钮选中示例代码
Nov 14 Javascript
JS实现可缩放、拖动、关闭和最小化的浮动窗口完整实例
Mar 04 Javascript
jQuery事件绑定on()、bind()与delegate() 方法详解
Jun 03 Javascript
全面解析jQuery $(document).ready()和JavaScript onload事件
Jun 08 Javascript
使用JavaScript判断手机浏览器是横屏还是竖屏问题
Aug 02 Javascript
从零开始学习Node.js系列教程三:图片上传和显示方法示例
Apr 13 Javascript
浅谈angular4生命周期钩子
Sep 05 Javascript
Vue实现数据请求拦截
Oct 23 Javascript
微信小程序canvas实现签名功能
Jan 19 Javascript
Handtrack.js库实现实时监测手部运动(推荐)
Feb 08 Javascript
36个正则表达式(开发效率提高80%)
Nov 17 Javascript
JS实现页面中所有img对象添加onclick事件及新窗口查看图片的方法
Dec 27 #Javascript
JS使用正则实现去掉字符串左右空格的方法
Dec 27 #Javascript
js使用Replace结合正则替换重复出现的字符串功能示例
Dec 27 #Javascript
easyUI实现类似搜索框关键词自动提示功能示例代码
Dec 27 #Javascript
jQuery获取选中单选按钮radio的值
Dec 27 #Javascript
JS前向后瞻正则表达式定义与用法示例
Dec 27 #Javascript
jQuery中弹出iframe内嵌页面元素到父页面并全屏化的实例代码
Dec 27 #Javascript
You might like
使用Codeigniter重写insert的方法(推荐)
2017/03/23 PHP
php获取数据库结果集方法(推荐)
2017/06/01 PHP
PHP设计模式之工厂模式定义与用法详解
2018/04/03 PHP
PHP实现二维数组中的查找算法小结
2018/06/09 PHP
Javascript优化技巧(文件瘦身篇)
2008/01/28 Javascript
jquery 屏蔽一个区域内的所有元素,禁止输入
2009/10/22 Javascript
修改jQuery Validation里默认的验证方法
2012/02/14 Javascript
js 验证密码强弱的小例子
2013/03/21 Javascript
Windows系统中安装nodejs图文教程
2015/02/28 NodeJs
基于jquery实现鼠标左右拖动滑块滑动附源码下载
2015/12/23 Javascript
JS基于HTML5的canvas标签实现炫目的色相球动画效果实例
2016/08/24 Javascript
JavaScript“尽快失败”的原则实例详解
2016/10/08 Javascript
基于Three.js插件制作360度全景图
2016/11/29 Javascript
jQuery.cookie.js实现记录最近浏览过的商品功能示例
2017/01/23 Javascript
JS实现最简单的冒泡排序算法
2017/02/15 Javascript
VUE元素的隐藏和显示(v-show指令)
2017/06/23 Javascript
bootstrap下拉框动态赋值方法
2018/08/10 Javascript
运用js实现图层拖拽的功能
2019/05/24 Javascript
百度小程序之间的页面通信过程详解
2019/07/18 Javascript
layui使用form表单实现post请求页面跳转的方法
2019/09/14 Javascript
layui table表格数据的新增,修改,删除,查询,双击获取行数据方式
2019/11/14 Javascript
Vue+Node实现商品列表的分页、排序、筛选,添加购物车功能详解
2019/12/07 Javascript
JS实现电商商品展示放大镜特效
2020/01/07 Javascript
[36:20]完美世界DOTA2联赛PWL S3 access vs Rebirth 第一场 12.17
2020/12/18 DOTA
Python Web框架Flask信号机制(signals)介绍
2015/01/01 Python
python网络编程之数据传输UDP实例分析
2015/05/20 Python
Django后台管理系统的图文使用教学
2020/01/20 Python
旧时光糖果:Old Time Candy
2018/02/05 全球购物
英国文胸专家:AmpleBosom.com
2018/02/06 全球购物
您在慕尼黑的跑步商店:Lauf-bar
2019/10/11 全球购物
父母对孩子说的话
2014/04/12 职场文书
2014年基层党建工作总结
2014/11/11 职场文书
教师先进事迹材料
2014/12/16 职场文书
党支部承诺书
2015/01/20 职场文书
2016年入党心得体会范文
2016/01/23 职场文书
读《推着妈妈去旅行》有感1500字
2019/10/15 职场文书