Vue.js入门指南:前端开发必备技能

发表时间: 2020-12-25 17:03

1 Vue.js是什么

单独来讲,Vue.js被定义成一个用来开发Web界面的前端库,是个非常轻量级的工具。Vue.js本身具有响应式编程和组件化的特点。

所谓响应式编程,即为保持状态和视图的同步,这个在大多数前端MV*(MVC/MVVM/MVW)框架,不管是早期的backbone.js还是现在AngularJS都对这一特性进行了实现(也称之为数据绑定),但这几者的实现方式和使用方式都不相同。相比而言,Vue.js使用起来更为简单,也无需引入太多的新概念,声明实例new Vue({ data : data })后自然对data里面的数据进行了视图上的绑定。修改data的数据,视图中对应数据也会随之更改。

Vue.js的组件化理念和ReactJS异曲同工——“一切都是组件”,可以将任意封装好的代码注册成标签,例如:Vue.component('example', Example),可以在模板中以的形式调用。如果组件抽象得合理,这在很大程度上能减少重复开发,而且配合Vue.js的周边工具vue-loader,我们可以将一个组件的CSS、HTML和js都写在一个文件里,做到模块化的开发。

除此之外,Vue.js也可以和一些周边工具配合起来,例如vue-router和vue-resource,支持了路由和异步请求,这样就满足了开发单页面应用的基本条件。

2 为什么要用Vue.js

相比较Angularjs和ReactJS,Vue.js一直以轻量级,易上手被称道。MVVM的开发模式也使前端从原先的DOM操作中解放出来,我们不再需要在维护视图和数据的统一上花大量的时间,只需要关注于data的变化,代码变得更加容易维护。虽然社区和插件并没有一些老牌的开源项目那么丰富,但满足日常的开发是没有问题的。Vue.js 2.0也已经发布了beta版本,渲染层基于一个轻量级的 virtual-DOM 实现,在大多数场景下初始化渲染速度和内存消耗都提升了 2~4 倍。而阿里也开源了weex(可以理解成ReactJS-Native和ReacJS的关系),这也意味着Vue.js在移动端有了更多的可能性。

不过,对于为什么要选择使用一个框架,都需要建立在一定的项目基础上。如果脱离实际项目情况我们来谈某个框架的优劣,以及是否采用这种框架,我觉得是不够严谨的。

作为新兴的前端框架,Vue.js也抛弃了对IE8的支持,在移动端支持到Android 4.2+和iOS 7+。所以如果你在一家比较传统,还需要支持IE6的公司的话,你或许就可以考虑其他的解决方案了(或者说服你的老板)。另外,在传统的前后端混合(通过后端模板引擎渲染)的项目中,Vue.js也会受到一定的限制,Vue实例只能和后端模板文件混合在一起,获取的数据也需要依赖于后端的渲染,这在处理一些JSON对象和数组的时候会有些麻烦。

理想状态下,我们能直接在前后端分离的新项目中使用Vue.js最合适。这能最大程度上发挥Vue.js的优势和特性,熟悉后能极大的提升我们的开发效率以及代码的复用率。尤其是移动浏览器上,Vue.js压缩后只有18KB,而且没有其他的依赖。

3 Vue.js的Hello world

现在来看一下我们第一个Vue.js项目,按照传统,我们来写一个Hello World。

首先,引入Vue.js的方式有很多,你可以采用直接使用CDN,例如:

<script src='http://cdnjs.cloudflare.com/ajax/libs/vue/1.0.26/vue.min.js'></script>

也可以通过NPM进行安装:

npm install vue // 最新稳定版本

正确引入Vue.js之后,我们在HTML文件中的内容为:

<div id="app"> <h1>{{message}}</h1></div>

应用的js如下:

var vm = new Vue({ el : '#app', data: {  message : 'Hello world, I am Vue.js' }});

输出结果为:

这种形式类似于前端模板引擎,我们把js中message值替换了HTML模板中{{message}}这部分。

不过,如果仅仅是这样的例子,我相信你也不会有什么兴趣去使用Vue.js。根据上文对Vue.js的说明,我们继续写两个有关于它特性的例子。

第一个特性是数据绑定,我们可以在运行上述例子的浏览器控制台(console)环境中输入vm.message = 'Hello Vue.js',输出结果就变为了Hello Vue.js。也就说明vm.message和视图中的{{message}}是绑定的,我们无需手动去获取<h1>标签来修改里面的innerHTML。

同样,我们也可以绑定用户输入的数据,视图会随着用户的输入而变化,例如:

<div id="app"> <h1>Your input is {{ message }}</h1> <input type=”text” v-model=”message”></div>


vm.message的值会随着用户在input中输入的值的变化而变化,而无需我们手动去获取DOM元素的值再同步到js中。

第二个特性是组件化,简单来说我们可以自己定义HTML标签,并在模板中使用它,例如:

<div id="app"> <message content='Hello World'></message></div> <script type="text/javascript"> var Message = Vue.extend({  props : ['content'],  template : '<h1>{{content}}</h1>' }) Vue.component('message', Message); var vm = new Vue({  el : '#app', });</script>

我们在浏览器里最终看到的HTML结果为:

可以看到自定义的标签<message>被替换成了<h1>Hello World</h1>,当然,实际中的组件化远比示例复杂,我们会给组件添加参数及方法,使之能更好地被复用。

如果说这几个例子引起了你对Vue.js的兴趣的话,那接下来就将它真实地运用到生产环境中吧。


本文节选自《Vue.js 前端开发 快速入门与专业应用》

内容简介


本书主要介绍Vue.js的使用方法和在实际项目中的运用,它既可以在一个页面中单独使用,也可以将整站都构建成单页面应用。为了便于理解,本书会从传统的开发角度切入,先从数据渲染、事件绑定等方面介绍在Vue.js中的使用方法,然后渐进到Vue.js自身的特性,例如数据绑定、过滤器、指令以及最重要的组件部分。除了框架用法外,本书还介绍了和Vue.js相关的重要插件和构建工具,这些工具有助于帮助用户构建一个完整的单页面应用,而不仅仅是停留在个人DEMO阶段的试验品。而对于复杂项目,Vue.js也提供了对应的状态管理工具Vuex,降低项目的开发和维护成本。鉴于完稿前,Vue.js 2.0已正式发布完毕,本书也在相关用法上对比了1.0和2.0的区别,并补充了render函数和服务端渲染等特性。

本书适用于尚未接触过MVVM类前端框架的开发者,或者初步接触Vue.js的开发者,以及实际应用Vue.js开发项目的开发者。