开发者社区> 行者武松> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

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层中“{{}}”里的代码,而值则是显示的结果。

下图为运行后的结果

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

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

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

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

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

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

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


作者:黄色闪光

来源:51CTO

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
D3.js 力导向图的显示优化
我们用 D3.js 力导向图来对图数据库的数据关系进行分析,其节点和关系线直观地体现出图数据库的数据关系,并且还可以关联相对应的图数据库语句完成拓展查询。此外,本文还讲解了如何优化新增节点和多边关系的显示
1201 0
ExtJs十三(ExtJs Mvc图片管理之三)
现在要完成目录的编辑操作。因为目录的编辑只是改变目录名称,因而使用Cellediting插件就可完成工作。要完成这个不难,首先在目录树的定义中加入以下语句隐藏列标题: hideHeaders: true, 接着添加plugins配置项来配置CellEditing插件。
940 0
ExtJS入门之一 类与继承
在项目中使用ExtJS已经有一段时间了, 对于这个庞大的Script类库有了一定的了解, 在Ext的使用上也有了一定的经验, 现将这些经验做一下总结, 作为一个入门材料给大家分享。 对于Ext库, 不要被它的庞大所吓倒, 只要静下心来看SDK, 多做一些练习, 还是很容易上手的。
760 0
+关注
行者武松
杀人者,打虎武松也。
文章
问答
文章排行榜
最热
最新
相关电子书
更多
Vue.js 在前端服务化上的探索与实践
立即下载
工程师职业发展之我见
立即下载
Ghost-Telephonist-Link-Hijack-Exploitations-In-4G-LTE-CS-Fallback
立即下载