在线客服
扫描二维码
下载博学谷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 测试原理介绍与应用
下一篇：
黑马头条项目实战学什么？
相关推荐 更多
ServiceComb技术点教程哪里有？
博学谷的ServiceComb教程讲解概念及应用，ServiceComb 作为Apache开源组织下的一款微服务框架，其前身为华为云的微服务引擎 CSE云服务。学习后能够使用华为公司提供的微服务解决方案，解决微服务开发基本问题。
5597
2019-11-11 18:20:29
Apollo分布式部署学什么？掌握到什么程度？
Apollo分布式部署学习，程序员需要掌握配置中心的核心概念及使用场景，熟悉主流配置中心，掌握Apollo的工作原理、安装方法、项目管理、配置管理、集群管理、配置发布、生产环境的部署、灰度发布等核心知识点
3669
2020-02-20 15:54:59
优化MySQL数据库的方法有哪些？
优化MySQL数据库是一个很大的目标，要完成这一目标，我们首先要在分析并找出问题的基础上，展开优化的具体思路。因此我们可以先分析影响数据库性能的因素，一般是因为SQL查询速度慢，大量并发占满数据库连接数，CPU时用率过高，服务器硬件损坏，再或者是IO的问题。总的来说，针对不同的问题有与之对应的优化方法。下面我们可以通过一个项目实战，来具体聊聊优化MySQL数据库的方法。
3860
2020-04-10 16:01:52
Spring Cloud Alibaba微服务架构项目实战学习目标
Spring Cloud Alibaba微服务架构项目实战学习目标，通过电商项目实现理解SpringCloud 生态中主流技术的用法及原理、掌握微服务架构的实际开发方法、能够轻松投入项目开发工作，增强面试能力、握处理问题以及整体规划的思维方式。
6965
2020-06-16 11:16:31
Java线上课程值得买吗？
随着在线教育的发展，线上教学服务得到了进一步的完善，许多Java线上培训机构也如雨后春笋般冒了出来。一些学习者会在线上和线下培训之间犹豫不决，其实这两种培训方式本身没有什么优劣之分，各自都有自己的优缺点。至于，Java线上课程值得买吗？这个还得具体课程具体分析，下面以博学谷的Java在线就业班的课程为例，一起来看看课程值不值得买吧~
4991
2020-07-30 17:29:04
