Vue.js データバインディングの基礎
前回はこちら
Vue.jsの始め方(html/css/js/jQueryがある程度わかる方向け)
データバインディングとは？
jsfiddleで実際に記述しながら読むことをおすすめします。
データバインディングとは一言でいうと
データと描画を同期する仕組みです
まずは簡単な例を見てみましょう。
以下はVue.jsを利用したバインディングです。
JQueryで記述すると以下です。
比べるとVue.jsの記述はかなりスッキリします。
データバインディングには以下の３種類があります。
双方向バインディング(two way)
単方向バインディング(one way)
ワンタイムバインディング(one time)
ルートテンプレートの作成
まずは以下を記述しましょう
<div id="app">
</div>
<script src ="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
var app = new Vue({
el: '#app',
})
divタグで設定されたid=app部分をルートテンプレートと呼びます。
htmlのbodyタグ内でどこでも設置可能です。
id=appの中でvue.jsは動作をするということです。
テキストのデータバインディング
ではテキストをデータバインディングしてみましょう。
<div id="app">
<p>{{message}}</p>
</div>
<script src ="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
var app = new Vue({
el: '#app',
data:{
message:'Hello Vue.js!'
}
})
htmlに記述した {{ }} 部分をマスタッシュ構文と呼び
jsに記述したdata部分をデータオプションと呼びます。
Vueでmessageの値をバインディングしてhtmlに渡しているという仕組みです。
id=appのdivタグの外側ではバインディングできないので注意しましょう。
dataオプションにオブジェクトや配列要素を設定
<div id="app">
<p>{{message}}</p>
<p>{{count}}</p>
<p>{{user.prefecture}}</p>
<p>{{colors[1]}}</p>
</div>
<script src ="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
var app = new Vue({
el: '#app',
data:{
message:'Hello Vue.js!',
count:10,
user:{
lastName:'Yamada',
firstName:'Taro',
prefecture:'Tokyo'
},
colors:['Red','Green','Blue']
}
})
上記のようにデータとして文字列だけでなく
数字、オブジェクト、配列もバインディング可能です
ディレクティブとは
ディレクティブとはVue.jsで設定された特別な属性です。
directive(指令)という意味を持ち接頭辞として「v」がつきます。
代表的なディレクティブは以下です。
v-bind b-if v-show v-for v-on v-model
使用のイメージ
<input type="text" v-bind:value="message">
まずはhtmlのタグに埋め込む認識でOKです。
属性のデータバインディングv-bind
<div id="app">
<input type="text" v-bind:value="message">
</div>
<script src ="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
var app = new Vue({
el: '#app',
data:{
message:'Hello Vue,js!'
}
})
こちらはv-bindディレクティブでmessageをバインディングしています。
マスタッシュ構文{{}}と違って属性としてinputへ値を渡しています。
結果は同じですが使い方も記述も異なりますので覚えましょう。
条件分岐v-if
v-ifディレクティブを使うと要素の表示非表示を切り替えることができます。
<div id="app">
<p v-if="toggle">hello</p>
</div>
<script src ="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
var app = new Vue({
el:'#app',
data:{
toggle:true //falseで非表示
}
})
こちらはv-ifディレクティブのdataオプションとしてtoggleを設定し
true/falseで表示非表示を切り替えています。
このときhelloの文字はDOMレベルで生成/削除されるので
描画コストが高くなる可能性がることに注意しましょう。
頻繁に書き換えが起きる要素には次回紹介する
v-showディレクティブを使用しましょう。
次回はこちら
Vue.js ディレクティブの基礎１