我用vue做项目也有一段时间了，对于vue来说现在已经比较熟悉了，但是关于vue的入门文章却一直没有写过，那么今天就给大家带来几个案例，好好介绍下vue这种好用的小工具。
相关视频教程推荐：Vue.js 教程推荐：2018最新的5个vue.js视频教程精选
1.本篇文章使用的vue版本是2.4.2，可能会和新版有不一样的地方，大家要注意。
2.现在我也是假设您有基础的html,css,javascript的知识，也已经看过了官网的基本介绍，对vue有了一个大概的认识了，了解了常用的vue指令(v-model,v-show,v-if,v-for,v-on,v-bind等)！如果刚接触前端的话，你看着文章可能会蒙圈，建议先学习基础，掌握了基础知识再来看！
3.下面的实例，建议大家边看文章边动手做！这样思路会非常清晰，不易混乱！也不会觉得文章长（文章长是为了让大家看得更信息，贴了很多重复的代码，这些代码。html，css等完全可以跳过看）。如果只看文章，你可能未必会看完，因为文章我讲得比较细，比较长！
立即学习“前端免费学习笔记（深入）”；
4.这几个实例，摘自我自己的平常练习的项目，代码已经提到github上面了(vue-demos)。欢迎大家star。！
2.什么是vue
vue是现在很火的一个前端MVVM框架，它以数据驱动和组件化的思想构建，与angular和react并称前端三大框架。相比angular和react，vue更加轻巧、高性能、也很容易上手。大家也可以移步，看一下vue的介绍和核心功能官网介绍。简单粗暴的理解就是：用vue开发的时候，就是操作数据，然后vue就会处理，以数据驱动去改变DOM（不知道有没有理解错，理解错了指点下）。
下面就是一个最简单的说明例子
代码如下
htmljs new Vue({ el: '#app', data: { message: 'Hello Vue!' } }){{ message }}
相信也不难理解，就是input绑定了message这个值，然后在input修改的时候，message就改了，由于双向绑定，同时页面的html（{{ message }}）进行了修改！
mallcloud商城基于SpringBoot2.x、SpringCloud和SpringCloudAlibaba并采用前后端分离vue的企业级微服务敏捷开发系统架构。并引入组件化的思想实现高内聚低耦合，项目代码简洁注释丰富上手容易，适合学习和企业中使用。真正实现了基于RBAC、jwt和oauth2的无状态统一权限认证的解决方案，面向互联网设计同时适合B端和C端用户，支持CI/CD多环境部署，并提
好，下面进入例子学习！
3.选项卡
原理分析和实现
这个很简单，无非就是一个点击切换显示而已。但是大家也要实现。如果这个看明白了，再看下面两个！这个实例应该只是一个热身和熟悉的作用！
这个的步骤只有一步，原理也没什么。我直接在代码打注释，看了注释，大家就明白了！
完整代码
Title
html
css
javascript
vue
VUE的使用方法大概就是这些了，通过这个案列相信你也对vue有一些了解了，更多精彩请关注php中文网其它相关文章！
相关阅读：
