vue 编码规范

2017-10-17 本文已影响173人叶赫icon

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

正确使用方法如下：

![](baseUrl + item.cover) 
<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>

vue 编码规范

vue 编码规范

猜你喜欢

热点阅读