让我们一起拆解VUE

本文章仅仅写给后端或者准备学习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插件

点击这里加入技术交流群,和大牛们一起交流技术心得