双方向データバインディング テンプレートとデータオブジェクトの双方向のデータを反映することを双方向データバインディングと呼ぶ 以下のソースコードではテキストボックスに入力された名前に応じて「こんにちは、○○さん！」という挨拶を表示する ※v-model…

Vueではhtmlに対してディレクティブと呼ばれる属性形式の命令を付与することで、ページに機能を付与している <a v-bind: href="url">...</a> ディレクティブは用途に応じて以下のように分類できる 分類 概要 主なディレクティブ データバインド 式の値をページに反映 v-bind, v-htmlな…

Vueクラスのdataオプションに登録されたデータは変更があれば自動的にページに反映される 以下のコードを実行すると現在時刻が表示され、1秒毎に更新される <div id="app"> <p>現在時刻：{{ current.toLocaleString() }}</p> </div> new Vue({ el: "#app", data: { // 現在時刻 current:…

Vue.jsの基礎となる3つのしくみについて書いていく ディレクティブ 算出プロパティおよびメソッド ライフサイクルフック 1. ディレクティブ テンプレートに属性やスタイルの操作、条件分岐、繰り返し処理など、より複雑な機能を組み込みたい場合は、ディレク…

JavaScriptフレームワークのVueについて勉強し始めたのでメモ Vueの特徴 コンポーネント指向 仮想DOMを利用している ルーティングやグローバルの状態管理は関連ライブラリに担当させている プログレッシブに導入できる 導入方法（選択肢は3つ） CDN経由でラ…