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 相关文章推荐
jQuery中的bind绑定事件与文本框改变事件的临时解决方法
Aug 13 Javascript
jquery等宽输出文字插件使用介绍
Sep 18 Javascript
浏览器页面区域大小的js获取方法
Sep 21 Javascript
js 异步操作回调函数如何控制执行顺序
Dec 24 Javascript
实践中学习AngularJS表单
Mar 21 Javascript
js实现密码强度检测【附示例】
Mar 30 Javascript
Jquery实时监听input value的实例
Jan 26 Javascript
js实现移动端导航点击自动滑动效果
Jul 18 Javascript
React 组件转 Vue 组件的命令写法
Feb 28 Javascript
微信小程序实现红包雨功能
Jul 11 Javascript
vue-cli脚手架搭建的项目去除eslint验证的方法
Sep 29 Javascript
vscode下的vue文件格式化问题
Nov 28 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的栏目导航程序
2006/10/09 PHP
echo(),print(),print_r()之间的区别?
2006/11/19 PHP
PHP线程的内存回收问题
2016/07/08 PHP
laravel框架如何设置公共头和公共尾
2019/10/22 PHP
php 实现简单的登录功能示例【基于thinkPHP框架】
2019/12/02 PHP
JavaScript之appendChild、insertBefore和insertAfter使用说明
2010/12/30 Javascript
基于jquery实现的文字向上跑动类似跑马灯的效果
2014/06/17 Javascript
完美兼容各大浏览器的jQuery插件实现图片切换特效
2014/12/12 Javascript
jQuery后代选择器用法实例
2014/12/23 Javascript
zepto与jquery的区别及zepto的不同使用8条小结
2016/07/28 Javascript
分享JS数组求和与求最大值的方法
2016/08/11 Javascript
BootStrap给table表格的每一行添加一个按钮事件
2017/09/07 Javascript
使用Javascript简单计算器
2018/11/17 Javascript
配置eslint规范项目代码风格
2019/03/11 Javascript
微信浏览器下拉黑边解决方案 wScroollFix
2020/01/21 Javascript
javascript canvas API内容整理
2020/02/16 Javascript
[01:01:24]DOTA2上海特级锦标赛A组败者赛 EHOME VS CDEC第三局
2016/02/25 DOTA
[30:00]完美世界DOTA2联赛PWL S2 Rebirth vs LBZS 第二场 11.28
2020/12/01 DOTA
python+mysql实现简单的web程序
2014/09/11 Python
Scrapy爬虫实例讲解_校花网
2017/10/23 Python
PyQt5主窗口动态加载Widget实例代码
2018/02/07 Python
python实现二叉查找树实例代码
2018/02/08 Python
python学习基础之循环import及import过程
2018/04/22 Python
python2.x实现人民币转大写人民币
2018/06/20 Python
Python数据结构之栈、队列及二叉树定义与用法浅析
2018/12/27 Python
python实现宿舍管理系统
2019/11/22 Python
Python趣味实例,实现一个简单的抽奖刮刮卡
2020/07/18 Python
用python计算文件的MD5值
2020/12/23 Python
python实现MySQL指定表增量同步数据到clickhouse的脚本
2021/02/26 Python
Melissa鞋马来西亚官方网站:MDreams马来西亚
2018/04/05 全球购物
时尚、社区、科技:SEVENSTORE
2019/04/26 全球购物
华为慧通笔试题
2016/04/22 面试题
商务经理岗位职责
2014/08/03 职场文书
2014年教师学期工作总结
2014/11/08 职场文书
幼儿园三八妇女节活动总结
2015/02/06 职场文书
2016年社区“6.26”禁毒日宣传活动总结
2016/04/05 职场文书