vue.jsのサンプルコード

単純なテキストを表示する。

{{ message }}
{{ message }}
Hover your mouse over me for a few seconds to see my dynamically bound title!

表示/非表示の切り替え

v-if=

Now you see me

配列の表示

data: {
todos: [
{ text: 'Learn JavaScript' },

{{ todo.text }}
  1. {{ todo.text }}

クリック時のイベントを制御する

v-on:click=

{{ message }}

双方向バインディング

v-model=

{{ message }}

コンポーネントを使用する。