VueJsプログラミング仕様

良いプログラミングプラクティスは良い習慣をコーディング、エラーの確率を減らすことができます良い人書き込みコードの可読性、保守性、標準のコーディングスタイルの習慣、チーム間の通信コストを削減します。この記事では、コーディング標準を説明しVueJS

コンポーネントと呼ばれる複数の単語

コンポーネント名は、常に複数の単語、ルートコンポーネントであるべきAppと<transition>、<component>内蔵の部品のような点が異なります。それはHTML要素の名前は一つの単語であるので、そうすることで、紛争の既存および将来のHTML要素を回避します。

// 错误
 Vue.component('html', {
      template: `
      <h2>{{ name }}</h2>
    `,
      data() {
        return {
          name: 'jack'
        }
      }
    })
// 正确
 Vue.component('k-html', {
      template: `
      <h2>{{ name }}</h2>
    `,
      data() {
        return {
          name: 'jack'
        }
      }
    })

HTML要素の構成要素として、プログラム名を使用する場合は文句を言うでしょう

コンポーネントのデータ

コンポーネントはdata、アセンブリで使用する場合、関数でなければならないdata属性（新しいヴュー以外の場所）の時、それは目的関数の値を返す必要があります。
ときにdata値が目標であり、それは、このコンポーネントのすべてのインスタンス間で共有されます。

// 错误
 Vue.component('k-html', {
      template: `
      <h2>{{ name }}</h2>
    `,
      data: {
        name: 'jack'
      }
    })
// 正确
Vue.component('k-html', {
      template: `
      <h2>{{ name }}</h2>
    `,
      data() {
        return {
          name: 'jack'
       }
     }
  })

プロップの定義

Prop定義は、あなたが提出されたコードでは、可能な限り詳細にする必要がありprop、その型を指定するために少なくとも必要で、可能な限り詳細に定義がなければなりません。利点は次のとおりです。

• 彼らはすべて簡単にコンポーネントを使用することを理解し、APIコンポーネントを述べました。
• 開発環境では、不正な形式のコンポーネントに提供されている場合prop、Vueあなたがエラーの潜在的な原因を捕まえるのに役立つ警告となります。

// 错误做法
Vue.component('k-html', {
      template: `
      <h2>{{ name }}</h2>
    `,
      props: ['age'],
      data() {
        return {
          name: 'jack'
        }
      }
    })
// 正确做法
 Vue.component('k-html', {
      template: `
      <h2>{{ name }}</h2>
    `,
      props: {
        age:{
          type:Number,
          require:true
        }
      },
      data() {
        return {
          name: 'jack'
       }
     }
  })

V-のためにキーを設定します

必ずkey協力しv-for、内部コンポーネントとそのサブツリーの状態を維持するように。でも、要素の予測可能な動作を維持します。

// 错误
 <div id="app">
      <k-html :age="21"></k-html>
      <ul>
        <li v-for="(item) in list">{{ item.name }}</li>
      </ul>
  </div>
// 正确
 <div id="app">
      <k-html :age="21"></k-html>
      <ul>
        <li v-for="(item) in list" :key="item.id">{{ item.name }}</li>
      </ul>
 </div>

避けてくださいv-forとv-if中古一緒に

置いてはいけませんv-ifとv-for同時に要素で使用、ので、v-for比率v-ifが存在する可能性があるため、私はリストをレンダリングする、優先順位が高いのが、リストはそう表示されません、このショーのための条件を満たしていません。

// 错误
      <ul>
        <li v-if="isShow" v-for="(item) in list" :key="item.id">{{ item.name }}</li>
      </ul>
// 正确
      <ul>
        <template v-if="isShow">
          <li v-for="(item) in list" :key="item.id">{{ item.name }}</li>
        </template>
      </ul>

コンポーネントのスタイルのためのスコープを設定します

アプリケーションのために、トップレベルのAppアセンブリおよびコンポーネントレイアウトスタイルは、グローバルであることができるが、他のすべてのコンポーネントは、スコープされるべきです

<style scoped>
.cls {
  border: none;
  border-radius: 2px;
}
.btn-cls {
  background-color: red;
}
</style>

プライベートプロパティ名

使用モジュールのスコープはプライベート関数は、外部からのアクセスを許可していないまま。これが不可能な場合、それは常にあることなど、プラグイン混合外部のパブリックAPIのカスタム私有財産の使用と見なされていない$_接頭辞を。そして、他の作家との競合を避けるために、名前空間が付属しています。

Vueが使用_ので、インスタンスの属性を上書きするのと同じプレフィックスリスクを使用し、独自のプライベートプロパティを定義する接頭辞を。

    const app = new Vue({
      el: '#app',
      data: {
        message: 'Hello Vue!',
        isShow: true,
        list: [
          {
            id: 1,
            name: 'jack'
          },
          {
            id: 2,
            name: 'tom'
          },
          {
            id: 3,
            name: 'mary'
          }
        ]
      },
      methods: {
        $_k_update() {
          
        }
      },
    })