0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

Vue.jsまとめ② Vue.jsの基礎、テンプレート構文

Posted at

下書きが上限に達しているので仮の状態で投稿しています

{{}}二重中括弧でdataやmethodsの値を呼び出す
単一の式を書く

Vueインスタンス内で自分のインスタンスにアクセスするときはthisを使う

v-text
テキストを表示
v-once
一度だけ描画される
後から変更されない
v-html
htmlで表示する
悪戯できるから信頼のあるものだけ扱う

v-vind:属性、:属性に省略できる
(属性)を呼び出す
:[属性]で動的に呼び出せる
v-vind="オプジェクト"でまとめて呼び出せる

v-on:動作、@動作に省略できる
動作をした瞬間に動作を実行する
イベントオブジェクトを取得できる(methodsにeventの引数を与える、v-on側にはいらない)
v-on:動作="関数(引数)"で引数を持たせられる。イベントと一緒に使うときは$eventも使う
イベント修飾子、v-on:動作.stopで停止、.preventでデフォルトの挙動を阻止
キー修飾子、.enterや.spaceなどで特定のキーのみに反応するようにできる
v-on:[動作]で動的に呼び出せる

v-model、双方向データバインディング
テンプレート側からモデル側を変更することができる(通常はモデルからテンプレート)

computedプロパティ
動的な表現ができる(dataではどうできな表現はできない)

computedとmethodsの違い
computed,参照先の値の変化時に更新、()付けない、推奨
methods,関係ない値の変化時にも更新、()付ける

computedとwatchの違い
computed,同期処理 
watch,非同期処理 computedでできない時に使う

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?