.vue文件怎么写html,.vue文件书写规范

template 模块

1. 标签上不要写多余的属性(默认就是以 html 来解析)

2. template 里 html 标签上的属性书写规则

2.1 超过一个属性时，属性换行对齐；

2.2 v-xx指令放最前，自有属性放最后；

v-model="form.imageCode"

type="text"

class="hf-input"

placeholder="请输入验证码"

/>

2.3 v-xx指令排序规则，控制显示 -> 控制循环 -> v-bind属性 -> v-on事件绑定；

v-if / v-show -> v-for -> v-bind:text... -> v-on:click...

如：

• is="todo-item"

  v-for="(todo, index) in todos"

  v-bind:key="todo.id"

  v-bind:title="todo.title"

  v-on:remove="todos.splice(index, 1)"

  >

2.4 当v-if与v-for在同一个标签上时，记得v-if的权重高于v-for，会在每个标签上做判断，确定这是你真正的意图？

2.5 v-for时，记得为每项提供一个唯一 key 属性；

2.6 非不得已，请不要写html标签上直接写style内联样式！

3. 在大结构块时，加入合适的注释标签，并保持良好的层级缩进；

xxx

xxx

script 模块

1. import 放在最顶部，并省略掉 .js，.json 和 .vue 后缀(已在webpack的resolve.extensions中做了配置)

import mockData from '@/mockdata/userMock.js'

import mockData from '@/mockdata/userMock'

2. export 对象中属性定义顺序

name 当前模块名字

components 便于查找引用了哪些组件(单个换行，以,结尾)

components: {

norecord,

TimePicker,

},

props 可接受的从父组件传递过来的参数列表

props 值必须为对象；

如果是必传项，要设置 required:true；

如果有默认值(最好都有默认值)，要设置 default 的值；

为 props 的每个字段添加注释，方便后期维护

props: {

// 学生数量

stuCount: Number,

// 是否正在加载(带有默认值)

isLoading: {

type: Boolean,

default: false,

},

// 是否正在创建(如果是必传项)

isCreating: {

type: Boolean,

required: true,

default: false,

},

},

data 记得是一个 function，保证每个实例可以维护一份被返回对象的独立的拷贝

computed 计算属性

watch 监听器

filters 过滤器

directives 指令

mixins 混入

methods 方法

方法按页面结构从上至下开始定义；

属于某一个功能项的尽量放在一起，并加上此功能项的起止注释；

页面初始化方法写在最后；

公用方法写在页面初始化方法前，页面其他功能项方法后；

methods: {

// 添加课程

addClass() {

},

// 删除课程

delClass() {

},

/** 上传模块的功能 start */

// 上传成功

uploadSuc() {

},

// 上传失败

uploadFail() {

},

/** 上传模块的功能 end */

/** 共用方法 start */

// 转换成树结构

convertToTree() {

},

// 表单校验

checkForm() {

},

/** 共用方法 end */

// 初始化一些信息

init() {

},

},

created/mounted/updated 等各类生命周期函数

methods: {

},

/** 生命周期勾子函数 start */

beforeCreated() {

},

created() {

},

mounted() {

},

/** 生命周期勾子函数 end */

style 模块

@import 写在最前；

样式书写顺序与页面结构一致；

嵌套层级最多请不要超过3层；

慎重考虑是否添加 scoped 属性。