最基础的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 相关文章推荐
网页javascript精华代码集
Jan 24 Javascript
基于JQuery实现CheckBox全选全不选
Jun 27 Javascript
javascrip关于继承的小例子
May 10 Javascript
js内存泄露的几种情况详细探讨
May 31 Javascript
javascript如何判断输入的url是否正确
Apr 11 Javascript
Extjs 4.x 得到form CheckBox 复选框的值
May 04 Javascript
jquery实现上传文件大小类型的验证例子(推荐)
Jun 25 Javascript
Vue v2.5 调整和更新不完全问题
Oct 24 Javascript
vue.js+ElementUI实现进度条提示密码强度效果
Jan 18 Javascript
vue项目配置同一局域网可使用ip访问的操作
Oct 23 Javascript
Vue h函数的使用详解
Feb 18 Vue.js
JavaScript中的LHS和RHS分析详情
Apr 06 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
laravel 实现根据字段不同值做不同查询
2019/10/23 PHP
用javascript控制iframe滚动的代码
2007/04/10 Javascript
javascript优先加载笔记代码
2008/09/30 Javascript
jQuery(1.3.2) 7行代码搞定跟随屏幕滚动的层
2009/05/21 Javascript
JavaScript NodeTree导航栏(菜单项JSON类型/自制)
2013/02/01 Javascript
javascript禁用键盘功能键让右击及其他键无效
2013/10/09 Javascript
jquery将一个表单序列化为一个对象的方法
2013/12/02 Javascript
javascript模拟订火车票和退票示例
2014/04/24 Javascript
用js闭包的方法实现多点标注冒泡示例
2014/05/29 Javascript
js中unicode转码方法详解
2015/10/09 Javascript
基于jQuery实现复选框是否选中进行答题提示
2015/12/10 Javascript
jQuery 限制输入字符串长度
2016/06/20 Javascript
值得分享的JavaScript实现图片轮播组件
2016/11/21 Javascript
Jquery EasyUI Datagrid右键菜单实现方法
2016/12/30 Javascript
鼠标拖动改变DIV等网页元素的大小的实现方法
2017/07/06 Javascript
JS实现用特殊符号替换字符串的中间部分区域的实例代码
2018/07/24 Javascript
vuex实现数据状态持久化
2019/11/11 Javascript
vue实现图片上传功能
2020/05/28 Javascript
pycharm 使用心得(八)如何调用另一文件中的函数
2014/06/06 Python
使用Python & Flask 实现RESTful Web API的实例
2017/09/19 Python
python监控键盘输入实例代码
2018/02/09 Python
python3操作微信itchat实现发送图片
2018/02/24 Python
解决python写入mysql中datetime类型遇到的问题
2018/06/21 Python
Python写一个基于MD5的文件监听程序
2019/03/11 Python
浅谈tensorflow中张量的提取值和赋值
2020/01/19 Python
Python关于反射的实例代码分享
2020/02/20 Python
python 实现控制鼠标键盘
2020/11/27 Python
标记环网Toke Ring IEEE802.5
2014/05/26 面试题
如何开启linux的ssh服务
2015/02/14 面试题
竞选部门副经理的自荐书范文
2014/02/11 职场文书
工商治理实习生的自我评价分享
2014/02/20 职场文书
婚纱摄影师求职信范文
2014/04/17 职场文书
2014向国旗敬礼网上签名活动总结
2014/09/27 职场文书
交通事故委托书范本
2014/09/28 职场文书
2015年卫生局工作总结
2015/07/24 职场文书
FP-growth算法发现频繁项集——构建FP树
2021/06/24 Python