在线客服
扫描二维码
下载博学谷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死锁的有关问题。
8965
2019-07-25 13:07:30
Spring学习干货xml配置实例
今天，小编将分享大家在学习Spring框架的时候都会遇到的xml配置实例的干货讲解。大家都应该知道，Spring提供的最基本功能是，对象无需自己查找或者创建与它相关联的其他对象，由容器负责将需要相互协作的对象引用传递给各个对象。如果如果没有配置，Spring只是一个没有任何作用的空容器。因此Spring提供了使用XML文件配置和使用注解配置Bean的方式。
7730
2019-08-08 11:58:53
好用的jQuery瀑布流插件有哪些？
目前有Jquery响应式瀑布流布局插件、23行Jquery代码实现定位瀑布流布局特效、Jquery实现超酷时间轴特效、Aui-core实现模拟MVC单列表绝对定位版瀑布流js特效、Timeline时间轴Jquery特效等。
6127
2019-12-30 16:19:13
如何学习灵活运用Spring框架？
对程序员来讲，深入掌握并灵活运用Spring框架，是进军大厂、获得更好职业发展必须跨过的一道难关。那么，如何学习灵活运用Spring框架呢？本文将推荐你看看博学谷的《Spring高级之注解驱动开发详解》免费课程，该课程不仅脉络清晰，且兼具深度广度，下面我们来看一下课程详情。
5626
2020-07-13 11:31:04
微服务和分布式的区别什么？有什么特点？
微服务设计是为了不因为某个模块的升级和BUG影响现有的系统业务。微服务与分布式的细微差别是，微服务的应用不一定是分散在多个服务器上也可以是同一个服务器。分布式属于微服务，将模块拆分成一个独立的服务单元通过接口来实现数据的交互。分布式和微服的架构很相似，只是部署的方式不一样而已。
4932
2021-03-10 11:10:50
