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

网络编程 JavaScript javascript类库 vue.js 分类:[default] 更新日期: 2017-05-08
这篇文章主要为大家详细介绍了最基础的vue.js双向绑定操作,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

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

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


> 本站内容系网友提交或本网编辑转载,其目的在于传递更多信息,并不代表本网赞同其观点和对其真实性负责。如涉及作品内容、版权和其它问题,请及时与本网联系,我们将在第一时间删除内容!

相关文章
  • 利用ASP.NETMVC+Bootstrap搭建个人博客之praise.js点赞特效插件(二)
    这篇文章主要介绍了利用ASP.NET和MVC+Bootstrap搭建个人博客之praise.js点赞特效插件二的相关资料,需要的朋友可以参考下在上篇文章给大家介绍了利用ASP.NET MVC和Bootstrap快速搭建响应式个人博客站(一).接下来给大家介绍如果做个点赞插件,一起通过本文学习吧! 1. 为啥要做这个点赞插件?    praise.js是一款小 ...
  • js选择器全面解析
    下面小编就为大家带来一篇js选择器全面解析.小编觉得挺不错的,现在就分享给大家,也给大家做个参考.一起跟随小编过来看看吧原生JS选择器有getElementById.getElementsByName.getElementsByTagName和getElementsByClassName这四个,下面我就一个一个介绍这四个选择器的用法. 1.getElemen ...
  • Swift中内置的集合类型学习笔记
    Swift中内置的集合类型学习笔记
    Swift中自带数组.set.字典三大集合类型,这里将学习过程中的基础的Swift中内置的集合类型学习笔记进行整理,需要的朋友可以参考下一.引言 Swift中提供了3种集合类型,Array数据类型,Set集合类型,Dictionary字典类型.Array用于存放一组有序的数据,数据角标从0开始一次递增:Set用于存放一组无序的数据,数据不可以重复:Dicti ...
  • Jquery和BigFileUpload实现大文件上传及进度条显示
    Jquery和BigFileUpload实现大文件上传及进度条显示
    这篇文章主要介绍了Jquery和BigFileUpload实现大文件上传及进度条显示的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下实现方法:用到了高山来客 的bigfileupload组件,用高山来客的方法,弹出一个模式窗口,然后不停刷新获取进度,始终觉得体验感不好,于是想到用jquery来实现无刷新进度显示,因为提交页面后, 不能让其刷新页面 ...
  • MongoDB的Master-Slave主从模式配置及主从复制要点解析
    主从复制是数据库运维中一种常见的备份方式,这里我们来看一下MongoDB的Master-Slave主从模式配置及主从复制要点解析,需要的朋友可以参考下主从配置mongodb的master-slave模式配置方式如下1.keyFile生成key_file openssl rand -base64 741 > mongo_key 将mongo_key 分别 ...
  • 解读ASP.NET5&MVC6系列教程1:ASP.NET5简介
    这篇文章主要介绍ASP.NET 5简介以及对各个版本号进行解释,ASP.NET 5中新的变化,需要的朋友可以参考下.ASP.NET 5简介 ASP.NET 5是一个跨时代的改写,所有的功能和模块都进行了独立拆分,做到了彻底解耦.为了这些改写,微软也是蛮 拼的,几乎把.NET Framwrok全部改写了一遍,形成了一个.NET Core的东西. 在.NET C ...
猜你喜欢