Vue.js データバインディング入門


HTML内に記述する{{}}はマスタッシュ構文と呼ぶらしい。

マスタッシュに式を記述
var app1 = new Vue({
  el: '#app1',
  data: {
    tel: '00,0000,0000'
  }
})

00-0000-00と日時が表示

<div id="app1" class="frame">
  <h1>{{tel.split(',').join('-')}}</h1>
  <h2>{{ new Date() }}</h2>
</div>

但し、マスタッシュ内に変数初期化やインクリメント、if文を記述したりするとエラーになる。

データがリアクティブにならないケース

双方向バインディングされるのはVueインスタンス作成時にコンストラクタで指定された要素のみ。よって、後から付け加えられたプロパティに対しては適用されない。

<h2>{{ dontSync }}</h2>
var app1 = new Vue({
  el: '#app1',
  data: {
    sync: ''
  }
})
//defaultは表示されない
app1.dontSync = "default";

Vueインスタンス生成時にまだ値が決まらない時はプロパティの宣言だけをしておく。

また、以下のように記述すると何故かdontSyncがバインドされた。defaultと表示されるがリアクティブとはならず、値を変更しても変化は起こらない。

<h2>{{ dontSync }}</h2>
<h2>{{ sync }}</h2>
var app1 = new Vue({
  el: '#app1',
  data: {
    sync: ''
  }
})
//defaultは表示される
app1.dontSync = "default";
app1.sync = "sync"
マスタッシュに配列やオブジェクトをバインド

マスタッシュに配列やオブジェクトを与えるとシリアライズダンプされて表示

var app1 = new Vue({
  el: '#app1',
  data: {
    array: [1,2,3],
    obj: {key: "value"}  }
})

[ 1, 2, 3 ] { "key": "value" }と表示

<h2>{{ array }}</h2>
<h2>{{ obj }}</h2>
v-once マスタッシュを一度しか展開しない

v-onceを記述するとマスタッシュにバインドされた変数は変更を受け付けない

var app1 = new Vue({
  el: '#app1',
  data: {
    once: 'bind data',
  }
})
app1.once = "change data";
<!-- echo change data -->
<h2>{{ once }}</h2>
<!-- echo bind data -->
<h2 v-once>{{ once }}</h2>
v-html VueオブジェクトからHTMLを埋め込む

マスタッシュはHTMLエンティティをエスケープして埋め込む、HTMLエンティティを埋め込む場合、v-htmlを使用する。

var app1 = new Vue({
  el: '#app1',
  data: {
    htmlText: '<span style="color:red">escape entity</span>'
  }
})
app1.once = "change data";
<h2>{{ htmlText }}</h2>
<h2 v-html="htmlText"></h2>
v-pre マスタッシュを展開しない
var app1 = new Vue({
  el: '#app1',
  data: {
    preData: 'pre data'
  }
})
app1.once = "change data";
<!-- echo {{preData}} -->
<h2 v-pre>{{ preData }}</h2>

サンプルコード

Vue-Samples/databind.html at master · letitride/Vue-Samples · GitHub