最終更新:2018-03-26 (月) 16:30:27 (231d)  

Vue.js/テンプレート はてなブックマークを見る
Top / 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 はプロパティの追加や削除を検出することはできません

v-forv-if

  • 同じノードに存在するとき、v-forv-ifよりも高い優先度を持ちます。