vueコード多重化の3つのポーズ

2165 ワード

合格したプログラマー一人一人がコード多重化が重要であることを知っていますが、vueでよく使われるコード多重化方式は3種類あります.鍵を一つ一つ解除しましょう.
一、コンポーネント
コンポーネント(Component)はVue.jsの最も強力な機能の一つです.コンポーネントはHTML要素を拡張し、再利用可能なコードをカプセル化することができます.より高いレベルでは、コンポーネントはカスタム要素、Vueである.jsのコンパイラは特殊な機能を追加します.場合によっては、コンポーネントは、is特性で拡張されたオリジナルHTML要素の形式であってもよい.
実際の使用では、単一ファイルコンポーネントをより多く使用し、コンポーネントとしてHTML要素(表示内容)にコード多重化を実現します.コンポーネントの内容:




export default {
  name: 'hello',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  }
}

参照コンポーネント:




import Hello from './components/Hello' //     
export default {
  name: 'app',
  components: {
    Hello //     
  },
  data () {
    return {
    }
  }
}

二、カスタム命令
Vue 2.0では、コード多重化の主な形式と抽象はコンポーネントです.しかし、純粋なDOM要素を最下位に操作する必要がある場合もあります.この場合、カスタムコマンドが使用されます.
公式サイトの言い方は抽象的で理解しにくいが、実際には2つの状況でカスタムコマンドを使用するのが一般的だ.

パラメータは簡単ですが、パラメータは常に修正されたコンポーネントを必要とし、コンポーネントは他の要素と簡単な依存関係を持っています.たとえばロード効果、データロード時にロードページを表示し、ロードが完了したらロードページを非表示にし、データを表示します.コンポーネント方式で多重化する場合は、HTMLにコンポーネントを追加する必要があります.また、オブジェクトで参照する必要があります.カスタムコマンドを使用するには、関連要素にコマンドを設定するだけでいいです.

は、バインド要素のサブ要素または様々な動作をリスニングまたは操作する.例えば無限スクロール効果

命令の定義:

//             v-focus
Vue.directive('focus', {
  //          DOM  。
  inserted: function (el) {
    //     
    el.focus()
  }
})
//          
directives: {
  focus: {
    //      ---
  }
}

使用命令:

三、導入対象或いは方法
第3の方法は多くの人がプラグインだと思っているが、実際にはそうではない.vueのプラグインはvueのためにグローバル機能を導入している.つまり、プラグインはオブジェクトをvueに導入する方法であり、局所的に使用すると使用時に引用することができる(vueでオブジェクトを参照するか、方法についてはこの文章を見ることができる:VueフレームワークがJSライブラリに導入される正しい姿勢).導入オブジェクトやメソッドはvueを使用しないでずっと使用しています.コンポーネント方式を使用するとHTML要素を多重化するときに使いやすいですが、HTML要素を多重化することは多くありません.あるいはjsコードを多重化するだけで、コンポーネントを使用するのは便利ではありません.従来のjsを引用する方法を使用すると適切です.

[spring]多種類の依存関係注入(DI)方法

コンピュータNetwoking - OSIモデル

vueコード多重化の3つのポーズ

{{ msg }}