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 相关文章推荐
Javascript模块化编程(一)模块的写法最佳实践
Jan 17 Javascript
Bootstrap实现默认导航栏效果
Sep 21 Javascript
利用js编写响应式侧边栏
Sep 17 Javascript
jquery实现输入框实时输入触发事件代码
Dec 21 Javascript
Angularjs通过指令监听ng-repeat渲染完成后执行脚本的方法
Dec 31 Javascript
js实现分页功能
May 24 Javascript
webpack学习教程之publicPath路径问题详解
Jun 17 Javascript
jQuery实现可编辑表格并生成json结果(实例代码)
Jul 19 jQuery
Vue入门之animate过渡动画效果
Apr 08 Javascript
vue项目开发中setTimeout等定时器的管理问题
Sep 13 Javascript
javascript判断一个变量是数组还是对象
Apr 10 Javascript
javascript设计模式 ? 代理模式原理与用法实例分析
Apr 16 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解答方法
2012/02/04 PHP
PHP中根据IP地址判断城市实现城市切换或跳转代码
2012/09/04 PHP
获取用户Ip地址通用方法与常见安全隐患(HTTP_X_FORWARDED_FOR)
2013/06/01 PHP
php导出excel格式数据问题
2014/03/11 PHP
轻松实现php文件上传功能
2017/02/17 PHP
Yii2下点击验证码的切换实例代码
2017/03/14 PHP
List the Codec Files on a Computer
2007/06/18 Javascript
javascript中最常用的继承模式 组合继承
2010/08/12 Javascript
基于Jquery制作的幻灯片图集效果打包下载
2011/02/12 Javascript
js获取客户端网卡的IP地址、MAC地址
2014/03/26 Javascript
离开当前页面前使用js判断条件提示是否要离开页面
2014/05/02 Javascript
jquery判断单选按钮radio是否选中的方法
2015/05/05 Javascript
深入浅析jQuery对象$.html
2016/08/22 Javascript
JS克隆,属性,数组,对象,函数实例分析
2016/11/26 Javascript
全面解析Node.js 8 重要功能和修复
2017/06/02 Javascript
微信小程序实现倒计时60s获取验证码
2020/04/17 Javascript
React/Redux应用使用Async/Await的方法
2017/11/16 Javascript
VueJs使用Amaze ui调整列表和内容页面
2017/11/30 Javascript
解决微信小程序防止无法回到主页的问题
2018/09/28 Javascript
微信小程序基础教程之worker线程的使用方法
2019/07/15 Javascript
Python更新数据库脚本两种方法及对比介绍
2017/07/27 Python
Python实现的生产者、消费者问题完整实例
2018/05/30 Python
分享vim python缩进等一些配置
2018/07/02 Python
django 外键model的互相读取方法
2018/12/15 Python
Python3 关于pycharm自动导入包快捷设置的方法
2019/01/16 Python
python将字符串list写入excel和txt的实例
2019/07/20 Python
Python实现子类调用父类的初始化实例
2020/03/12 Python
法拉利英国精品店:Ferraris Boutique UK
2019/07/20 全球购物
耐克奥地利官网:Nike奥地利
2019/08/16 全球购物
英语专业大学生求职简历的自我评价
2013/10/18 职场文书
实习单位接收函
2014/01/11 职场文书
光学与应用专业毕业生求职信
2014/09/01 职场文书
村党支部对照检查材料思想汇报
2014/09/28 职场文书
幼儿园开学温馨提示
2015/07/15 职场文书
关于Numpy之repeat、tile的用法总结
2021/06/02 Python
使用goaccess分析nginx日志的详细方法
2021/07/09 Servers