vue-01-bind

vue.js 2.x で間違えやすいこと

  1. bodyに直接バインドはできません。body直下全体をdivで囲んでバインドでOK。
  2. computedやmethodsやwatchで、() => {...} による関数記述は許可されていません。
  3. elプロパティに指定するのはセレクタです。idに対してであれば、#が必要です。

vue.js 3.x (Option API style)での変更点まとめ

  1. new Vue()は、Vue.createApp()になりました。戻り値はApplicationになりました。
  2. elプロパティは廃止され、Application.mount()でバインドするようになりました。
  3. dataプロパティはメソッド形式が必須になりました。
  4. 詳細は、https://v3-migration.vuejs.org/breaking-changes/を参照してください

以下サンプル

example-01 本文は二重中括弧
{{ message }}
example-02 属性はv-bind:（:で略記可能）
Hover here.
example-03 属性はv-bind:（class属性はjson形式OK）
Please show F12 > Elements.
example-04 v-once（元データが変わっても表示は変わりません）
{{ message }}
example-05 v-html（注意！ ユーザーから提供されたデータに対して使用禁止）
example-06-1 v-on:clickとmethods（@で略記可能）
example-06-2 v-on:clickとmethods（@で略記可能）
example-07 v-model（双方向バインディング）
example-08 v-if, v-else, key特殊属性
Now you see meElse!
example-09 v-for, key特殊属性
  1. インデックス={{i}}, text={{ todo.text }}
example-10 computedプロパティ
{{ reversedMessage }}
example-11 templateタグ

以下補足

mountにはバインド先のCSSセレクタを記載する
dataハンドラは、初期データのjsonを返却する
createdハンドラは、初期化時に呼ばれる（vue の createdを参照のこと）
computedプロパティは、dataをoopフィールドと見立てた場合のoopプロパティである。
methodsプロパティは、dataをoopフィールドと見立てた場合のoopメソッドである。
watchプロパティは、dataやcomputedに対する変更監視ができる。（vue の watchを参照のこと）
templateタグ（html5にあるjsとの連携を前提とした初期では非表示な内容）はv-ifを認識する
テンプレート構文での式形式、動的引数、修飾子、は以下を参照の事
https://v3.ja.vuejs.org/guide/template-syntax.html
各構文は触りしか説明していない。修飾子等のオプションは公式サイトを参照の事