Vue.js文法チートシート

この内容について

この内容は、私が運営しているサイトに、より見やすく掲載しているので、よければそちらもご活用ください。
Vue.jsチートシート | コレワカ

Vue.jsとは

Vue.jsはUI構築のためのJavaScriptプログレッシブフレームワークのこと
Vue.js公式サイト

基本的な書き方

HTML

<div id="app">
  <!-- Vue.js適用範囲 -->
</div>

Vue

var vm = new Vue({
  el: '#app'
});

オプション

el

Vue.jsの機能を適用するDOMの指定

See the Pen Vue.js_el by engineerhikaru (@engineerhikaru) on CodePen.

data

データを保持する(データの変数化)。{{ 変数名 }}で出力可能

See the Pen Vue.js_data by engineerhikaru (@engineerhikaru) on CodePen.

methods

v-onのイベントハンドラとして使用

See the Pen Vue.js_ methods by engineerhikaru (@engineerhikaru) on CodePen.

computed

算出プロパティ。データの自動更新をし、計算結果はキャッシュに保存。getでは必ず戻り値が必要

See the Pen Vue.js_ computed by engineerhikaru (@engineerhikaru) on CodePen.

watch

監視プロパティ。特定のプロパティの値の変更を監視し、変更時に設定した関数を実行

See the Pen Vue.js_watch by engineerhikaru (@engineerhikaru) on CodePen.

template

文字列,HTMLコードをテンプレート化する。コンポーネント機能と共に使用

See the Pen Vue.js_template by engineerhikaru (@engineerhikaru) on CodePen.

props

コンポーネント機能でデータを参照する

See the Pen Vue.js_props by engineerhikaru (@engineerhikaru) on CodePen.

created

インスタンスが作成された後(DOMは生成されていない)に実行するオプション

See the Pen Vue.js_created by engineerhikaru (@engineerhikaru) on CodePen.

mounted

DOMが生成された後に実行するオプション

See the Pen Vue.js_mounted by engineerhikaru (@engineerhikaru) on CodePen.

ディレクティブ

v-text

テキストデータを出力

See the Pen Vue.js_v-text by engineerhikaru (@engineerhikaru) on CodePen.

v-html

HTMLデータを出力

See the Pen Vue.js_v-html by engineerhikaru (@engineerhikaru) on CodePen.

v-show

条件分岐(createdフックは最初のみ実行)

See the Pen Vue.js_v-show by engineerhikaru (@engineerhikaru) on CodePen.

v-if, v-if-else, v-else

条件分岐

See the Pen Vue.js_v-if by engineerhikaru (@engineerhikaru) on CodePen.

v-for

ループする

See the Pen Vue.js_v-for by engineerhikaru (@engineerhikaru) on CodePen.

v-on, @

イベントを処理する

See the Pen Vue.js_v-on by engineerhikaru (@engineerhikaru) on CodePen.

v-bind, :

HTMLの属性を指定する

See the Pen Vue.js_v-bind by engineerhikaru (@engineerhikaru) on CodePen.

v-model

入力データと指定したデータをリンクする

See the Pen Vue.js_v-model by engineerhikaru (@engineerhikaru) on CodePen.

v-pre

{{}}をそのまま表示する

See the Pen Vue.js_v-pre by engineerhikaru (@engineerhikaru) on CodePen.

v-cloak

{{}}が表示されるのを防ぐ(最初に表示される事がある)

See the Pen Vue.js_v-cloak by engineerhikaru (@engineerhikaru) on CodePen.

v-once

レンダリングを一度だけ実行(データの変更を適用しない)

See the Pen Vue.js_v-once by engineerhikaru (@engineerhikaru) on CodePen.

グローバル設定

silent

警告,エラーメッセージの表示,非表示を指定する

Vue

Vue.config.silent = true;

この内容について

この内容は、私が運営しているサイトに、より見やすく掲載しているので、よければそちらもご活用ください。
Vue.jsチートシート | コレワカ