構建你的第一個Vue.js元件

我記得當時我拿起CakePHP，我很喜歡，開始使用它是多麼容易。這些文件不僅結構合理，詳盡無遺，而且使用者友好。多年以後，這正是我在Vue.js中感受到的。然而，與Cake相比，Vue文件仍然缺少一件事：一個真實的專案教程。

無論框架的文件記錄如何，這對每個人來說都是不夠的。閱讀概念並不總是有助於瞭解大局或瞭解如何使用它們來實際製作某些東西。如果您像我一樣，通過製作一些可用的元件來更好地學習，並在編碼時參考文件，幫助記憶文件和熟練使用Vue。

在本教程中，我們將構建星級評分系統元件。我們將學習幾種Vue.js中的概念，我們會在專案中使用到他們，並將討論為什麼我們使用它們。

這篇文章深入介紹瞭如何以及為何。它旨在幫助您掌握Vue.js的一些核心概念，並教您如何為未來的專案做出設計決策。如果您想了解整個思考過程，請繼續閱讀。否則，您可以檢視CodeSandbox上的最終程式碼。

入門

Vue.js，當然你會以自己作為一個簡單的指令碼執行而覺得已經不錯了，但是當你想使用單檔案元件時情況有點不同。當然，你不一定必須構建以元件的這種方式。您可以完美地使用定義全域性元件Vue.component。問題是，這需要權衡，例如必須使用字串模板，沒有範圍的CSS支援，也沒有構建步驟（因此，沒有前處理器）。然而，我們希望更深入地學習如何構建一個可以在實際專案中使用的實際元件。出於這些原因，我們將採用由Webpack提供支援的實際設定。

為了簡化操作並縮短配置時間，我們將使用vue-cli和webpack-simple Vue.js模板。

首先，您需要在全域性安裝vue-cli。啟動終端並鍵入以下內容：

npm install -g vue-cli
複製程式碼

您需要繼續輸入：

vue init webpack-simple path/to/my-project
複製程式碼

你會在這個過程中被問到幾個問題。選擇除“使用sass”以外的所有內容，都是為預設值。然後，vue-cli將初始化專案並建立package.json檔案。完成後，您可以導航到專案的目錄，安裝依賴項並執行專案：

cd path/to/my-project
npm install
npm run dev
複製程式碼

不出意外！Webpack將開始在埠上提供專案8080（如果可用，8080埠沒有被其他程式佔用）並在瀏覽器中觸發它。如果一切順利，你應該看到像這樣的歡迎頁面。

短暫的暫停 – 除錯工具

幾乎！要正確除錯Vue.js元件，您需要正確的工具。繼續安裝Vue.js devtools瀏覽器擴充套件程式（Firefox / Chrome / Safari）。

你的第一個元件

最好的功能之一是Vue.js單檔案元件（SFC）。它們允許您在一個檔案中定義元件的結構，樣式和行為，而沒有混合HTML，CSS和JavaScript的常見缺點。

SFC以.vue副檔名結尾，具有以下結構：

<template>
  <!-- Your HTML goes here -->
</template>

<script>
  /* Your JS goes here */
</script>

<style>
  /* Your CSS goes here */
</style>
複製程式碼

讓我們來建立我們的第一個元件：建立一個Rating.vue檔案/src/components，然後複製/貼上上面的程式碼片段。然後，開啟/src/main.js並調整現有程式碼：

import Vue from `vue`
import Rating from `./components/Rating`

new Vue({
  el: `#app`,
  template: `<Rating/>`,
  components: { Rating }
})
複製程式碼

最後，為您的Rating.vue新增一些HTML：

<template>
  <ul>
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
  </ul>
</template>
複製程式碼

現在檢視瀏覽器中的頁面，您應該看到列表！Vue.js將您的<Rating>元件附加到#app元素中index.html。如果檢查HTML，則應該看不到該#app元素的符號：Vue.js將其替換為Rating元件。

旁註：您是否注意到您甚至不需要重新載入頁面？那是因為Webpack的vue-loader帶有熱過載功能。與實時重新載入或瀏覽器同步相反，熱重新載入不會在每次更改檔案時重新整理頁面。相反，它會監視元件更改並僅重新整理它們，保持狀態不變。

現在我們已經花了一些時間來設定，但現在是我們實際編寫有意義的程式碼的時候了。

模版template

我們將使用vue-awesome，一個用Font Awesome圖示構建的Vue.js的SVG圖示元件。這允許我們只載入我們需要的圖示。繼續使用npm（或Yarn）安裝它：

npm install vue-awesome
複製程式碼

然後編輯您的元件，如下所示：

<template>
  <div>
    <ul>
      <li><icon name="star"/></li>
      <li><icon name="star"/></li>
      <li><icon name="star"/></li>
      <li><icon name="star-o"/></li>
      <li><icon name="star-o"/></li>
    </ul>
    <span>3 of 5</span>
  </div>
</template>

<script>
  import `vue-awesome/icons/star`
  import `vue-awesome/icons/star-o`

  import Icon from `vue-awesome/components/Icon`

  export default {
    components: { Icon }
  }
</script>
複製程式碼

好吧好吧，讓我們放慢腳步並解釋所有這些內容?

Vue.js使用原生ES6模組來處理依賴項和匯出元件。<script>塊中的前兩行表示單獨匯入圖示，因此您最終不會在最終bundle(資源)中找到您不需要的圖示。第三個Icon元件是從vue-awesome中匯出的，因此您可以在您的元件中使用它。

Icon也是一個Vue.js的單檔案元件(SFC)，就像我們正在構建的元件那樣。如果你開啟檔案，你會發現它具有與我們完全相同的結構。

該export default匯出物件文字作為元件的檢視模型。我們在當前的components中註冊了Icon元件，因此我們可以在我們的本地使用它。

最後，我們在<template>使用HTML它並傳遞了一個name屬性來定義我們想要的圖示。元件可以通過將它們轉換為kebab-case（例如：MyComponent成為`）來用作自定義HTML標記。我們不需要在元件內巢狀任何東西，因此我們使用了自閉合標記。

旁註：您是否注意到在HTML周圍新增了一個<div>包裝？那是因為我們還在根級別新增了一個計數器<span>，而Vue.js中的元件模板只接受一個根元素。如果你不遵循這個規則，你會收到編譯錯誤。

樣式CSS

如果你已經使用過CSS一段時間了，你知道其中一個主要問題是必須處理它的全域性性。巢狀一直被認為是解決這個問題的方法。現在我們知道它可以很快導致特殊性問題，使得樣式難以覆蓋，亦或無法重用，以及是擴充套件的噩夢。

像BEM這樣的方法被發明來通過名稱空間類來規避這個問題並保持低特異性。在一段時間內，它是編寫乾淨且可擴充套件的CSS的理想方式。然後，像Vue.js或React這樣的框架和庫出現了，並帶來了範圍樣式。

React具有樣式化的元件，Vue.js具有元件範圍的CSS。它允許您編寫特定於元件的CSS，而無需提供什麼特定神奇的技巧。您使用“普通”類名編寫常規CSS，並且Vue.js通過將資料屬性分配給HTML元素並將其附加到已編譯樣式來確定處理範圍。

讓我們在元件上新增一些簡單的類：

<template>
  <div class="rating">
    <ul class="list">
      <li class="star active"><icon name="star"/></li>
      <li class="star active"><icon name="star"/></li>
      <li class="star active"><icon name="star"/></li>
      <li class="star"><icon name="star-o"/></li>
      <li class="star"><icon name="star-o"/></li>
    </ul>
    <span>3 of 5</span>
  </div>
</template>
複製程式碼

並新增上樣式：

<style scoped>
  .rating {
    font-family: `Avenir`, Helvetica, Arial, sans-serif;
    font-size: 14px;
    color: #a7a8a8;
  }
  .list {
    margin: 0 0 5px 0;
    padding: 0;
    list-style-type: none;
  }
  .list:hover .star {
    color: #f3d23e;
  }
  .star {
    display: inline-block;
    cursor: pointer;
    margin: 0 1px;
  }
  .star:hover ~ .star:not(.active) {
    color: inherit;
  }
  .active {
    color: #f3d23e;
  }
</style>
複製程式碼

你看到了scoped屬性了嗎？這就是告訴Vue.js，如何確定樣式範圍的原因，因此它們不會洩漏到任何其他地方。如果您正確地在index.html複製/貼上HTML程式碼，您會注意到您的樣式不生效：那是因為它們的作用域是元件！?

那麼怎麼樣預處理呢？

Vue.js可以輕鬆地從普通的CSS切換到您最喜歡的前處理器模式。您只需要正確的使用Webpack loader，並在<style>塊上設定簡單的屬性。還記得我們在生成專案的時候，問我們是否使用sass嗎，如果選擇”是”使用sass。同時vue-cli已經為我們安裝並配置了sass-loader。現在，我們需要做的就是在<style>新增lang="scss"標記。

我們現在可以使用Sass進行編寫元件級別風格的，通過import引入Sass，就像使用import引入變數，顏色定義等。如果你喜歡的縮排語法（或“sass”符號），只需lang屬性切換scss為sass。

behavior – 行為

現在我們的元件看起來很好，是時候讓它工作了。目前，我們有一個硬編碼模板。讓我們設定一些初始模擬狀態並調整模板以便它反映出來：

<script>
  ...
  export default {
    components: { Icon },
    data() {
      return {
        stars: 3,
        maxStars: 5
      }
    }
  }
</script>
複製程式碼

模版修改：

<template>
  <div class="rating">
    <ul class="list">
      <li v-for="star in maxStars" :class="{ `active`: star <= stars }" class="star">
        <icon :name="star <= stars ? `star` : `star-o`"/>
      </li>
    </ul>
    <span>3 of 5</span>
  </div>
</template>
複製程式碼

我們在這裡做的是使用Vue data來設定元件狀態。您定義的每個屬性都會跟著data中的屬性進行繫結：如果它發生變化，它將反映在檢視中。

我們正在製作一個可重用的元件，因此data需要是一個工廠函式而不是一個物件字面量。通過這種方式，我們獲得了一個新物件，而不是對將在多個元件之間共享的現有物件的引用。

我們的data工廠返回兩個屬性：stars表示當前“啟用”星數量，maxStars表示總的星星數量。從這些，我們調整了我們的模板，以便它反映實際元件的狀態。Vue.js附帶了一系列指令，可以讓您在模板中新增表示邏輯，而無需將其與純JavaScript混合使用。該v-for指令遍歷任何可迭代物件（陣列，物件文字，對映等）。它也可以將數字作為重複x次的範圍。這就是我們所做的v-for=”star in maxStars”，所以我們<li>對元件中的每個星都有一個。

您可能已經注意到某些屬性以冒號為字首：這是該v-bind指令的簡寫，它將屬性動態繫結到表示式。我們本來可以用它的不省略形式寫出來：v-bind:class。

當星號處於啟用狀態時，我們需要

<span>{{ stars }} of {{ maxStars }}</span>
複製程式碼

export default {
  ...
  computed: {
    counter() {
      return `${this.stars} of ${this.maxStars}`
    }
  }
}
複製程式碼

<span v-if="hasCounter">{{ stars }} of {{ maxStars }}</span>
複製程式碼

export default {
  ...
  data() {
    return {
      stars: 3,
      maxStars: 5,
      hasCounter: true
    }
  }
}
複製程式碼

<template>
  ...
  <li @click="rate(star)" ...>
  ...
</template>
複製程式碼

export default {
  ...
  methods: {
    rate(star) {
      // do stuff
    }
  }
}
複製程式碼

export default {
  ...
  methods: {
    rate(star) {
      this.stars = star
    }
  }
}
複製程式碼

export default {
  ...
  methods: {
    rate(star) {
      this.stars = this.stars === star ? star - 1 : star
    }
  }
}
複製程式碼

export default {
  ...
  methods: {
    rate(star) {
      if (typeof star === `number` && star <= this.maxStars && star >= 0) {
        this.stars = this.stars === star ? star - 1 : star
      }
    }
  }
}
複製程式碼

export default {
  props: [`grade`, `maxStars`, `hasCounter`],
  data() {
    return {
      stars: this.grade
    }
  },
  ...
}
複製程式碼

new Vue({
  el: `#app`,
  template: `<Rating :grade="3" :maxStars="5" :hasCounter="true"/>`,
  components: { Rating }
})
複製程式碼

export default {
  props: {
    grade: {
      type: Number,
      required: true
    },
    maxStars: {
      type: Number,
      default: 5
    },
    hasCounter: {
      type: Boolean,
      default: true
    }
  },
  ...
}
複製程式碼

<Rating :grade="3"/>
複製程式碼