vue 編碼規(guī)范
1.數(shù)據(jù)渲染：
渲染數(shù)據(jù)時买窟，必須使用“Mustache”語法 (雙大括號),否則無法在頁面顯示
<span>{{ msg }}</span>
2.組件命名：
組件名應(yīng)為多個單詞蒿辙，避免與HTML元素沖突
組件名應(yīng)該傾向于完整單詞而不是縮寫
單詞之間使用
連字符 ‘-’分隔 （recommend-reading)如果非常通用的組件可以使用一個前綴作為命名空間痢毒，例如app-button,這樣方便于其他項目復(fù)用
-
在組件定義中（局部注冊）:
import Loading from 'components/loading'components: {
'v-loading': Loading,
}
3.緊密耦合的組件名:
如果一個組件只在某個父組件的場景下有意義，這層關(guān)系應(yīng)該體現(xiàn)在其名字上。因為編輯器通常會按字母順序組織文件项鬼，所以這樣做可以把相關(guān)聯(lián)的文件排在一起侦厚。
components/
|- TodoList.vue
|- TodoListItem.vue
|- TodoListItemButton.vue
4.組件引入規(guī)則:
組件引入應(yīng)以變量Loading形式耻陕，而不是字符串"Loading"形式
import Loading from 'components/loading';
5.盡量使用縮寫：
比如使用 :style 代替 v-bind:style；用 @click 代替 v-on:click
6.不要將 html 的 attribute 和 vue 的 model 混用：
img刨沦、a標簽等如需添加動態(tài)屬性诗宣，應(yīng)用 ：src=" " / ：href=" " ，而不是用 src={{}}想诅。
正確使用方法如下：
<a :href="baseUrl + item.id" />
注：路由 to 屬性如是動態(tài)數(shù)據(jù)召庞，也需用v-bind 綁定
<li class="nav-item" v-for="(item,index) in routeArr">
<router-link :to='item.url' :key="item.id">{{item.name}}</router-link>
</li>
7.data屬性:
在組件中，data值必須是函數(shù) （因為組件可能被多次調(diào)用来破，當data為普通對象時篮灼，data內(nèi)的數(shù)據(jù)會被共享，為函數(shù)時徘禁，則每個組件生成為獨立data作用域")
export default {
data () {
return {
foo: 'bar'
}
}
}
8.method方法命名：
-
ajax數(shù)據(jù)請求：以get穿稳、post開頭，以data結(jié)尾
getListData晌坤、postFormData
-
事件：事件方法以on開頭
onChangeColor逢艘、onChangeStatus
駝峰命名規(guī)則
9.vue方法一般放置順序：
components（組件）
props（組件之間的傳遞值）
data（初始化數(shù)據(jù)）
computed (計算屬性，做邏輯處理)
methods (方法)
mounted（鉤子函數(shù)骤菠，一般調(diào)用方法）
例如：
export default{
components:{
},
props:[],
data(){
return {
}
},
computed:{
}
methods:{
},
mounted:{
}
}
10.為v-for設(shè)置鍵值：
當使用v-for渲染列表時它改， 需要對應(yīng)的key值，以維護內(nèi)部組件及其子樹的狀態(tài)
<li v-for="todo in todos" :key="todo.id">{{ todo.text }}</li>
11.為組件樣式設(shè)置作用域：
為避免不同組件之間css樣式?jīng)_突商乎，需在style標簽中設(shè)置作用域央拖；
設(shè)置作用域可使用scoped,也可通過CSS Modules(CSS Modules是一種技術(shù)流的組織css代碼的策略，它是依靠動態(tài)生成class名這一手段為css提供默認的局部作用域。)
<style scoped>
.button {
border: none;
border-radius: 2px;
}
</style>
<style module>
.button {
border: none;
border-radius: 2px;
}
</style>
12. < template >< /template >標簽注意點：
組件中< template > < /template > 標簽內(nèi)只能有一個根元素
<template>
<div class="wrap">
content.....
</div>
</template>