最終更新:2018-03-26 (月) 16:30:27 (2225d)
Vue.js/テンプレート
基本 (Mustache)
<div id="app"> ｛｛ message ｝｝ </div>
var app = new Vue({ el: '#app', data: { message: 'Hello Vue!' } })
メモ
- Mustache は、HTML 属性の内部で使用することはできません。代わりに、v-bind ディレクティブを使用してください
JavaScript
- 実際には Vue.js は全てのデータバインディング内部で JavaScript 式を完全にサポートします
｛｛ number + 1 ｝｝ ｛｛ ok ? 'YES' : 'NO' ｝｝ ｛｛ message.split('').reverse().join('') ｝｝ <div v-bind:id="'list-' + id"></div> - テンプレート式はサンドボックスで、Math や Date といったホワイトリストにあるグローバルオブジェクトだけアクセスできます
- ディレクティブ属性値は、単一の JavaScript 式を期待します
バインド
v-bind
- title属性をdata:messageとバインド
<span v-bind:title="message"> Hover your mouse over me for a few seconds to see my dynamically bound title! </span>
v-model
- 双方向バインディング
<div id="app-6"> <p>｛｛ message ｝｝</p> <input v-model="message"> </div>
v-once?
- 一度だけ展開
生のHTML
- 通常はデータをテキストとして扱う
- HTMLとして出力するにはv-html
<span v-html="rawHtml"></span></p>
ディレクティブ
引数
<a v-bind:href="url"> ... </a>
- ここでの href は v-bind ディレクティブに要素の href 属性に式 url の値を束縛することを教えるための引数です。
Vue.js/修飾子?
省略記法
v-bind 省略記法
<!-- 完全な構文 --> <a v-bind:href="url"> ... </a> <!-- 省略記法 --> <a :href="url"> ... </a>
v-on 省略記法
- @click
<!-- 完全な構文 --> <a v-on:click="doSomething"> ... </a> <!-- 省略記法 --> <a @click="doSomething"> ... </a>
Vue
Vue.js/算出プロパティ
Vue.js/メソッド?
- Vue.methods?
Vue.js/監視プロパティ?
オブジェクト構文
- active クラスが存在するかどうかを、データプロパティの isActive が true と評価される値かによって決まる
<div class="static" v-bind:class="{ active: isActive, 'text-danger': hasError }"> </div> <div v-bind:class="classObject"></div> data: { classObject: { active: true, 'text-danger': false } }
配列構文
- <div v-bind:class="[activeClass, errorClass]"></div>
key による再利用可能な要素の制御
v-show
- 参照する値がtrueとして評価され場合は表示し、falseとして評価される場合はdisplay:none等のスタイルが付いて非表示になる
<h1 v-show="hoge">Hello!</h1>
JavaScriptの制限
- Vue は配列で以下の変更を検出することはできません:
- インデックスでアイテムを直接設定するとき。例: vm.items[indexOfItem?] = newValue
- 配列の長さを変更するとき。例: vm.items.length = newLength
vm.items[1] = 'x' // リアクティブではありません vm.items.length = 2 // リアクティブではありません
- Vue はプロパティの追加や削除を検出することはできません
