技術標籤：關於前端vue前端

在使用vue-cli或者自己搭建的基於Webpack的腳手架的時候，並不會使用Vue.component來定義元件，然後使用new Vue({})來給每個頁面掛載一個容器。這種方法存在明顯的弊端：

• 每個component的命名不得重複
• 缺乏語法高亮
• 不支援css
• 不能使用前處理器

更多的，我們傾向於使用Vue單檔案元件。.vue是一個自定義的檔案型別，用類HTML語法來描述一個Vue元件。每個組建包含三個部分：<template>、<script>和<style>，也允許加入自定義塊。

<template>
  <
 
div class="example">{{ msg }}</div>
</template>

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

<style>
.example {
  color: red;
}
</style>

<custom1>
  This could be e.g. documentation for the component.
</
 
custom1>

template

• 每個.vue檔案中只能有一個<template>
• 每個<template>中只能有一個根節點
• <template>中的內容會被提取給元件解析，處理為javascript渲染函式，最後注入到<script>匯出的元件

script

• 每個.vue檔案中只能有一個<script>
• 這個指令碼會作為一個ES Module來執行
• 它的預設匯出（export default）是一個Vue.js的元件選項物件（詳看https://cn.vuejs.org/v2/api/#選項-資料）
• 任何能夠作用於.js檔案的webpack規則都會被應用到<script>
  中的程式碼

在實際開發中，我們幾乎都是在<script>標籤中編寫指令碼以及定義資料，如下圖：

其中data、components、methods等就是元件選項物件中的屬性，常用的有：

• data：元件所使用到的變數名以及變數值。在元件中，data中的資料以函式的返回的物件的鍵值對的形式來定義
• props：用於接收父元件傳入的資料，可以是陣列或物件形式
• computed：計算屬性
• methods：定義要使用的方法和函式
• watch：監聽屬性
• 其他一系列生命週期鉤子等

style

• 一個.vue檔案中可以有多個<style>
• 有scoped或者module屬性來幫助將樣式封裝到當前元件
• 任何能夠作用於.css檔案的webpack規則都會被應用到<style>中的程式碼

參考資料

• Vue 單檔案元件 (SFC) 規範：https://vue-loader.vuejs.org/zh/spec.html
• 單檔案元件：https://cn.vuejs.org/v2/guide/single-file-components.html