Vue书写规范

时间:2020-01-14
本文章向大家介绍Vue书写规范,主要包括Vue书写规范使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。

template模块:

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

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

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

3 不要在html标签上直接写style内联样式, 放到data中或者computed中

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

script 模块

  1. import 放在最顶部,并省略掉 .js.json 和 .vue 后缀
  2.  export 对象中属性定义顺序
    name
    components
    props
    data
    computed 计算属性
    watch 监听器
    filters 过滤器
    directives 指令
    mixins 混入   混入方法命名规则:  mixinMixinJSNameFunctionName()
    created/mounted/updated 等各类生命周期函数
    methods 方法  大的规则
     
    1. api接口请求的放在前边
    2. 方法按页面结构从上至下开始定义;
    3. 当前组件方法调用on开头
    4. 子级页面emit方法调用emit开头

style 模块

    1. @import 写在最前;
    2. 样式书写顺序与页面结构一致;
    3. 嵌套层级最多请不要超过3层;
    4. 慎重考虑是否添加 scoped 属性。

$flag 上一页 下一页