vue 编码规范

vue 编码规范

1.数据渲染：

渲染数据时，必须使用“Mustache”语法 (双大括号),否则无法在页面显示

{{ msg }}

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={{}}。

正确使用方法如下：

![](baseUrl + item.cover) 
   

注：路由 to 属性如是动态数据，也需用v-bind 绑定

    {{item.name}}
 

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值，以维护内部组件及其子树的状态

{{ todo.text }}
 

11.为组件样式设置作用域：

为避免不同组件之间css样式冲突，需在style标签中设置作用域；

设置作用域可使用scoped,也可通过CSS Modules(CSS Modules是一种技术流的组织css代码的策略，它是依靠动态生成class名这一手段为css提供默认的局部作用域。)

12. < template >< /template >标签注意点：

组件中< template > < /template > 标签内只能有一个根元素