Vue.js 系列教程 3：Vue

標籤：repeat   方法   jpg   cte   ted   也會   create   說明   傳遞   

原文：intro-to-vue-3-vue-cli-lifecycle-hooks

譯者：nzbin

這是 JavaScript 架構 Vue.js 五篇教程的第三部分。在這一部分，我們將學習 Vue-cli ，還會涉及真實的開發流程。這個系列教程並不是一個完整的使用者手冊，而是通過基礎知識讓你快速瞭解 Vuejs 以及它的用途。

系列文章:

1. 渲染, 指令, 事件
2. 組件, Props, Slots
3. Vue-cli (你在這!)
4. Vuex
5. 動畫

Vue-cli 和構建過程

如果你還沒有讀過上一部分關於 Vue.js 組件和 props 的內容，我強烈建議你在讀這篇文章之前先讀讀上一部分，另外，部分內容缺乏語境。

Vue 提供了一個好用的 命令列工具 ，你可以選擇一些構建工具啟動項目, 還提供了簡單的啟動模板。這是個非常好的工具。在安裝 vue-cli 之前，需要檢查 node 的版本，以及升級 npm 或者 yarn 。首先要安裝 vue-cli ( -g 表示全域安裝 )

$ npm install -g vue-cli

有多種構建工具可供選擇，但是在我們的例子中將使用 webpack:

$ vue init webpack <project-name>

可以通過命令列進入目錄安裝所有內容，設定 `package.json` 檔案，然後通過以下命令在 localhost:8080 連接埠啟動本地服務：

$ npm run dev

程式運行成功！我喜歡這種簡單的設定。你可以從 `/src/` 目錄下的 APP 檔案以及 `/components/`目錄下的 `Hello.vue`檔案開始項目。這非常好，因為你已經看到如何建立檔案，以及如何進行檔案的匯入匯出。

先看一下 `.vue` 這個副檔名，因為你還沒有使用過 vue，所以你之前也沒有遇到這種檔案。

在 `.vue` 檔案中，可以放任何組件內容。我們不需要再用 <script type="text/x-template"> 包裹模板，現在我們將按下面的邏輯建立更具有語義化的檔案：

<template>  <div>     <!-- Write your HTML with Vue in here -->      </div></template><script>  export default {     // Write your Vue component logic here  }</script><style scoped>  /* Write your styles for the component in here */</style>

我針對 Sublime Text 建立了一個  Vue snippets 的倉庫 ，可以針對 `.vue` 檔案快速產生上述模板 ( 這是 vbase snippet 輸出的 )。 這個 是針對 atom 的 ( 它指出 Vue 需要 1+ 的版本，而 Vue 現在是 v2)，還有 這個 是針對 vscode 的。

這裡要注意的幾件事： 和 React 一樣，必須返回一個閉合的標籤，在這裡我使用一個 div 。在SVG中我也使用 <g> 元素。任何標籤都可以，但是整個模板必須包裹在一個標籤中。

你注意到我們在這裡將使用 export default 編寫指令碼，比如之前使用的 data function 或者 methods ，但是如果我們想在這個 `.vue` 檔案中使用子組件，我們需要匯入 import 它們 ( 之後詳細介紹 )。

你也會注意到在樣式標籤中有一個特殊的 scoped 屬性值。這使我們能夠很容易地將此組件的樣式僅限於此組件。我們也會使用 <style> ，它將建立整個程式的樣式。我通常會為應用程式建立一個通用的樣式表，包括像 fonts 和 line-heights 的共同樣式， 所以我將藉助 vue-style-loader 匯入 @import 到 App.vue 檔案的 <style> 標籤中。我也會使用 <style scoped> 標籤為模板制定特殊的樣式，但是只對當前模板有效！ Vue-cli 的好處就是讓你自己決定如何組織檔案，而且你不必添加其它的依賴或模組來限制樣式的作用範圍。

之前簡答地介紹了 slots ，當我們在 Vue 組件中通過局部樣式標籤使用 slots 時，它們適用於具有 slots 的組件。這是非常有用的，因為你可以很容易地切換組件和改變樣式。

在開發過程中，使用特殊的 `.vue` 檔案來組織 HTML，styles 和 JS 非常有協助。我喜歡完全分離的方式，可以很清楚地看到每一部分，我還不適應這種緊密聯絡在一起的方式。它可以加快我的開發，而且我發現這種標記語言是語義化的。

你可能注意到文法高亮並不能自動識別 `.vue` 檔案，所以我在 Sublime Text 中安裝了 這個 。

下面是將組件 匯入/匯出 檔案的基本方式 ( 在 vue-sublime snippets 中是 vimport:c )：

import New from ‘./components/New.vue‘;export default {  components: {    appNew: New  }}

舉一個生活中的例子，看一下上次我們用過的酒瓶標籤的案例，它的組件有兩個獨立的模板：

App.vue:

<template>  <div class="container">  <main>      <component :is="selected">        <svg class="winebottle" aria-labelledby="title" xmlns="http://www.w3.org/2000/svg" viewBox="0 155 140 300">          ...      </svg>      </component>    </main>    <aside>      <h4>Name your Wine</h4>      <input v-model="label" maxlength="18">      <div class="button-row">        <h4>Color</h4>        <button @click="selected =‘appBlack‘, labelColor = ‘#000000‘">Black Label</button>        <button @click="selected =‘appWhite‘, labelColor = ‘#ffffff‘">White Label</button>        <input type="color" v-model="labelColor" defaultValue="#ff0000">      </div>    </aside>  </div></template><script>  import Black from ‘./components/Black.vue‘  import White from ‘./components/White.vue‘  ...  export default {      data: function () {        return {          selected: ‘appBlack‘,          label: ‘Label Name‘,          ...        };      },      components: {          appBlack: Black,          appWhite: White,          ...      }  }</script><style>  @import "./assets/style.css";</style>

黑色組件：

<template>  <div>    <slot></slot>  </div></template><style scoped>  .label {    fill: black;  }  .bottle, .wine-text {    fill: white;  }  .flor {    fill: #ccc;  }  .bkimg {    filter:url(#inverse)  }</style>

注意我在這裡給組件中的 slot 設定了不同的樣式，這是很好的工作方式，但這隻是一種方法。通過 components，slots 和 props 構建程式的方法還有很多。這裡的代碼也只顯示了部分內容。我建立了該樣本的 倉庫 ，使用 Vue-cli 構建的。為了熟悉工作流程，我強烈建議使用 Vue-cli 構建組件以及通過 props 傳遞狀態。只要完成初始設定，這種方式直觀而且快速。

生命週期鉤子

在討論生命週期鉤子之前，需要回顧一下我在第一篇文章中提到的虛擬 DOM。我提到 Vue.js 具有虛擬 DOM，但沒有說明它的用途。

當你使用像 jQuery 的架構工作時，你可能聽說過 DOM 並且通過 DOM 更新改變內容。最後，我們花了大量的時間來檢查 DOM 在做什麼並儲存狀態。相反，虛擬 DOM 是 DOM 的抽象表示，有點像複製品，但在這種情況下，它將是主副本。在這個系列文章中，當我們用 Vue 的方式使用狀態時，我們建立狀態並觀察狀態的更新。

當一個 Vue 執行個體更新後，Vue 將會檢查它是否與之前的有不同之處。如果確實有不同，Vue 將會調用生命週期的方法，更新 DOM 變化的部分。這是為了提高效率，這種方式下，DOM 只更新需要的部分。

生命週期鉤子提供了一些 方法 ，因此你可以在組件生命週期的不同時刻精確地觸發某些操作。當我們將組件執行個體化時，組件會被建立，反之會被銷毀，比如當我們使用 v-if/v-else 指令切換時。

可以使用的鉤子有： beforeCreate, created, beforeMount, mounted, beforeUpdate, updated, activated, deactivated, beforeDestroy, destroyed 。如果你想深入瞭解，可以看看 介紹每種方法 的 API 文檔。下面的小例子展示了部分工作原理（檢查控制台）：

const Child = {  template: ‘#childarea‘,  beforeCreate() {    console.log("beforeCreate!");  },  ...};new Vue({  el: ‘#app‘,  data() {    return {      isShowing: false     }  },  methods: {    toggleShow() {      this.isShowing = !this.isShowing;    }  },  components: {    appChild: Child  }});

<div v-if="isShowing">  <app-child></app-child></div>

 

注意我們在這裡使用了 v-if 而沒有使用 v-show ，因為 v-if 會真實的建立或者銷毀組件，而 v-show 只是切換可見度（組件仍然存在於 DOM 中）。同樣的， <keep-alive></keep-alive> 也不會建立或者銷毀， 而是啟用或停用—— 因為組件仍然存在，只是沒有使用。

正如組件中的方法會自動綁定 this，生命週期鉤子也會自動綁定執行個體，所以可以使用組件的狀態和方法。仍然不需要通過 console.log 查看 this 的指向！ *heartiest eyes* 儘管如此，你不應該在生命週期方法中使用箭頭函數，因為它會綁定父類上下文，而不是 Vue 執行個體。

在下面的例子中，當組件最初被建立時，會有大量的元素被移動，所以我將使用 mounted 鉤子函數為每一個組件觸發相應的動畫。你可以點擊右下角的 return 按鈕來看啟動動畫。

 

mounted() {    let audio = new Audio(‘https://s3-us-west-2.amazonaws.com/s.cdpn.io/28963/rain.mp3‘),        tl = new TimelineMax();    audio.play();    tl.add("drops");    //drops in    tl.staggerFromTo("#droplet-groups g path", 0.3, {      drawSVG: "0% -10%"    }, {      drawSVG: "100% 110%",      repeat: 3,      repeatDelay: 1,      ease: Sine.easeIn    }, 0.5, "drops"); …}

在這個例子中我使用了很多 Vue 提供的漂亮且複雜的 <transition> 和 <transition-group> 組件，我將在系列文章的最後一部分 Animation 中介紹它們，以及為什麼及何時使用。

Vue.js 系列教程 3：Vue