Vue.js 2 渐进式前端框架的最佳学习方法

版权声明：本文版权属于汇智网，转载请声明。

Vue.js做为一个后起的前端框架，借鉴了Angular、React等现代前端框架/库的诸多特色，而且取得了至关不错的成绩。

vue.js 2

Vue.js的定位是一个渐进式框架，做者的说法是：

与其余框架的区别就是渐进式的想法，也就是Progressive——这个词在英文中定义是渐进，一步一步，不是说你必须一竿子把全部的东西都用上。

这或许是Vue.js受到愈来愈多关注的一个重要缘由：你只须要具有基本的HTML/JavaScript/CSS基础，就能够快速上手，让你用上这些现代Web开发中的先进技术来提升你的生产力：

响应式编程、声明式渲染、组件化开发、虚拟DOM、跨平台支持...

vue.js 2

尽管Vue.js缺乏使人眼前一亮的首创性前端开发理念，但它集中实现了最近几年前端领域技术大跃进的诸多新理念、新技术。或许你认为这些创新起源于Angular、React或者Knockout，但Vue.js能够无缝引导大量jQuery时代的前端工程师进入新的时代，这也是一个至关值得称赞的巨大的成果。

与Angular和React出自巨型公司不一样，Vue.js基本上是以做者（尤雨溪/Evan YOU）一己之力完成。这或许部分解释了渐进式这一思路的来源：软件的第一使用者是其做者。

所以Vue.js 2更适合我的或小型团队上手——你没有那么多的精力，一开始就考虑构建工具链、测试等诸多问题。你迫切须要的，是高效地生产出，你的用户须要的产品或服务。

不过渐进式意味着Vue.js没有局限于小型应用的开发：你同样可使用ES201五、使用构建工具链、使用集中状态管理这些来开发大规模项目。只是，Vue.js容许你把这些东西的学习和应用，在稍晚一些的时候引入，而不是必须先学习不少新东西才能上手。

1.Hello Vue.js 2

和其余现代前端框架同样，Vue.js也是以JavaScrip做为应用的入口，HTML只是提供一个渲染的锚点 ——这便利于Vue.js迁移到浏览器以外的其余平台，好比移动设备，或者服务器。

建立一个Vue.js的Hello World示例至关简单：

vue.js 2

一、引入vue.js库

<script src="lib/vue.js"></script>复制代码

这将暴露出一个全局类——Vue，你能够用它来建立一个Vue实例。

二、建立Vue实例

Vue是一个封装了响应式开发、模板编译等诸多特性的基础类，你经过提供一些
配置项，来建立一个实例：

var vm = new Vue({...});复制代码

一个常见的配置项是template，以相似HTML的语法来编制视图的结构：

var vm = new Vue({
  template: '<h1>Hello,Vue.js 2</h1>'
})复制代码

三、渲染Vue实例

要将Vue实例渲染到HTML页面中，采用Vue实例的$mount()方法，这个方法的名称，意味着渲染其实是将Vue实例生成的（虚拟）DOM子树，挂接到页面DOM中。

容易理解，$mount()方法须要指定一个定位用的DOM节点———锚点：

vm.$mount(anchor_element);复制代码

Vue.js会将渲染出的DOM子树，插入锚点元素以前（并最终删除这个锚点元素）。

可使用CSS选择符或者指定一个HTMLElement来声明锚点。例如，
下面的示例将Vue实例挂接到id为app的DOM对象处：

vm.$mount('#app');复制代码

2.使用隐式渲染

在前面的示例中，咱们使用Vue实例的$mount()方法来显式地启动Vue实例的渲染。

实际上，Vue.js也提供了一个实例化时的配置项el，来容许咱们隐式地启动
Vue实例的渲染。el用来声明目标渲染锚点，例如：

Vue({
  template: '<h1>Hello,Vue.js 2!</h1>',
  el: '#app'
})复制代码

工做原理

若是Vue.js检测到你指定了el配置项，将在内部自动地执行渲染 —— 这时你
再也不须要额外调用$mount()方法了：

vue.js 2

咱们看到的大部分Vue.js示例代码，一般都会采用这种隐式渲染的写法。不过我认为
在开始学习时，使用仪式感更强的$mount()方法，会让你更多一点理解Vue.js
的设计思想。

3.使用HTML模板

在建立Vue实例时，若是声明了el配置项，那么你也能够省略template
选项。这时候，Vue.js将提取锚点元素的HTML内容，作为模板。

dom template

咱们可使用单一的el配置项来建立Vue实例：

var vm = new Vue({el:'#app'});复制代码

在Vue.js中，这种模板被称为HTML模板，而使用template配置项书写的模板，被称为字符串模板。

工做原理

当Vue.js发现你提供的选项中没有template属性时，将提取el属性所指定的DOM节点的outerHTML内容做为模板内容。这相似于：

var vm = new Vue({
  el:'#app',
  template: document.querySelector('#app').outerHTML
})复制代码

Vue.js支持使用HML模板，可能一方面源于早期AugularJS的影响，另外一方面可能在于，在HTML文件中书写模板，仍是比在JavaScript中写字符串来的天然。

4.模型声明与绑定

模板的存在的惟一目的，是为了和数据绑定。

Vue.js在标准HTML语法基础上，增长了一些扩展的语法来声明数据的绑定。

data binding

数据绑定语法

在Vue.js的模板中，最多见的一种数据绑定语法，是使用模板引擎Mustache
的插值写法：{{}}。例如，下面的模板绑定了实例上下文中的name变量：

<h1>{{name}}</h1>复制代码

当Vue.js渲染此模板时，将使用实例数据上下文中的name变量值，来计算最终的渲染结果。

数据模型声明

在建立Vue实例时，使用data配置项来声明Vue实例的数据模型。

例如，下面的示例建立了一个具备初始模型{name:'Elthon John'}的Vue实例：

var vm = new Vue({
  template:'<h1>{{name}}</h1>',
  data:{
    name:'Elton John'
  },
  el:'#app'
})复制代码

Vue.js根据data配置项声明的初始模型构造数据上下文，进而和template配置项所声明的模板执行绑定，所以，上面示例的最终渲染结果是：<h1>Elton John</h1>。

5.模板的数据上下文

因为一般使用data配置项来声明Vue实例的数据模型，这容易让咱们误觉得
只有在data对象上声明的数据才能够与模板绑定。

固然不是这样，模板的数据上下文 = Vue实例对象。

当Vue.js建立一个Vue实例时，它会将data配置项的每一个根属性，（通过若干处理后）添加为实例的根属性。

data process

所以，实际上咱们能够在模板中绑定实例的任意属性。例如：下面的模板能够输出
$mount()方法的源代码：

<pre>{{$mount}}</pre>复制代码

既然如此，咱们为何须要使用data配置项来声明数据模型，而不是直接
在实例上设置数据模型呢？例如，下面的代码有什么问题呢？

var vm = new Vue({
  template:'<h1>{{name}}</h1>',
})
vm.name = 'WHOAMI';
vm.$mount('#app');复制代码

这关乎Vue.js的一个核心特性 ———— 响应式计算。

6.响应式计算机制

响应式计算是一种面向变化传播的编程范式，响应式计算模型主要包括两个部分：数据源和（依赖于数据源的）计算过程。当数据源发生变化时，将自动执行计算过程（好比视图的渲染过程）：

reactive computing

虽然响应式计算本质上是一种通用的编程范式，但这种模型最初就是为了简化交互
式用户界面的建立和实时系统动画的绘制而提出来的一种方法，它使得咱们只须要修改数据源就能够自动更新用户界面。

Vue.js内部实现了响应式计算框架，咱们在建立Vue实例时，在data配置项中声明的数据，会被自动转换为响应式数据源，当咱们修改这部分数据时，依赖于这部分数据的计算过程 ——例如界面渲染过程将自动被执行，所以用户界面也自动更新。

例如，对于下面的Vue实例：

new Vue({
  template:'<h1>{{counter}}</h1>',
  data: { counter: 0}
})复制代码

Vue.js将自动创建以下的响应式计算模型：

vue reactive computing

你看到，渲染计算依赖于Vue实例的counter，所以，当counter变化时，咱们将自动获得刷新的DOM视图。

7.交互行为声明

视图的做用是双向的，除了向用户展现信息，另外一方面的用途在于采集用户的输入。

和数据绑定相似，Vue.js经过扩展模板的HTML语法，来声明对用户交互事件
的监听。例如，下面的模板向Vue.js框架声明了对button元素的click
事件的监听：

<button v-on:click="counter=0">RESET</button>复制代码

容易注意到button元素的特殊属性：v-on:click。在Vue.js中，这种以v-为前缀的特殊的HTML属性，被称为指令，一般用来加强或改变所在HTML元素的行为。例如，v-on指令的做用，就是为宿主元素（在这里是button）
声明事件监听：

v-on expr

相似于Vue.js中的其余指令，v-on指令包括如下几个部分：

• 指令名称 —— v-开始、:或=以前的部分称为指令名称。在上图中，指令
  名称是v-on。
• 指令参数 —— :以后的部分称为指令的参数。在上图中，指令参数是：click。
  不是全部的Vue.js的指令都 须要参数，可是对于v-on指令而言，使用参数能够
  避免为不一样的事件实现不一样的指令，例如，咱们能够一样方式声明对hover事件的
  监听：v-on:hover="..."。
• 指令的值 —— =以后的字符串称为指令的值。在上图中，指令的值是：counter=0。
  不一样的指令，对指令值有不一样的解释。对于v-on指令，它的值表示当事件发生时
  应当执行的表达式。

指令值的执行上下文

模板的数据上下文是所属的Vue实例对象。容易理解，v-on指令的值表达式执行
的上下文也是所属的Vue实例对象，所以，在下面的示例中，当点击按钮后，Vue实例
的counter属性将复位为0：

new Vue({
  template:'<button v-on:click="counter=0">RESET</button>',
  data: { counter:123}
})复制代码

简化写法

为了不大量书写v-on:前缀，Vue.js容许咱们使用@来简化事件绑定的声明语法。
例如，下面的两种声明是彻底等效的：

<button v-on:click="test">TEST</button>
<button @click="test">TEST</button>复制代码

8.实例方法声明

若是须要在点击鼠标时，执行一个复杂的操做，那么采用单一的表达式
做为v-on指令值就不够了 —— 咱们须要将复杂的操做封装为Vue实例的
一个方法，而后将v-on指令的值设置为这个方法。

使用methods配置项来声明Vue实例的方法。当Vue.js建立一个Vue实例时，
会将methods配置项中声明的方法，挂接到Vue实例对象上：

method declare

实例方法能够直接经过实例对象调用，例如，对于上图中的vm实例：

vm.handler(); //正确复制代码

实例方法另外一个常见的用途，是将方法名声明为v-on指令的值，当事件
触发时将调用该实例对象上该名称的方法。例如，下面的代码为Vue实例声明
了reset方法，并将其名称做为模板中button元素的v-on指令的值：

new Vue({
  template: '<button v-on:click="reset">{{counter}}</button>',
  data: { counter: 0},
  methods: {
    reset: function(){ this.counter = 0; }
  }
})复制代码

方法函数体内的this对象

须要指出，在methods配置对象中声明的方法，其函数实现体内，this老是
指向所在的Vue实例。因此，能够在这些函数体内，直接访问经过data配置项声明
的数据，好比this.counter。

9.生命周期钩子

每一个 Vue 实例在被建立以前都要通过一系列的初始化过程。在这个过程当中，实例也会调用一些生命周期钩子（Lifecycle Hook） ，这就给咱们提供了执行自定义逻辑
的机会。

初始化钩子

初始化钩子包括beforeCreate和created。这两个钩子容许咱们在实例被渲染
到DOM以前执行一些初始化操做。因为DOM还未就绪，在初始化钩子里，不能访问DOM
对象，实例的$el属性 —— 宿主DOM对象 —— 也没有建立:

init hook

beforeCreate是最先被调用的钩子，这时Vue.js尚未构造响应式数据源，也没
有初始化实例的事件。

在created钩子里，咱们能够访问响应式数据、监听实例事件。不过尚未将虚拟
DOM渲染到文档DOM树。

DOM挂载钩子

挂载钩子包括beforeMount和mounted，是最常使用的钩子。这两个钩子容许咱们
在首次渲染*先后当即访问Vue实例。所以，若是咱们须要在首次渲染先后访问或修改
DOM对象（例如，经过实例的$el属性访问宿主元素），就应该使用这两个钩子：

mount hook

beforeMount钩子在模板编译完成后、首次渲染前执行。

在mounted钩子内能够自由地访问组件渲染后的DOM对象（this.$el）。这个钩子
常常被用于修改DOM、集成第三方库等操做。

更新钩子

更新钩子包括beforeUpdate和updated。每当实例须要从新渲染（例如模型发生变化等），
框架就会调用这两个钩子：

update hook

beforeUpdate钩子在模型数据变化以后、渲染周期开始以前执行。在这个钩子里咱们能够
在界面渲染前获取实例属性的最新值。

updated钩子在从新渲染完成后被调用。

DOM卸载钩子

DOM卸载钩子包括beforeDestroy和destroyed，当实例被从DOM树移除时执行。
这两个钩子容许咱们在实例销毁先后执行一些清理或统计分析的工做：

destruct hook

beforeDestroy钩子在实例被销毁（利用，经过调用实例的$destroy()方法）以前被调用。
在这个钩子里能够清理对响应式数据的监听。

destroyed钩子在实例被销毁以后被调用，此时实例已经不剩什么东西了:-( 也能够
在这个钩子里执行一些最后时刻的清理工做，或者向远程服务器通知实例被销毁的消息。

版权声明：本文版权属于汇智网，转载请声明。

另外，正在搞1元学习vue.js的活动，活动截止到10月10日，活动地址：http://weibo.com/5191023095/FnWcwcnjt。