Vue.jsチートシート

日常のVue.jsコーディングセッションで使用する一般的なコマンドと手順

指令

ディレクティブは、によって識別される属性です。v-プレフィックス。

指令 説明
v-text 要素のテキスト値としてプロパティを使用します
v-html プロパティを要素のテキスト値として使用し、HTMLを解釈します
v-if 条件が真の場合にのみ要素を表示する
v-else 上記の場合、代替要素を示しますv-if偽です
v-else-if のelseifブロックを追加しますv-if構築する
v-show に似ているv-if、ただし、偽物であっても要素をDOMに追加します。に設定するだけですdisplay: none
v-for 配列または反復可能なオブジェクトを反復処理します
v-on DOMイベントを聞く
v-bind HTML属性をリアクティブに更新します
v-model フォーム入力の双方向バインディングを設定します。フォーム要素で使用され、ユーザーがフォームフィールド値を変更するとモデルが更新されます
v-once プロパティを1回だけ適用し、渡されたデータが変更されても更新されません。

v-bindそしてv-on省略形があります:

<a v-bind:href="url">...</a>
<a :href="url">...</a>
<a v-on:click="doSomething">...</a>
<a @click="doSomething">...</a>

の例v-if/v-else/v-else-if

<div v-if="type === 'A'">
  it's A
</div>
<div v-else-if="type === 'B'">
  it's B
</div>
<div v-else-if="type === 'C'">
  it's C
</div>
<div v-else>
  it's neither one
</div>

条件付き

三項演算子を使用して、式に条件を埋め込むことができます。

{{ isTrue ? 'yes' : 'no' }}

フォーム要素の操作

ユーザーがキーを押したときではなく、変更イベントが発生したときにモデルを更新するには、次を使用できます。v-model.lazyただの代わりにv.model

入力フィールドの操作、v-model.trim空白が自動的に削除されるので便利です。

また、文字列ではなく数字を受け入れる場合は、必ずv-model.number

イベントの変更

私が使うclick例として、ただしすべての可能なイベントに適用されます

  • v-on:click.nativeVueイベントの代わりにネイティブDOMイベントをトリガーする
  • v-on:click.stopクリックイベントの伝播を停止します
  • v-on:click.passiveを利用しますaddEventListenerのパッシブオプション
  • v-on:click.captureイベントバブリングの代わりにイベントキャプチャを使用する
  • v-on:click.selfクリックイベントが子イベントからバブルされたのではなく、その要素で直接発生したことを確認してください
  • v-on:click.onceイベントは1回だけトリガーされます
  • v-on:submit.prevent:電話event.preventDefault()トリガーされた送信イベントで、ページをリロードするためのフォーム送信を回避するために使用されます

伝播、バブリング/キャプチャの詳細については、JavaScriptイベントガイド

マウスイベント修飾子

  • v-on:click .leftマウスの左ボタンクリックでのみトリガーされます
  • v-on:click .rightマウスの右ボタンクリックでのみトリガーされます
  • v-on:click .middleマウスの中ボタンをクリックしたときにのみトリガーされます

特定のキーが押された場合にのみイベントを送信する

  • v-on:keyup.enter
  • v-on:keyup.tab
  • v-on:keyup.delete
  • v-on:keyup.esc
  • v-on:keyup.up
  • v-on:keyup.down
  • v-on:keyup.left
  • v-on:keyup.right

キーボードイベント修飾子

特定のキーボードキーも押された場合にのみ、イベントをトリガーします。

  • .ctrl
  • .alt
  • .shift
  • .meta(Macではcmd、WinではWindowsキー)

vバインド

  • v-bind .prop属性の代わりに小道具をバインドする
  • v-bind .camel属性名にキャメルケースを使用する
  • v-bind .syncに拡張するシンタックスシュガーv-onバインドされた値を更新するためのハンドラー。見るこの

ライフサイクルフック

  • beforeCreateアプリが作成される前に呼び出されます
  • createdアプリの作成後に呼び出されます
  • beforeMountアプリがDOMにマウントされる前に呼び出されます
  • mountedアプリがDOMにマウントされた後に呼び出されます
  • beforeDestroyアプリが破棄される前に呼び出されます
  • destroyedアプリが破壊された後に呼び出されます
  • beforeUpdateプロパティが更新される前に呼び出されます
  • updatedプロパティが更新された後に呼び出されます
  • activatedキープアライブコンポーネントがアクティブ化されたときに呼び出されます
  • deactivatedキープアライブコンポーネントが非アクティブ化されたときに呼び出されます

組み込みコンポーネント

Vueは5つの組み込みコンポーネントを提供します:

  • <component>
  • <transition>
  • <transition-group>
  • <keep-alive>
  • <slot>

Vueオブジェクトのグローバル構成

ザ・Vue.configオブジェクトには次のプロパティがあり、インスタンスの作成時に変更できます。

プロパティ 説明
silent デフォルトはfalse、trueの場合はログと警告を抑制します
optionMergeStrategies を定義することができますカスタムマージ戦略オプションについて
devtools デフォルトは、開発ではtrue、本番環境ではfalseです。これらの値を上書きできます。
errorHandler エラーハンドラ関数を設定できます。セントリーや他の同様のサービスをフックするのに便利
warnHandler 同様の警告ハンドラ関数を設定できますerrorHandler、ただしエラーではなく警告用
ignoredElements Vueに外部で定義されたカスタム要素を無視させるために使用されます。Webコンポーネント
keyCodes のカスタムキーエイリアスを定義できますv-on
performance デフォルトはfalseです。 trueに設定すると、ブラウザーDevToolsでVueコンポーネントのパフォーマンスをトレースします。
productionTip デフォルトはtrueです。コンソールでの開発中に「開発モードです」という警告を無効にするには、falseに設定します。

Vueオブジェクトのメソッド

方法 説明
Vue.extend Vueオブジェクトをサブクラス化して、カスタムプロファイルを作成できます
Vue.nextTick 次のDOM更新サイクルの後に実行されるコールバックを延期します
Vue.set オブジェクトにプロパティを追加します
Vue.delete オブジェクトからプロパティを削除します
Vue.directive グローバルディレクティブを設定(または取得)する
Vue.filter グローバルフィルターを設定(または取得)
Vue.component グローバルコンポーネントを設定(または取得)する
Vue.use Vue.jsプラグインをインストールします
Vue.mixin グローバルミックスインを設定する
Vue.compile テンプレート文字列をレンダリング関数にコンパイルします
Vue.version 現在インストールされているバージョンのVueを返します

Vueオブジェクトに渡されるオプション

Vueオブジェクトを初期化するときは、オブジェクトを渡します。

const vm = new Vue({

})

このオブジェクトは、いくつかのプロパティを受け入れます。

プロパティ 説明
data Vueアプリで使用される一連のリアクティブデータを渡すことができます。すべてのリアクティブプロパティは初期化時に追加する必要があります。後で新しいプロパティを追加することはできません。
props これは、入力データとして親コンポーネントに公開される属性のセットです。
propsData 小道具のデフォルトデータ。テスト中にのみ役立ちます
methods Vueインスタンスで定義されている一連のメソッド
computed メソッドと同様ですが、内部的にキャッシュされます
watch プロパティを監視し、プロパティが変更されたときに関数を呼び出すことができます

データ、メソッド、および計算されたプロパティの定義例:

var vm = new Vue({
  el: '#example',
  data: {
    message: 'Hello'
  },
  methods: {
    reverseMessageAsMethod: function () {
      return this.message.split('').reverse().join('')
    }
  },
  computed: {
    // a computed getter
    reversedMessage: function () {
      // `this` points to the vm instance
      return this.message.split('').reverse().join('')
    }
  }
})

console.log(vm.reverseMessageAsMethod) // => ‘olleH’ vm.message = ‘Goodbye’ console.log(vm.reversedMessage) // => ‘eybdooG’

DOM

  • elインスタンスがマウントされるDOM要素を設定します。 CSSセレクターまたはHTMLElementにすることができます
  • templateマウントされた要素を置き換える、文字列として表されるテンプレートです
  • renderまたは、テンプレートを定義するために、レンダリング関数を使用してテンプレートを定義できます。
  • renderError関数がに接続されているときに代替出力を設定しますrender失敗する

Vueインスタンスアセット

  • directivesVueインスタンスに関連付けるディレクティブのセット
  • filtersVueインスタンスに関連付けるフィルターのセット
  • componentsVueインスタンスに関連付けるコンポーネントのセット

Vue構成オプション

  • parent親インスタンスを指定します
  • mixinsミックスインオブジェクトの配列を設定します
  • extends別のコンポーネントを拡張する

その他のVueオブジェクトオプション

  • nameコンポーネントに名前を設定すると、コンポーネントを呼び出すことができ、デバッグや、テンプレートにコンポーネントを再帰的に追加する必要がある場合に役立ちます。
  • functionaltrueの場合、コンポーネントをステートレスに設定します(いいえdata)およびインスタンスレス(いいえthis)、より軽量に
  • modelイベントで使用されるプロパティをカスタマイズできます。たとえば、フォームを操作するときに便利です。
  • commentsデフォルトはfalseです。 trueに設定すると、テンプレートに配置されたHTMLコメントが保持されます

インスタンスのプロパティ

Vueのインスタンスが与えられ、変数に格納されますconst vm = new Vue(/*...*/)、あなたはそれを調べて相互作用することができます。

Vueインスタンスのプロパティ

  • vm.$dataインスタンスに関連付けられたデータオブジェクト
  • vm.$propsインスタンスが受け取った小道具
  • vm.$elインスタンスがバインドされているDOM要素
  • vm.$optionsVueインスタンスをインスタンス化するために使用されるオブジェクト
  • vm.$parent親インスタンス
  • vm.$rootルートインスタンス(これがルートインスタンスの場合、これはそれ自体を指します)
  • vm.$children子インスタンスの配列
  • vm.$slotsテンプレートに含まれる関連スロットの配列
  • vm.$scopedSlots関連するスコープスロットの配列
  • vm.$refsが指す各要素のプロパティを含むオブジェクトrefテンプレートで定義された属性
  • vm.$isServerVueインスタンスがサーバー上で実行されている場合はtrue(サーバー側のレンダリングで役立ちます)
  • vm.$attrsコンポーネントに提供されているが、小道具として定義されていない属性のオブジェクト
  • vm.$listenersのオブジェクトv-onコンポーネントに割り当てられたイベントリスナー

メソッドデータ

  • vm.$watchVueデータのプロパティ変更のウォッチャーを設定します。オブジェクト内の値の変化を監視することもできます
  • vm.$setプロパティを設定する
  • vm.$deleteプロパティを削除する

イベント

  • vm.$emitでカスタムイベントをトリガーしますvmVueインスタンス
  • vm.$onでカスタムイベントを聞くvmVueインスタンス
  • vm.$onceお気に入り$on、しかし一度だけ聞く
  • vm.$offVueインスタンスからイベントリスナーを削除します

ライフサイクルメソッド

  • vm.$mountまだマウントされていない場合は、VueインスタンスをDOM要素にマウントします
  • vm.$forceUpdate強制するvm再レンダリングするVueインスタンス。子コンポーネントを強制的に再レンダリングしません。
  • vm.$nextTickコールバックを受け入れ、次のDOM更新サイクルのためにそれをスケジュールします
  • vm.$destroyアプリケーションを破棄し、すべての子コンポーネント、オブザーバー、リスナーを削除します

私の無料ダウンロードVueハンドブック


その他のvueチュートリアル: