1
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 テンプレート構文メモ

Posted at

Vue.jsについて勉強したことのメモです

テンプレート構文

Vueインスタンスのデータと描画されたDOMを宣言的に対応させることができる
HTMLではない

テキスト

Mustache構文を利用したテキスト展開

<p>{{ message }}</p>

Mustache構文ではJavaScriptの単一の式も使える

<!-- scriptのdata内でokをtrueかfalseに設定 -->
<p>{{ ok ? 'Yes' : 'No' }}<p>

ディレクティブ

v-から始まる属性

v-bind

属性を対応付けられる
オブジェクト形式で書ける
v-bind:は:で省略可

<a v-bind:href="url"> ... </a>

v-on

イベントを受け取れる

<button v-on:click="countUp">カウント</button>

v-model

画面とデータのどちらでもデータを流すことができる双方向データディバイディングを書ける

<input type="text" v-model="message">
1
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
1
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?