vue.js初级入门之最基础的双向绑定操作
发布日期:2021-08-24 11:59:59 浏览次数:1 分类:技术文章

本文共 882 字,大约阅读时间需要 2 分钟。

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

 

转载于:https://www.cnblogs.com/hssg/p/6225202.html

转载地址:https://blog.csdn.net/weixin_33819479/article/details/94574945 如侵犯您的版权,请留言回复原文章的地址,我们会给您删除此文章,给您带来不便请您谅解!

上一篇:Python学习日志(五)
下一篇:Spring(2)

发表评论

最新留言

表示我来过!
[***.240.166.169]2024年03月10日 04时56分17秒

关于作者

    喝酒易醉,品茶养心,人生如梦,品茶悟道,何以解忧?唯有杜康!
-- 愿君每日到此一游!

推荐文章

mysql数据库 quota_shell脚本抓取用户存储quota写道mysql并展现到grafana面板 2019-04-21
idea测试连接mysql报错08001_IDEA连接MySQL错误 2019-04-21
layui导入模板数据_layui表格-template模板的三种用法 2019-04-21
mysql分组显示行号_mysql 显示行号,以及分组排序 2019-04-21
MySQL常见的主从复制架构_如何搭建经典的MySQL 主从复制架构 2019-04-21
编写python程序、计算账户余额_小明有20w存款存在余额宝中,按余额宝年收益为3.35%计算,用Python编写程序计算,多少年后小明的存款达到30w?... 2019-04-21
python 公众号引流_公众号引流方法有哪些? 2019-04-21
java 减少内存_java中减少内存占用小技巧 2019-04-21
centos 7 mysql图形界面_centos7-vnstat图形界面搭建 2019-04-21
java 防渗透_「java、工程师工作经验怎么写」-看准网 2019-04-21
java中跳出当前循环怎么做_在java中,如何跳出当前的多重循环? 2019-04-21
java程序中执行maven_java – 将一个enviornment变量传递给Maven中的已执行进程 2019-04-21
java16下载_java lombok下载 2019-04-21
python 图像处理与识别书籍_Python图像处理之识别图像中的文字(实例讲解) 2019-04-21
java安全初始化_java安全编码指南之:声明和初始化 2019-04-21
java jstat gc_分析JVM GC及内存情况的方法 2019-04-21
php pclzip.lib.php,php使用pclzip类实现文件压缩的方法(附pclzip类下载地址) 2019-04-21
php dns更新,php_mzdns: 站群,大量域名 通过 dns 服务商 api 批量添加 ip 工具。你懂的~ 基于 mzphp2 框架。... 2019-04-21
jdk 1.8 java.policy,JDK1.8 导致系统报错:java.security.InvalidKeyException:illegal Key Size 2019-04-21
php linux权限,Linux权限详细介绍 2019-04-21