template 模块
1. <template> 标签上不要写多余的属性（默认就是以 html 来解析）
<!-- Not recommended -->
<template lang="html"></template>
<!-- Recommended -->
<template></template>
2. template 里 html 标签上的属性书写规则
2.1 超过一个属性时，属性换行对齐；
2.2 v-xx指令放最前，自有属性放最后；
<!-- Not recommended -->
<input type="text" class="hf-input" placeholder="请输入验证码" v-model="form.imageCode" />
<!-- Recommended -->
<input
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...
如：
<!-- Recommended -->
<ul v-if="todos.length > 0">
<li
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)"
></li>
</ul>
2.4 当v-if与v-for在同一个标签上时，记得v-if的权重高于v-for，会在每个标签上做判断，确定这是你真正的意图？
2.5 v-for时，记得为每项提供一个唯一 key 属性；
2.6 非不得已，请不要写html标签上直接写style内联样式！
3. 在大结构块时，加入合适的注释标签，并保持良好的层级缩进；
<div>
<!-- “导入”组件 -->
<div>
xxx
</div>
<!-- “导入”组件/ -->
<!-- 搜索框 -->
<div>
xxx
</div>
<!-- 搜索框/ -->
</div>
script 模块
1. import 放在最顶部，并省略掉 .js，.json 和 .vue 后缀（已在webpack的resolve.extensions中做了配置）
<!-- Not recommended -->
import mockData from '@/mockdata/userMock.js'
<!-- Recommended -->
import mockData from '@/mockdata/userMock'
2. export 对象中属性定义顺序
name 当前模块名字
components 便于查找引用了哪些组件（单个换行，以,结尾）
<!-- Recommended -->
components: {
norecord,
TimePicker,
},
props 可接受的从父组件传递过来的参数列表
props值必须为对象；- 如果是必传项，要设置
required:true；- 如果有默认值（最好都有默认值），要设置
default的值；- 为
props的每个字段添加注释，方便后期维护
<!-- Recommended -->
props: {
// 学生数量
stuCount: Number,
// 是否正在加载（带有默认值）
isLoading: {
type: Boolean,
default: false,
},
// 是否正在创建（如果是必传项）
isCreating: {
type: Boolean,
required: true,
default: false,
},
},
data 记得是一个 function，保证每个实例可以维护一份被返回对象的独立的拷贝
computed 计算属性
watch 监听器
filters 过滤器
directives 指令
mixins 混入
methods 方法
- 方法按页面结构从上至下开始定义；
- 属于某一个功能项的尽量放在一起，并加上此功能项的起止注释；
- 页面初始化方法写在最后；
- 公用方法写在页面初始化方法前，页面其他功能项方法后；
<!-- Recommended -->
methods: {
// 添加课程
addClass() {
},
// 删除课程
delClass() {
},
/** 上传模块的功能 start */
// 上传成功
uploadSuc() {
},
// 上传失败
uploadFail() {
},
/** 上传模块的功能 end */
/** 共用方法 start */
// 转换成树结构
convertToTree() {
},
// 表单校验
checkForm() {
},
/** 共用方法 end */
// 初始化一些信息
init() {
},
},
created/mounted/updated 等各类生命周期函数
<!-- Recommended -->
methods: {
},
/** 生命周期勾子函数 start */
beforeCreated() {
},
created() {
},
mounted() {
},
/** 生命周期勾子函数 end */
style 模块
-
@import写在最前； - 样式书写顺序与页面结构一致；
- 嵌套层级最多请不要超过3层；
- 慎重考虑是否添加
scoped属性。
网友评论