前端培训-中级阶段（33）- Vue 介绍、实例

前端最基础的就是 HTML+CSS+Javascript。掌握了这三门技术就算入门，但也仅仅是入门，如今前端开发的定义已经远远不止这些。前端小课堂（HTML/CSS/JS），本着提高技术水平，打牢基础知识的中心思想，咱们开课啦（每周四）。

Vue 简介

Vue (读音 /vjuː/，相似于view) 是一套用于构建用户界面的 渐进式框架 。与其它大型框架不一样的是，Vue 被设计为能够 自底向上逐层应用 。Vue 的核心库只关注视图层，不只易于上手，还便于与第三方库或既有项目整合。另外一方面，当与 现代化的工具链 以及各类 支持类库 结合使用时，Vue 也彻底可以为复杂的单页应用提供驱动。

Vue 兼容性

Vue 不支持 IE8 及如下版本，由于 Vue 使用了 IE8 没法模拟的 ECMAScript 5 特性 ( Object.defineProperty )

Vue 相关术语

• 完整版：同时包含 编译器 和 运行时环境 的版本。
• 编译器：用来将模板字符串编译成为 JavaScript 渲染函数的代码。
• 运行时：用来建立 Vue 实例、渲染并处理虚拟 DOM 等的代码。基本上就是除去编译器的其它一切。
• UMD：UMD 版本能够经过 <script> 标签直接用在浏览器中。
• CommonJS：CommonJS 版本用来配合老的打包工具好比Browserify 或 webpack 1。这些打包工具的默认文件 (pkg.main) 是只包含运行时的 CommonJS 版本 (vue.runtime.common.js)。

• ES Module：从 2.6 开始 Vue 会提供两个 ES Modules (ESM) 构建文件：

  • 为打包工具提供的 ESM：为诸如 webpack 2 或 Rollup 提供的现代打包工具。ESM 格式被设计为能够被静态分析，因此打包工具能够利用这一点来进行 “tree-shaking” 并将用不到的代码排除出最终的包。为这些打包工具提供的默认文件 (pkg.module) 是只有运行时的 ES Module 构建 (vue.runtime.esm.js)。
  • 为浏览器提供的 ESM (2.6+)：用于在现代浏览器中经过 <script type="module"> 直接导入。

Vue 各个构建版本特性

1. vue.js 表示完整版本
2. .runtime 只包含 运行时环境 版本
3. .min 表示压缩版本
4. .common 表示 CommonJS 版本
5. .esm 表示 ES Module (基于 构建工具 使用)
6. .esm.browser 表示 ES Module (直接用于 浏览器)

完整版 vs runtime版

若是你须要 在客户端编译模板 (好比传入一个字符串给 template 选项，或挂载到一个元素上并以其 DOM 内部的 HTML 做为模板)，就将须要加上编译器，即完整版：

// 须要编译器
new Vue({
  template: '<div>{{ hi }}</div>' // 须要解析模板转换为下方代码
})

// 不须要编译器
new Vue({
  render (h) {
    return h('div', this.hi)
  }
})

若是 webpack 想要使用完整版如何配置

由于运行时版本相比完整版体积要小大约 30%，因此应该尽量使用这个运行时版本。若是仍然但愿使用完整版，则须要在 webpack 里配置一个别名：

module.exports = {
  // ...
  resolve: {
    alias: {
      'vue$': 'vue/dist/vue.esm.js' // 用 webpack 1 时需用 'vue/dist/vue.common.js'
    }
  }
}

其余打包工具配置

Vue 实例

建立一个 Vue 实例

声明式渲染

Vue.js 的核心是一个容许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统。
每一个 Vue 应用都是经过用 Vue 函数建立一个新的 Vue 实例开始的。

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

var app = new Vue({
  el: '#app',
  data: {
    message: 'www.lilnong.top, Hello Vue!'
  }
})

数据与方法

当一个 Vue 实例被 建立时，会将 data 对象中的全部的属性加入到 Vue 的 响应式系统 中。
当这些属性的值发生改变时，视图将会产生响应，更新为新的值。

实例生命周期钩子

每一个 Vue 实例在被建立时都要通过一系列的初始化过程。
例如，须要设置 数据监听、编译模板、将 实例挂载到 DOM 并在 数据变化时更新 DOM 等。
同时在这个过程当中也会运行一些叫作 生命周期钩子 的函数，这给了用户在不一样阶段添加本身的代码的机会。

1. beforeCreate 初始化
2. created 解析模板以前
3. beforeMount 挂载以前，已解析模板
4. mounted 已挂载到DOM
5. beforeupdate data修改以后，更新视图以前
6. updated 更新视图以后
7. beforeDestory 销毁以前
8. destroyed 销毁完成

微信公众号：前端linong

参考文献

1. 前端培训目录、前端培训规划、前端培训计划
2. vue.js