最基础的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仿京东导航/仿淘宝商城左侧分类导航下拉菜单效果
Apr 24 Javascript
jQuery中:reset选择器用法实例
Jan 04 Javascript
javascript的tab切换原理与效果实现方法
Jan 10 Javascript
jquery实现标签上移、下移、置顶
Apr 26 Javascript
JS实现图片延迟加载并淡入淡出效果的简单方法
Aug 25 Javascript
微信网页授权并获取用户信息的方法
Jul 30 Javascript
vue使用ajax获取后台数据进行显示的示例
Aug 09 Javascript
原生js通过一行代码实现简易轮播图
Jun 05 Javascript
Vue3.x源码调试的实现方法
Oct 13 Javascript
Weex开发之地图篇的具体使用
Oct 16 Javascript
原生JavaScript实现拖动校验功能
Sep 29 Javascript
国庆节到了,利用JS实现一个生成国庆风头像的小工具 详解实现过程
Oct 05 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实现jQuery扩展函数
2009/10/30 PHP
php radio 单选框获取与保持值的实现代码
2010/05/15 PHP
PHP设计模式之迭代器模式
2016/06/17 PHP
JS+PHP实现用户输入数字后显示最大的值及所在位置
2017/06/19 PHP
Laravel框架搜索分页功能示例
2019/02/01 PHP
浅析PHP中json_encode与json_decode的区别
2020/07/15 PHP
JavaScript取得键盘按下方向键是哪个的方法
2015/08/04 Javascript
js获取元素的外链样式的简单实现方法
2016/06/06 Javascript
JS代码实现根据时间变换页面背景效果
2016/06/16 Javascript
Vue自定义指令介绍(2)
2016/12/08 Javascript
详解Vue.js之视图和数据的双向绑定(v-model)
2017/06/23 Javascript
Node.js 8 中的重要新特性
2017/06/28 Javascript
JS和jQuery通过this获取html标签中的属性值(实例代码)
2017/09/11 jQuery
基于es6三点运算符的使用方法(实例讲解)
2017/10/12 Javascript
vue-router路由懒加载和权限控制详解
2017/12/13 Javascript
简单学习5种处理Vue.js异常的方法
2019/06/17 Javascript
JS多个表单数据提交下的serialize()应用实例分析
2019/08/27 Javascript
使用layer.msg 时间设置不起作用的解决方法
2019/09/12 Javascript
vue使用swiper.js重叠轮播组建样式
2019/11/14 Javascript
Vue组件模板及组件互相引用代码实例
2020/03/11 Javascript
javascript设计模式 ? 备忘录模式原理与用法实例分析
2020/04/21 Javascript
Ubuntu下使用Python实现游戏制作中的切分图片功能
2018/03/30 Python
python3读取csv和xlsx文件的实例
2018/06/22 Python
python openpyxl使用方法详解
2019/07/18 Python
使用Python制作缩放自如的圣诞老人(圣诞树)
2019/12/25 Python
python3+opencv 使用灰度直方图来判断图片的亮暗操作
2020/06/02 Python
python使用dlib进行人脸检测和关键点的示例
2020/12/05 Python
澳大利亚电子产品购物网站:Dick Smith
2017/02/02 全球购物
Wiggle新西兰:自行车、跑步、游泳
2020/05/06 全球购物
计算机专业毕业生的自我评价
2013/11/18 职场文书
机械绘图员岗位职责
2013/11/19 职场文书
园林毕业生自我鉴定范文
2013/12/29 职场文书
求职信模板怎么做
2014/01/26 职场文书
公司搬迁通知
2015/04/20 职场文书
大学开学感言
2015/08/01 职场文书
2019年鼓励无偿献血倡议书
2019/09/17 职场文书