クラスのデータバインディング クラスのデータバインディングの基本の書き方はこうなる。 例えば文字を大きくする場合 JavaScript var vm = new Vue({ el: '#vm', data: { isLarge: true } }) HTML <div id="vm"> <p> Hello <span v-bind:class="{large: isLarge">Vue.js!</span> </p> </div> CSS .large { font-size: 36px; } isLar…

監視プロパティ 特定のデータないし算出プロパティの状態を監視することで、変化時に登録しておいた処理を自動で実行できるプロパティのこと。 ウォッチャとも呼ばれる。 使い方をコードで確認する。 HTML <div id="vm"> <p> <input type="text" v-model:value="message"> </p> <p>{{ message }}</p> <pre>{{ $data }}</pre> </div> Javascript var vm…

算出プロパティとは 関数によって算出したデータを返せる。 プロパティ名はcomputedとなる。 JS var vm = new Vue({ el: '#vm', data: { comment: "Hello Vue.js!" }, // 算出プロパティ: ここでは文字の反転をさせる。 computed: { reversedComment: functi…

バインディング式 マスタッシュタグ内部のテキストのこと。 いくつかの種類がある。 JavaScript式 単一式であればマスタッシュタグ内にJSのように書くことができる。 JS var vm = new Vue({ el: '#vm', data: { message: 'Hello Vue.js!', num: 100, ok: tru…

テンプレート制御ディレクティブ v-once 初回だけテキストバインディングを行いたい時に使う。 例えばボタンを押すと文字列が反転するfunctionを書いてみる。 HTMLコードはこう <div id="vm"> <p>{{ message }}</p> <button v-on:click="clickButton">Click!</button> </div> <script src="https://cdn.jsdelivr.net/npm/vue"></script> 文字列を反転させたいのでsplitで分けてreverseで反転…

ベースのHTMLの作成 まずは表示させる目標物の確認。 今回はこんな形をゴールにする。 インプットで入力した文字がAddボタンを押されることで下のリストに表示されるようになっている。 それではHTMLを作成する。 <div id="app"> <h2>toDo List</h2> <form> <input type="text"> <button> Add </button> </form> <ul> <li> <input type="checkbox"> <span>Vue.jsの勉強</span> <button>Delete</button></li></ul></div>…

ディレクティブの例の続き 昨日に引き続きディレクティブの具体例をまとめていく。 この2つはボリュームが多かったので分けておいた。 v-on ボタンなどを使ってイベントを作成する。 例えば時間を表示させてみる。 まずはHTMLファイルを用意。 <div id="app"> <button v-on:click="onclick"> 今何時？ </button> <p>{</p></div>…