Vue.jsチートシート
Vue.jsとは
Vue.jsはUI構築のためのJavaScriptプログレッシブフレームワークのこと
基本文法
Vue.jsはVueインスタンスを用いて、実装します
<div id="app">
<!-- Vue.js適用範囲 -->
</div>
var vm = new Vue({
el: '#app'
});
オプション
el
Vue.jsの機能を適用するDOMの指定
<div id="app">
<!-- Vue.js適用範囲 -->
</div>
var vm = new Vue({
el: '#app'
});
data
データを保持する(データの変数化)。{{ 変数名 }}で出力可能
<div id="app">
<p>{{ hoge }}</p>
</div>
var vm = new Vue({
el: '#app',
data: {
hoge: 'Hello'
}
});
算出プロパティ。データの自動更新をし、計算結果はキャッシュに保存。getでは必ず戻り値が必要
<div id="app">
<p>税抜価格:<input type="text" v-model="exTax"></p>
<p>税込価格:<input type="text" v-model="inTax"></p>
</div>
var vm = new Vue({
el: '#app',
data: {
exTax: 100
},
computed: {
inTax: {
get: function(){
return parseInt(this.exTax * 1.1);
},
set: function(val){
this.exTax = Math.ceil(val / 1.1);
}
}
}
});
監視プロパティ。特定のプロパティの値の変更を監視し、変更時に設定した関数を実行
<div id="app">
<input type="text" v-model="email">
<div v-if="error.email">{{ error.email }}</div>
</div>
var vm = new Vue({
el: '#app',
data: {
email: '',
error: {}
},
watch: {
email: function(value){
if(value === ''){
this.error.email = '必須必須です';
}else{
this.error.email = '';
}
}
}
});
ディレクティブ
条件分岐
<div id="app">
<input type="radio" name="app-rad" onclick="vm.rad='A'" checked>
<input type="radio" name="app-rad" onclick="vm.rad='B'">
<input type="radio" name="app-rad" onclick="vm.rad='C'">
<div v-if="rad=='A'">Perfect</div>
<div v-else-if="rad=='B'">Great</div>
<div v-else>Good</div>
</div>
var vm = new Vue({
el: '#app',
data: {
rad: 'A'
}
});