vue 文件
詳細(xì)說(shuō)明可查看 Vue風(fēng)格指南
1.組件/實(shí)例的選項(xiàng)順序
- name
- components / directives / filters
- extends / mixins
- model / props / propsData
- data / computed
- watch / 生命周期鉤子
- methods
2.元素特性的順序
- is
- v-for / v-if / v-else-if / v-else / v-show / v-cloak
- v-pre / v-once
- id
- ref / key / slot
- v-model
- v-on
- v-html / v-text
3.事件的控制
- 不要使用 this.
root 進(jìn)行控制, 會(huì)導(dǎo)致流程難以跟蹤. 可使用事件中心進(jìn)行代替.
- 事件中心每添加事件, 需要注明事件的 名稱 / 來(lái)源文件 / 流向文件, 以及事件的作用.
- 事件移除時(shí)需要移除事件中心對(duì)應(yīng)事件注明.
- 組件當(dāng)中有原生綁定事件, 注意在組建注銷前進(jìn)行移除
4.編寫組件的一些注意事項(xiàng)
- props: 指定入?yún)㈩愋?/li>
// bad
props: ['status']
// good
props: {
status: String
}
- v-for: 設(shè)置鍵值
<li v-for="todo in todos">
{{ todo.text }}
</li>
- 私有屬性名
在插件引颈、混入等擴(kuò)展中始終為自定義的私有屬性使用
yourPluginName)
methods: {
$_myGreatMixin_update: function () {
}
}
- 緊密耦合組件名（廢棄）
如果一個(gè)組件只在某個(gè)父組件的場(chǎng)景下有意義塘慕，這層關(guān)系應(yīng)該體現(xiàn)在其名字上义黎。因?yàn)榫庉嬈魍ǔ?huì)按字母順序組織文件赐俗，所以這樣做可以把相關(guān)聯(lián)的文件排在一起
components/
|- TodoList.vue
|- TodoListItem.vue
|- TodoListItemButton.vue
- 組件名大小寫
組件名應(yīng)該始終是 PascalCase
export default {
name: 'MyComponent',
// ...
}
- props 名大小寫
在聲明 prop 的時(shí)候房揭，其命名應(yīng)該始終使用 camelCase贤笆，而在模板中應(yīng)該始終使用 kebab-case
// js
props: {
greetingText: String
}
// html
<WelcomeMessage greeting-text="hi"/>
- 多特性元素
多行分隔對(duì)象的多個(gè)屬性, 使模板易讀
<MyComponent
foo="a"
bar="b"
baz="c"
/>
- 單文件頂級(jí)元素順序
<template>...</template>
<script>/* ... */</script>
<style>/* ... */</style>
