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 相关文章推荐
lib.utf.js
Aug 21 Javascript
一个用js实现控制台控件的代码
Sep 04 Javascript
解析Jquery的LigerUI如何实现文件上传
Jul 09 Javascript
zTree插件之多选下拉菜单实例代码
Nov 06 Javascript
12 款 JS 代码测试必备工具(翻译)
Dec 13 Javascript
assert()函数用法总结(推荐)
Jan 25 Javascript
详解vue2.0的Element UI的表格table列时间戳格式化
Jun 13 Javascript
bootstrap daterangepicker汉化以及扩展功能
Jun 15 Javascript
JS计算输出100元钱买100只鸡问题的解决方法
Jan 04 Javascript
js针对图片加载失败的处理方法分析
Aug 24 Javascript
vue 微信分享回调iOS和安卓回调出现错误的解决
Sep 07 Javascript
js观察者模式的弹幕案例
Nov 23 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
php中关于普通表单多文件上传的处理方法
2011/03/25 PHP
浅析PHP中的UNICODE 编码与解码
2013/06/29 PHP
php实现文件下载(支持中文文名)
2013/12/04 PHP
是 WordPress 让 PHP 更流行了 而不是框架
2016/02/03 PHP
关于php支持的协议与封装协议总结(推荐)
2017/11/17 PHP
jquery插件制作 手风琴Panel效果实现
2012/08/17 Javascript
jquery实现智能感知连接外网搜索
2013/05/21 Javascript
jquery使用$(element).is()来判断获取的tagName
2014/08/24 Javascript
Jquery插件之Fancybox丰富的弹出层效果附源码下载
2015/12/02 Javascript
JS组件系列之MVVM组件构建自己的Vue组件
2017/04/28 Javascript
CentOS 安装NodeJS V8.0.0的方法
2017/06/15 NodeJs
JavaScript实现图片拖曳效果
2017/09/08 Javascript
js实现多个倒计时并行 js拼团倒计时
2019/02/25 Javascript
使用uni-app开发微信小程序的实现
2019/12/13 Javascript
原生JS实现烟花效果
2020/03/10 Javascript
基于Electron实现桌面应用开发代码实例
2020/07/07 Javascript
python中尾递归用法实例详解
2015/04/28 Python
深入解析Python的Tornado框架中内置的模板引擎
2016/07/11 Python
python中OrderedDict的使用方法详解
2017/05/05 Python
详解python3中zipfile模块用法
2018/06/18 Python
浅析python3字符串格式化format()函数的简单用法
2018/12/07 Python
Python 利用pydub库操作音频文件的方法
2019/01/09 Python
通过实例了解python property属性
2019/11/01 Python
python小白切忌乱用表达式
2020/05/29 Python
经验丰富程序员才知道的8种高级Python技巧
2020/07/27 Python
利用Python实现字幕挂载(把字幕文件与视频合并)思路详解
2020/10/21 Python
10 套华丽的CSS3 按钮小结
2012/10/03 HTML / CSS
详解CSS 3 中的 calc() 方法
2018/01/12 HTML / CSS
精灵市场:Pixie Market
2019/06/18 全球购物
TCP/IP中的TCP和IP分别承担什么责任
2012/04/21 面试题
安全生产管理合理化建议书
2014/03/12 职场文书
遵纪守法演讲稿
2014/05/23 职场文书
超搞笑婚前保证书
2015/05/08 职场文书
大学社团活动总结怎么写
2019/06/21 职场文书
golang 生成对应的数据表struct定义操作
2021/04/28 Golang
Python可视化学习之seaborn绘制矩阵图详解
2022/02/24 Python