ドキドキVue.js②
昨日の続きから。
今日やった内容は、以下。
まずは、データバインドから。
記載方法は以下。
<要素 v-model="プロパティ名">
このデータバインドというのは、コンポーネントの持つデータ(jsファイルのデータ)とフォームコントロールの入力値(画面)に対して双方向にバインドさせる。
要は、どちらかが変更されたら、もう一方も変更するよというもの。
①チェックボックス（複数）
→データが配列となる
--HTML--
<input type="checkbox" v-model="check">・・・
--
var app = new Vue({
el:"#app"
data:{
check:[] ←配列で受け取る
}
②セレクトボックス
→特に注意店はないが、一応記載する。
--HTML
<select v-model="sel"> <option value="a"></option></select>
--JS
var app = new Vue({
el:"#app"
data:{
sel:""
}
次にトランジション。
トランジションとは、アニメーションのようなものでゆっくり動作するようなもの。
HTMLに<transition>タグを用いる。
CSSには .v-enterなどを使用する。
最後にコンポーネントについて。
Vue.component{'コンポーネント名',{コンポーネントオプション}}
で定義する。
--HTML
<div id="app">
<test-tag></test-tag>
</div>
--コンポーネント.js(test-tag.js)
Vue.component{'testTag',
template : '<div>{{msg}}</div>'',
data:function{return {msg:"こんにちわ"}}
}
--js（コンポーネントを関連づける）
var app=new Vue({
el:"#app",
components:{
test-tag : "testTag"
}
})
以上。
