前端开发之认识Vue.js

近几年，互联网前端行业发展得依旧迅猛，涌现出了很多优秀的框架，同时这些框架也正在逐渐改变我们传统的前端开发方式。Google的AngularJS、Facebook的ReactJS，这些前端MVC（MVVM）框架的出现和组件化开发的普及和规范化，既改变了原有的开发思维和方式，也使得前端开发者加快脚步，更新自己的知识结构。2014年2月，原Google员工尤雨溪公开发布了自己的前端库——Vue.js，时至今日，Vue.js在GitHub上已经收获超过30000star，而且也有越来越多的开发者在实际的生产环境中运用它。

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开发项目的开发者。

本文转载自异步社区。

原文链接：https://www.epubit.com/articleDetails?id=NC7E3EF931C000001A44718503BA794C0