最基础的vue.js双向绑定操作


Posted in Javascript onAugust 23, 2017

vue.js初级入门之最基础的双向绑定操作,具体内容如下

首先在页面引入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标签里的内容,至此我们就完成了最基础的双向绑定操作。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
基于jQuery的弹出警告对话框美化插件(警告,确认和提示)
Jun 10 Javascript
一个简单的Ext.XTemplate的实例代码
Mar 18 Javascript
jQuery+Ajax实现限制查询间隔的方法
Jun 07 Javascript
AngularJS+Bootstrap实现多文件上传与管理
Nov 08 Javascript
Javascript使用function创建类的两种方法(推荐)
Nov 19 Javascript
原生和jQuery的ajax用法详解
Jan 23 Javascript
解决vue router使用 history 模式刷新后404问题
Jul 19 Javascript
图片懒加载imgLazyLoading.js使用详解
Sep 15 Javascript
基于Vue-Cli 打包自动生成/抽离相关配置文件的实现方法
Dec 09 Javascript
js form表单input框限制20个字符,10个汉字代码实例
Apr 12 Javascript
vue登录注册实例详解
Sep 14 Javascript
Vue实现导航栏的显示开关控制
Nov 01 Javascript
vue组件实现文字居中对齐的方法
Aug 23 #Javascript
React+react-dropzone+node.js实现图片上传的示例代码
Aug 23 #Javascript
深入理解React中何时使用箭头函数
Aug 23 #Javascript
自定义类似于jQuery UI Selectable 的Vue指令v-selectable
Aug 23 #jQuery
JS数组交集、并集、差集的示例代码
Aug 23 #Javascript
关于Vue实现组件信息的缓存问题
Aug 23 #Javascript
详解webpack进阶之loader篇
Aug 23 #Javascript
You might like
PHP简单选择排序算法实例
2015/01/26 PHP
PHP开发注意事项总结
2015/02/04 PHP
thinkphp下MySQL数据库读写分离代码剖析
2017/04/18 PHP
JavaScript中的几个关键概念的理解-原型链的构建
2011/05/12 Javascript
jQuery语法总结和注意事项小结
2012/11/11 Javascript
将光标定位于输入框最右侧实现代码
2012/12/04 Javascript
jQuery表格插件ParamQuery简单使用方法示例
2013/12/05 Javascript
ExtJS4如何自动生成控制grid的列显示、隐藏的checkbox
2014/05/02 Javascript
点击标签切换和自动切换DIV选项卡
2014/08/10 Javascript
基于Angularjs实现分页功能
2016/05/30 Javascript
AngularJS  ng-table插件设置排序
2016/09/21 Javascript
mescroll.js上拉加载下拉刷新组件使用详解
2017/11/13 Javascript
VSCode 配置React Native开发环境的方法
2017/12/27 Javascript
Vue二次封装axios为插件使用详解
2018/05/21 Javascript
JS获取月的第几周和年的第几周实例代码
2018/12/05 Javascript
vue通过过滤器实现数据格式化
2020/07/20 Javascript
使用Vue-scroller页面input框不能触发滑动的问题及解决方法
2020/08/08 Javascript
[01:18]DOTA2超级联赛专访hanci ForLove淘汰感言曝光
2013/06/04 DOTA
[01:07]DOTA2次级职业联赛 - Fpb战队宣传片
2014/12/01 DOTA
[45:06]完美世界DOTA2联赛PWL S2 Magma vs InkIce 第二场 11.28
2020/12/02 DOTA
Python中利用Scipy包的SIFT方法进行图片识别的实例教程
2016/06/03 Python
Python线程指南详细介绍
2017/01/05 Python
Python实现查找数组中任意第k大的数字算法示例
2019/01/23 Python
python制作简单五子棋游戏
2019/06/18 Python
PyQt5 对图片进行缩放的实例
2019/06/18 Python
Python爬虫防封ip的一些技巧
2020/08/06 Python
电气工程和自动化自荐信范文
2013/12/25 职场文书
关键在于落实心得体会
2014/09/03 职场文书
课程设计的心得体会
2014/09/03 职场文书
2014年行政后勤工作总结
2014/12/06 职场文书
指导老师鉴定意见
2015/06/05 职场文书
导游词之上海杜莎夫人蜡像馆
2019/11/22 职场文书
教你使用TensorFlow2识别验证码
2021/06/11 Python
利用Python将list列表写入文件并读取的方法汇总
2022/03/25 Python
python区块链实现简版工作量证明
2022/05/25 Python
html5+实现plus.io进行拍照和图片等获取
2022/06/01 HTML / CSS