好記性不如爛筆頭，總想看到的東西想記錄一下。不是很全，因為有的不是很明白就沒記錄下來。

一 必要的 （如果您使用Vue就要用這樣的風格，個人理解。。）

• 元件名為多個單詞（防止重名-根元件除外）

Vue.component('todo-item', {
 // ...
})

• 元件資料（元件的data必須是一個函式-根元件除外）

// In a .vue file
export default {
  data () {
    return {
      foo: 'bar'
    }
  }
}

Vue.component('some-comp', {
  data: function
 
 () {
    return {
      foo: 'bar'
    }
  }
})

• prop定義應該儘量詳細（引數儘量補全）

    // 更好的做法！
    props: {
      status: {
        type: String,
        required: true,
        validator: function (value) {
          return [
            'syncing',
            'synced',
            'version-conflict',
            'error'
 

          ].indexOf(value) !== -1
        }
      }
    }

• 總是用 key 配合v-for。

<ul>
  <li
    v-for="todo in todos"
    :key="todo.id"
  >
    {{ todo.text }}
  </li>
</ul>

• 永遠不要把v-if和 v-for同時用在同一個元素上。

<ul v-if="shouldShowUsers">
  <li
    v-for="user in users"
    :key
 
="user.id"
  >
    {{ user.name }}
  </li>
</ul>

• 為元件設定區域性作用域,對於應用來說，頂級App元件和佈局元件中的樣式可以是全域性的，但是其它所有元件都應該是有作用域的。

<template>
  <button class="button button-close">X</button>
</template>

<!-- 使用 `scoped` 特性 -->
<style scoped>
    .button {
      border: none;
      border-radius: 2px;
    }

    .button-close {
      background-color: red;
    }
</style>

二 強烈推薦 （強烈推薦，可以使用，也可以不實用，使用的話是最好--增加可讀性）

• 多個元件儘量不要寫在同一個.vue檔案中
• 單檔案元件檔案的大小寫，單檔案元件的檔名應該要麼始終是單詞大寫開頭 (PascalCase)，要麼始終是橫線連線 (kebab-case)。
• 基礎元件名，應用特定樣式和約定的基礎元件 (也就是展示類的、無邏輯的或無狀態的元件) 應該全部以一個特定的字首開頭，比如 Base、App 或V。

<template>
  <button class="button button-close">X</button>
</template>

<!-- 使用 `scoped` 特性 -->
<style scoped>
    .button {
      border: none;
      border-radius: 2px;
    }

    .button-close {
      background-color: red;
    }
</style>

• 模版中儘量不要使用複雜的表示式，可以通過計算屬性書寫複雜的表示式

<!-- 在模板中html -->
{{ normalizedFullName }}


// 複雜表示式已經移入一個計算屬性js
computed: {
  normalizedFullName: function () {
    return this.fullName.split(' ').map(function (word) {
      return word[0].toUpperCase() + word.slice(1)
    }).join(' ')
  }
}

• 指令縮寫 (用 : 表示 v-bind:和用 @ 表示 v-on:) 應該要麼都用要麼都不用。

三 推薦（推薦，可以使用，也可以不實用）

• 元件/例項的選項應該有統一的順序。這是我們推薦的元件選項預設順序。它們被劃分為幾大類，所以你也能知道從外掛裡新增的新屬性應該放到哪裡。
  
  1. 副作用 (觸發元件外的影響)
     
     • el:
  2. 全域性感知 (要求元件以外的知識)
     
     • name:
     • parent:
  3. 元件型別 (更改元件的型別)
     
     • functional:
  4. 模板修改器 (改變模板的編譯方式)
     
     • delimiters:
     • comments:
  5. 模板依賴 (模板內使用的資源)
     
     • components:
     • delimiters:
     • filters:
  6. 組合 (向選項裡合併屬性)
     
     • extends:
     • mixins:
  7. 介面 (元件的介面)
     
     • inheritAttrs:
     • model:
     • props/propsData
  8. 本地狀態 (本地的響應式屬性)
     
     • data:
     • computed:
  9. 事件 (通過響應式事件觸發的回撥)
     
     • watch:
     • 生命週期鉤子 (按照它們被呼叫的順序)
  10. 非響應式的屬性 (不依賴響應系統的例項屬性)
      
      • methods:
  11. 渲染 (元件輸出的宣告式描述)
      
      • template/render
      • renderError:
• 元素 (包括元件) 的特性應該有統一的順序。
  
  1. 定義 (提供元件的選項)
     
     • is
  2. 列表渲染 (建立多個變化的相同元素)
     
     • v-for
  3. 條件渲染 (元素是否渲染/顯示)
     
     • v-if
     • v-else-if
     • v-else
     • v-show
     • v-cloak
  4. 渲染方式 (改變元素的渲染方式)
     
     • v-pre
     • v-once
  5. 全域性感知 (需要超越元件的知識)
     
     • id
  6. 唯一的特性 (需要唯一值的特性)
     
     • ref
     • key
     • slot
  7. 雙向繫結 (把繫結和事件結合起來)
     
     • v-model:
  8. 其他特性 (所有普通的繫結或未繫結的特性)
  9. 事件 (元件事件監聽器)
     
     • v-on
  10. 內容 (覆蓋元素的內容)
      
      • v-html
      • v-text

四 謹慎使用（儘量少使用）

-元素選擇器應該避免在scoped中出現。

<template>
  <button class="btn btn-close">X</button>
</template>

<style scoped>
.btn-close {
  background-color: red;
}
</style>