<dd id="t699n"></dd>

  • <em id="t699n"></em>

    1. <dd id="t699n"></dd>

      以.vue為后綴的文件 內部書寫規范

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

        template 模塊

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

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

        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 屬性。


      黄网站免费 <