在线客服
扫描二维码
下载博学谷APP
扫描二维码
关注博学谷微信公众号
Vue作为Java开发者必须掌握的主流框架之一，以其轻巧、高性能等优势而备受青睐和追捧。本文将通过一个案例的详解，帮助大家顺利入门Vue，主要内容包括HTML模板、Vue渲染、双向绑定和事件处理。下面一起来学习吧~
1、HTML模板
在项目目录新建一个HTML文件01-demo.html
2、Vue渲染
01-demo.html内容如下：
首先通过 new Vue()来创建Vue实例，然后构造函数接收一个对象，对象中有一些属性：
el：是element的缩写，通过id选中要渲染的页面元素，本例中是一个div。
data：数据，数据是一个对象，里面有很多属性，都可以渲染到视图中。
name：这里指定了一个name属性。
页面中的h2 元素中，通过{{name}}的方式，来渲染刚刚定义的name属性。打开页面查看效果：
更神奇的在于，当你修改name属性时，页面会跟着变化：
3、双向绑定
对刚才的案例进行简单修改：
在data添加了新的属性： num
在页面中有一个input 元素，通过v-model 与num 进行绑定。
同时通过{{num}} 在页面输出
效果：
可以观察到，输入框的变化引起了data中的num的变化，同时页面输出也跟着变化。
input与num绑定，input的value值变化，影响到了data中的num值；
页面{{num}} 与数据num绑定，因此num值变化，引起了页面效果变化。
没有任何dom操作，这就是双向绑定的魅力。
4、事件处理
在页面添加一个按钮：
这里用v-on 指令绑定点击事件，而不是普通的onclick ，然后直接操作num
普通onclick是无法直接操作num的。
效果：
以上就是Vue入门案例详解，大家都看明白了吗？如果对上面的内容还有疑问，也没有关系。博学谷平台上有一对一为大家在线服务的专业讲师，大家报名学习以后，有任何问题都可以咨询在线老师。
— 申请免费试学名额 —
在职想转行提升，担心学不会？根据个人情况规划学习路线，闯关式自适应学习模式保证学习效果
讲师一对一辅导，在线答疑解惑，指导就业！
上一篇：
JUnit 测试原理介绍与应用
下一篇：
黑马头条项目实战学什么？
相关推荐 更多
spring框架中5种自动装配模式介绍
所谓的自动装配，就是讲Bean注入到其他Bean的Property中。其定义可以理解为：无须在Spring配置文件中描述JavaBean之间的依赖关系(如配置<property>、<constructor-arg>)。IOC容器会自动建立Javabean之间的关联关系。在Spring框架中共有5种自动装配模式。下面为大家分别说明。
14915
2019-07-11 17:31:19
Redis哨兵模式免费教程
哨兵(Sentinel)主要是为了解决在主从复制架构中从Redis宕机和主Redis宕机的情况。Redis-Sentinel是用于管理Redis集群：监控(Monitoring、提醒(Notification)、自动故障迁移(Automatic failover)。
6189
2019-12-04 11:26:30
2020年九大Java开发框架都有什么？
2020年九大Java开发框架，小编主要介绍Spring框架、Hibernate框架、Struts框架、Play框架、GoogleWebToolkit框架、Grails框架、Blade框架、JavaServerFaces框架、Vaadin框架九大框架，希望您可以多Java框架有更多的认识。
7200
2019-12-18 16:34:54
JavaEE实战项目手机快速登录讲解
今天要讲解的JavaEE实战项目是一款应用于健康管理机构的业务系统，它叫做传智健康，能够实现健康管理机构工作内容可视化、会员管理专业化、 健康评估数字化、健康干预流程化、知识库集成化，从而提高健康管理师的工作效率，加强与会员间的互动，增强管理者对健康管理机构运营情况的了解。下面我们来一起看看传智健康实战项目的移动端开发内容，主要包括了需求分析和手机快速登录。
7436
2020-04-22 12:06:56
Java架构师入门学习知识点汇总
很多程序员也经常说，没有经验找不到靠谱的公司，找不到靠谱的公司无法积累项目经验，工作中遇到了瓶颈，那么选择IT在职培训是不错的选择，目前的Java架构师课程不仅讲基础的理论知识，还进行项目实战，边学边积累经验，打破没有项目经验的恶循环。
6263
2020-10-19 14:34:32
