前端培訓-中級階段（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