Vue.js 單檔元件

學習如何使用 Vue 創建單一檔案來封裝一個組件的所有相關內容，集中管理外觀和行為。

一個 Vue 組件可以在一個 JavaScript 檔案（.js）中這樣聲明：

Vue.component('component-name', {
   /* 選項 */
})

或者：

new Vue({
   /* 選項 */
})

也可以在一個 .vue 檔案中指定。

這個 .vue 檔案非常酷，因為它允許你在一個檔案中定義以下內容：

• JavaScript 邏輯
• HTML 代碼模板
• CSS 樣式

所有這些內容都包含在一個檔案中，因此它得名為單檔元件。

以下是一個例子：

<template>
   <p>{{ hello }}</p>
</template>

<script>
export default {
   data() {
      return {
         hello: 'Hello World!'
      }
   }
}
</script>

<style scoped>
   p {
      color: blue;
   }
</style>

所有這些都是可能的，感謝 webpack 的使用。Vue CLI 讓這一切變得非常容易並且支援開箱即用。在沒有 webpack 設置的情況下，無法使用 .vue 檔案，因此它們不適合於僅在頁面上使用 Vue 而不是作為完整單頁應用程式（SPA）的應用程式。

由於單檔元件依賴於 Webpack，我們免費獲得了使用現代 Web 功能的能力。

你可以使用 SCSS 或 Stylus 定義 CSS，使用 Pug 構建模板，只需告訴 Vue 你要使用哪種語言預處理器即可實現這一點。

支援的預處理器列表包括：

• TypeScript
• SCSS
• Sass
• Less
• PostCSS
• Pug

我們可以使用現代 JavaScript（ES6-7-8）來編寫，不受目標瀏覽器的限制，使用 Babel 整合和 ES 模塊，所以可以使用 import/export 聲明。

我們可以使用 CSS Modules 來隔離 CSS。

說到 CSS 隔離，單檔元件讓我們非常容易編寫不會洩漏到其他組件的 CSS，只需使用 <style scoped> 標籤即可。

如果省略 scoped，你所定義的 CSS 將是全局的。但添加了它，Vue 將自動為組件添加一個特定的類，該類是唯一的且屬於你的應用程序，因此可以確保 CSS 不會洩漏到其他組件。

也許你的 JavaScript 由於某些需要處理的邏輯而變得很大。如果希望使用一個獨立的檔案來管理 JavaScript，該怎麼辦？

你可以使用 src 屬性外部化它：

<template>
   <p>{{ hello }}</p>
</template>
<script src="./hello.js"></script>

這對於 CSS 也同樣有效：

<template>
   <p>{{ hello }}</p>
</template>
<script src="./hello.js"></script>
<style src="./hello.css"></style>

請注意我在組件的 JavaScript 中使用了：

export default {
   data() {
      return {
         hello: 'Hello World!'
      }
   }
}

來設置數據。

其他常見的方式還包括：

export default {
   data: function() {
      return {
         name: 'Flavio'
      }
   }
}

（上面的方式相當於我們之前的做法）

或者：

export default {
   data: () => {
      return {
         name: 'Flavio'
      }
   }
}

這是不同的，因為它使用了箭頭函數。箭頭函數在我們需要訪問組件方法時無法正確運作，因為我們需要使用 this，而箭頭函數不會綁定該屬性到組件。所以，必須使用常規函數而不是箭頭函數。

你還可能看到：

module.exports = {
   data: () => {
      return {
         name: 'Flavio'
      }
   }
}

這種方式是使用 CommonJS 語法，也可以運作，但建議使用 ES 模塊語法，因為它是 JavaScript 的標準語法。