当前位置:首页 > 日记 > 正文

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

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

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

首先在页面引入vue.js以及其他需要用到的或者可能要用到的插件(这里我多引用了bootstrap和jquery)

引用的时候需要注意文件的路径,准备工作这样基本就完成了,下面正式开始入门。

vue.js最重要的一个特点就是双向数据绑定也就是我们常说的MVVM:Model-View-ViewModel。我们要实现双向绑定首先当然要有“双向”,这里vue.js为我们提供了View层和Model层。View层就是在HTML中的代码,Model层则是Javascript代码。

下面是一个最基础的实例

代码中标注了view层与model层的开始位置和结束位置。

在view层中我们需要创建一个标签来显示model层中程序运行的结果,并且我们要为这个标签添加一个类或者ID,这个实例中我为一个div标签添加了一个名为app的ID。

model层中是我们要执行的代码,首先我们要创建一个新的Vue对象,对象中的el对应的值是我们之前在view层中创建的标签的类名或ID名(这个标签就是vue对象的作用范围),data对应的值又是一个对象,这个对象中的键是我们在view层中“{{}}”里的代码,而值则是显示的结果。

下图为运行后的结果

为了方便理解,在下面的代码中我修改了message的值并在data中新增了一个键值对

这是实例修改后的运行结果

对比实例1与实例2的代码和运行结果,相信大家可以更清楚的了解vue.js最基本的工作原理。

下面我们将对数据进行双向绑定

在这个实例中我们添加了一个input标签,这个input标签中有一个名为v-model的属性。我们可以清楚的看见v—model属性的值与我们在p标签“{{}}”内的值以及data中的键名一样,这就是我们实现双向绑定的关键。

下面是实例3运行的结果。

上边为p标签显示的内容,下边是input标签的内容,这时我们就可以通过修改input的内容来改变p标签里的内容,至此我们就完成了最基础的双向绑定操作。

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

相关文章

jQuery实现分页功能(含ajax请求、后

jQuery实现分页功能(含ajax请求、后

后台,数据,请求,分页,完整,需求分析  1)需要首页,末页功能2)有点击查看上一页,下一页功能3)页码到当前可视页码最后一页刷新页面实现思路也是分为三部分处理1)点击首页,末页直接显示第一页或者最后一页内容,当前页面为第1页或者最后一页。隐藏首…

PS怎么使用蜡笔滤镜处理?

PS怎么使用蜡笔滤镜处理?

滤镜,蜡笔,电脑软件,PS,ps中滤镜可以快速的处理图形,该怎么使用蜡笔滤镜处理图形呢?下面我们就来看看详细的教程。软件名称:Adobe Photoshop 8.0 中文完整绿色破解版软件大小:150.1MB更新时间:2015-11-041、打开一个PS的软件,然后打开一张需要使…

JavaScript无阻塞加载和defer、asy

JavaScript无阻塞加载和defer、asy

加载,详解,电脑软件,JavaScript,async,无阻塞加载把js放在head里,浏览器是怎么去执行它的呢,是按顺序加载还是并行加载呢?在旧的浏览器下,都是按照先后顺序来加载的,这就保证了加载的js依赖不会发生问题。但是少部分新的浏览器已经开始允许并行…

详谈JS中数组的迭代方法和归并方法

详谈JS中数组的迭代方法和归并方法

方法,数组,迭代,归并,电脑软件,数组的迭代方法ES5中为数组定义了5个迭代方法。每个方法都要接收两个参数:要在每一项上面运行的函数和(可选的)运行该函数的作用域对象---影响this的值。传入方法中的函数会介绍三个参数:1.数组项的值 2. 该项在…

ai怎么抠图并把位图转换成矢量图?

ai怎么抠图并把位图转换成矢量图?

抠图,矢量图,位图,转换成,并把,有一张图片想要抠图,该怎么抠图并将抠出的图形变成矢量图呢?下面我们就来看看详细的教程。软件名称:Adobe Illustrator CS6 (AI cs6) 精简绿色中文版(32位+64位)软件大小:205MB更新时间:2014-05-111、在AI中打开要…

Photoshop人像后期快速调出高品质

Photoshop人像后期快速调出高品质

教程,高品质,人像,后期,效果,ps人像后期教程:打造高品质证件照,不是所有人都拍写真,但每一个人都要拍证件照,然而这么简单的拍照题材,结果往往不尽人意,所以,这篇教程就教大家如何快速调出高品质的证件照效果,一起去看看吧!12 阅读全文教程结束,以上…

Excel表格中的MID函数怎么使用

Excel表格中的MID函数怎么使用

函数,表格,电脑软件,Excel,MID,  前面已经学习了其中的LEFT函数和RIGHT函数,今天我们就来学习截取字符串函数中的最后一个函数,也就是MID函数。以下是小编为您带来的关于Excel表格中的MID函数,希望对您有所帮助。Excel表格中的MID函数一、引…

PhotoShop采用不抠图方法一秒换背

PhotoShop采用不抠图方法一秒换背

抠图,方法,背景,电脑软件,PhotoShop,美国康奈尔大学与Adobe公司近日联合研发出了一种新的图像演算技术,该技术名为“Deep Photo Style Transfer”,它能够将一张照片的风格完全套用至另一张图片上,包括照片的色彩以及光线。通过深度…

如何解决Word2013中输入文字时覆盖

如何解决Word2013中输入文字时覆盖

文字,覆盖,输入文字,如何解决,电脑软件,  有时候在Word中我们输入的文字会直接覆盖之前那个地方的文字,而不是将这些文字依次后移。那么这是什么回事呢?以下是小编为您带来的关于Word2013中输入文字时覆盖旧文字,希望对您有所帮助。Word201…

PS绘制漂亮的蓝色圆形水晶按钮

PS绘制漂亮的蓝色圆形水晶按钮

绘制,按钮,水晶,蓝色,漂亮,通过ps软件强大的功能,只需要简单几步就可以让图文广告设计师现场设计出效果图,下面小编就为大家介绍PS绘制漂亮的蓝色圆形水晶按钮方法,来看看吧!步骤新建一个为maxthon,尺寸为500*500象素的画布,参数设置如图中央拉…

painter官方教程:如何借助corel pa

painter官方教程:如何借助corel pa

官方教程,电脑软件,painter,corel,不管您是美术家、商业插图画家,还是使用 painter 的摄影师,您都可以从调和笔画笔类别的使用中获得优势。调和笔允许您移动和混合图像上的现有颜色像素。借助调和笔,您可以使用水性或油性画笔模拟调和颜料,可以…

微信小程序 刷新上拉下拉不会断详

微信小程序 刷新上拉下拉不会断详

上拉,刷新,详细介绍,程序,电脑软件,微信小程序 上拉下拉不会断详细介绍最开始看到效果图,不错,第一想到的是用做的,添加浮动层,然后设置浮动层高度。其实不然,大牛是”enablePullDownRefresh”: “true”后,在页面添加遮掩层,并跟随底部滑动即可。…