Help us understand the problem. What is going on with this article?

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チートシート | コレワカ

engineerhikaru
💻Web制作 / 📱アプリ開発に役立つ情報を発信するアカウントはこちら / システム開発〜Web制作〜アプリ開発を経験
https://korenarawakaru.com/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away