本文章仅仅写给后端或者准备学习vue的前端同学，大牛就忽略本文吧，因为本文只想无经验的同学快速入门vue。
什么是vue？
vue就是一个js库，并且无依赖别的js库，直接引入一个js文件就可以使用，你就当它跟jquery差不多就好。
版本选择？
现在vue分为vue1和vue2这两个大版本，然而现在有一些基于vue的框架还不兼容vue2，不过自己折腾可以随意选择一个的，反正文档还算挺详细。
为什么我们要使用vue？
其实跟jquery差不多，都是简化我们的开发。例如我们可以用vue实现像后端模板渲染的功能，可以更加便捷的绑定dom事件，可以把一些页面的组件打包重复使用。下面我们看看如何简单粗暴的使用vue。
看我们如何优雅的使用vue当成模板引擎
后端的同学想必挺清楚模板引擎是什么玩意了，而对于刚入门前端的同学来说，往往渲染页面会使用字符串拼接（非常不推荐）或者dom的clone来动态生成html，但是这两种方法写法都很麻烦，而vue却能十分优雅的实现模板渲染这种功能。
我们拿官方的例子来看看，如下图：
vue的模板渲染demo
我们可以看到，el里面跟jquery的元素选择标识符是一样的，这个就是选择要渲染的区域。data是一个字典，这个字典就是要填充的数据。而上面的html两个花括号里面一个变量名这种方式就是输出变量值。
也许你会说，判断，循环输出这些咋办，别担心，vue都提供了。看：
if判断
循环输出
当然还有更强悍的功能，大伙自行查阅官方文档啦。
优雅的事件绑定
其实就是用特定语法代替了直接在html标签写onclick='xxx'这些，也不用jquery写$("#xxx").on("click", function(){});，反正用法很简单，老规矩，上官方例子：
事件绑定demo
有点难理解的组件
首先，我们看看官方例子：
组件
一眼看过去，相当于宏定义嘛，我们声明一种标签是代表一串特定的html字符串。（我们先这样子将就的用着，其实这组件背后还涉及值的传递，函数绑定这些，但是我们入门，先不管）
单文件的方式使用路由
让我们思考一下，为什么要有路由这东西呢？我们一向的做法是一个页面一个URL，页面切换的时候跳到新的地址。后来，由于请求新页面太耗费流量，工程师们想到使用ajax拉取数据，局部刷新页面，这种方法大大节省了流量（当然这种做法对seo不友好，这里就不展开说了，想了解更多可以持续关注我）。vue的路由其实也是为了页面切换不用重新整个页面重新加载，我们来看看例子：
路由例子js部分
路由例子html部分
可以看到使用vue之后，我们写的代码是十分好维护的。
入门到此为止了
看到这句话，大家不要失望。上面这些粗暴的使用vue其实可以让我们充分体会到vue的美，特别是小应用小团队，用这些基本上足够应付了。也许你也听过vue还会配合webpack这些打包工具，但是我只想说简单的又能提高我们的开发效率就是完美的。
那接下来，我们应该如何进一步学习vue呢？
我相信很多看到这里的热爱技术的同学不会满足这一点点知识的，那好吧，班门弄斧一下，给出几点方向。
- 学会用webpack打包组件，并且可以使用打包后的组件
- 了解一些基于vue的框架，例如Element UI，iView这些UI框架
- 组件通信，异步组件的用法
- 服务器渲染
- 学会开发vue插件
欢迎关注我的简书，以后会原创更多虽然简单粗暴，但是又能快速理解流行技术的文章。
网友评论