日韩精品欧美激情国产一区_中文无码精品一区二区三区在线_岛国毛片AV在线无码不卡_亞洲歐美日韓精品在線_使劲操好爽好粗视频在线播放_日韩一区欧美二区_八戒八戒网影院在线观看神马_亚洲怡红院在线色网_av无码不卡亚洲电影_国产麻豆媒体MDX

以.vue為后綴的文件 內(nèi)部書寫規(guī)范

時間:2022-06-28 11:21:29 類型:vue
字號:    

  template 模塊

  1.標簽上不要寫多余的屬性(默認就是以 html 來解析)

<!-- Not recommended -->
<template></template>
<!-- Recommended -->
<template></template>

  2. template 里 html 標簽上的屬性書寫規(guī)則

  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="請輸入驗證碼"
/>

  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 可接受的從父組件傳遞過來的參數(shù)列表

  props 值必須為對象;

  如果是必傳項,要設置 required:true;

  如果有默認值(最好都有默認值),要設置 default 的值;

  為 props 的每個字段添加注釋,方便后期維護

<!-- Recommended -->
props: {
  // 學生數(shù)量
  stuCount: Number,
  // 是否正在加載(帶有默認值)
  isLoading: {
    type: Boolean,
    default: false,
  },
  // 是否正在創(chuàng)建(如果是必傳項)
  isCreating: {
    type: Boolean,
    required: true,
    default: false,
  },
},

  data 記得是一個 function,保證每個實例可以維護一份被返回對象的獨立的拷貝

  computed 計算屬性

  watch 監(jiān)聽器

  filters 過濾器

  directives 指令

  mixins 混入

  methods 方法

  方法按頁面結構從上至下開始定義;

  屬于某一個功能項的盡量放在一起,并加上此功能項的起止注釋;

  頁面初始化方法寫在最后;

  公用方法寫在頁面初始化方法前,頁面其他功能項方法后;

<!-- Recommended -->
methods: {
    // 添加課程
    addClass() {
 
    },
    // 刪除課程
    delClass() {
 
    },
 
    /** 上傳模塊的功能 start */
    // 上傳成功
    uploadSuc() {
 
    },
    // 上傳失敗
    uploadFail() {
        
    }, 
    /** 上傳模塊的功能 end */
 
    /** 共用方法 start */
    // 轉(zhuǎn)換成樹結構
    convertToTree() {
 
    },
    // 表單校驗
    checkForm() {
 
    },
    /** 共用方法 end */
 
    // 初始化一些信息
    init() {
 
    },
},

  created/mounted/updated 等各類生命周期函數(shù)

<!-- Recommended -->
methods: {
    
},
/** 生命周期勾子函數(shù) start */
beforeCreated() {
 
},
created() {
 
},
mounted() {
 
},
/** 生命周期勾子函數(shù) end */

  style 模塊

  @import 寫在最前;

  樣式書寫順序與頁面結構一致;

  嵌套層級最多請不要超過3層;

  慎重考慮是否添加 scoped 屬性。


<