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

目的地が設定できる手帳のような使い心地のTODOアプリを公開しています。

スポンサードリンク

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を記述するとマスタッシュにバインドされた変数は変更を受け付けない

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>

マスタッシュは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>

var app1 = new Vue({
  el: '#app1',
  data: {
    preData: 'pre data'
  }
})
app1.once = "change data";

<!-- echo {{preData}} -->
<h2 v-pre>{{ preData }}</h2>

サンプルコード

リンク