在线客服
扫描二维码
下载博学谷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 测试原理介绍与应用
下一篇：
黑马头条项目实战学什么？
相关推荐 更多
十二个Java程序员必须掌握的Java开发框架
十二个Java程序员必须掌握的Java开发框架有哪些？Java 开发应用很广泛，所以程序员就业行业和方向也很多，随着互联的发展，人工智能、大数据、区块链，很多Java 程序员选择Java Web/后端开发。然而程序员之前的区别还是很大的，如果想要拿高薪，作为一个程序员需要不断学习。
11362
2019-04-10 00:08:24
有没有Java实战项目在线培训课程？
有没有Java实战项目在线培训课程？无论是自学过程中，还是在培训班学习，大家都应该注重实战项目的学习。毕竟学习Java最终目的是为了就业，拥有项目的实战经验才可以增加自己就业的机会。所以在学习Java的过程中，一定要多掌握几个实战项目。
11857
2019-08-08 11:56:27
Java程序员Spring框架面试题汇总附答案
Spring框架对于服务器端的开发大有帮助，无论从简单性、可测试性和松耦合性角度来说，Java应用都可以从Spring中受益。本文整理汇总了Java程序员在面试中关于Spring框架的面试题，涉及大量Spring框架知识点，不会做的话还可以参考答案，有面试需求的朋友赶紧来刷题吧！
8111
2019-11-21 15:51:56
2019年Spring Boot面试题集合附答案
相信所有Java开发者都认同，在微服务中，Spring Boot是最好的Java框架。Spring Boot自身最大的优势就是简化配置，可以说它真正实现了自动化配置。因此大家要想做好Java开发，给大家的建议就是成为Spring Boot的高手。本文为大家整理了2019年最新的Spring Boot面试题和答案，如果大家能够好好做一做这份面试题集合，相信面试一定手到擒来。
9599
2019-12-20 18:05:36
企业级租房网项目实战学什么？
程序员面试项目经验必不可少，企业级租房网实战项目要掌握，学习实现技术与思维融合，理解原理到应用积累经验，掌握Flutter开发的相关技能。企业级租房网实战学习租房网项目架构搭建、项目主界面骨架开发、项目首页开发、房源详情界面开发、登录/注册与个人中心页开发、个人信息与收藏功能开发、发布与上线等内容。
6779
2019-12-30 18:44:08
