vue 编码规范
1.数据渲染：
渲染数据时，必须使用“Mustache”语法 (双大括号),否则无法在页面显示
<span>{{ msg }}</span>
2.组件命名：
组件名应为多个单词，避免与HTML元素冲突
组件名应该倾向于完整单词而不是缩写
单词之间使用
连字符 ‘-’分隔 （recommend-reading)如果非常通用的组件可以使用一个前缀作为命名空间，例如app-button,这样方便于其他项目复用
-
在组件定义中（局部注册）:
import Loading from 'components/loading'components: {
'v-loading': Loading,
}
3.紧密耦合的组件名:
如果一个组件只在某个父组件的场景下有意义，这层关系应该体现在其名字上。因为编辑器通常会按字母顺序组织文件，所以这样做可以把相关联的文件排在一起。
components/
|- TodoList.vue
|- TodoListItem.vue
|- TodoListItemButton.vue
4.组件引入规则:
组件引入应以变量Loading形式，而不是字符串"Loading"形式
import Loading from 'components/loading';
5.尽量使用缩写：
比如使用 :style 代替 v-bind:style；用 @click 代替 v-on:click
6.不要将 html 的 attribute 和 vue 的 model 混用：
img、a标签等如需添加动态属性，应用 ：src=" " / ：href=" " ，而不是用 src={{}}。
正确使用方法如下：
<a :href="baseUrl + item.id" />
注：路由 to 属性如是动态数据，也需用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值必须是函数 （因为组件可能被多次调用，当data为普通对象时，data内的数据会被共享，为函数时，则每个组件生成为独立data作用域")
export default {
data () {
return {
foo: 'bar'
}
}
}
8.method方法命名：
-
ajax数据请求：以get、post开头，以data结尾
getListData、postFormData
-
事件：事件方法以on开头
onChangeColor、onChangeStatus
驼峰命名规则
9.vue方法一般放置顺序：
components（组件）
props（组件之间的传递值）
data（初始化数据）
computed (计算属性，做逻辑处理)
methods (方法)
mounted（钩子函数，一般调用方法）
例如：
export default{
components:{
},
props:[],
data(){
return {
}
},
computed:{
}
methods:{
},
mounted:{
}
}
10.为v-for设置键值：
当使用v-for渲染列表时， 需要对应的key值，以维护内部组件及其子树的状态
<li v-for="todo in todos" :key="todo.id">{{ todo.text }}</li>
11.为组件样式设置作用域：
为避免不同组件之间css样式冲突，需在style标签中设置作用域；
设置作用域可使用scoped,也可通过CSS Modules(CSS Modules是一种技术流的组织css代码的策略，它是依靠动态生成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 > 标签内只能有一个根元素
<template>
<div class="wrap">
content.....
</div>
</template>