在线客服
扫描二维码
下载博学谷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开发中各个阶段常用的工具汇总。
7309
2019-08-05 18:11:56
零基础学Java需要多长时间？学到什么程度可以就业？
零基础学Java需要多长时间？零基础的小白从入门Java到精通最快也要半年，这还是在报了培训班的情况下。因此对于初学者来说，选择一个IT培训机构很重要。好的Java培训机构的课程，由入门案例到详细工作原理及特性的解析，循序渐进，逐步深入。下面讲讲Java学到什么程度可以就业。
5718
2019-09-10 15:11:21
Java安全框架Shiro基础知识学什么？
Java安全框架Shiro基础需要掌握Shiro最新版本基础，还要掌握Shiro框架的三大核心组件Subject、SecurityManager、Realms及其工作流程；学习Shiro主要功能：认证、授权、加密；Shiro Web集成、Shiro与SpringBoot整合使用；深度剖析Shiro框架的核心原理，让学习者掌握执行逻辑。
5427
2020-03-12 10:07:15
基于Java的游戏设计之植物大战僵尸
植物大战僵尸这款游戏相信大家或多或少都玩过，那么大家有没有想过自己尝试着做一下植物大战僵尸的游戏设计呢。本文将基于Java语言为大家展示如何开发出植物大战僵尸游戏的简易版本，主要内容包括规则、对象、功能和背景音乐的相关内容设计，如果大家对此有兴趣的话，就接着看下去吧！
7864
2020-04-20 11:59:20
Java在线开发社交类项目
随着一大批移动应用的爆发，社交应用作为最直接有效的交流方式，是人们碎片化时间使用频率最高的工具。博学谷紧跟当下行业需求，深度调研社交软件主体功能，采用一线开发人员开发了完整真实的社交项目《探花交友》，以应用于Java学科项目实战课程教学。下面我们就来一起看看这个Java在线开发的社交类项目吧！
5762
2020-07-29 15:26:00
