参考記事をもとに進めさせていただきます。
◆算出プロパティ
処理を含めることができるデータで、メソッドとの違いは結果をキャッシュできるため、処理を高速にさばくことができます。
メソッドと算出プロパティの違い
<body>
<div id="sample">
@{{ one }}の2倍は、@{{ double }}
</div>
</body>
<script src=" {{ asset('js/app.js') }} "></script>
<script>
const sample = new Vue({
el: '#sample',
data: {
one: 1
},
computed: {
double(){
return this.one * 2
}
}
});
</script>
◆ゲッター・セッター
上の例では、データを基に計算した値を返すゲッターの役割を担っていましたが、セッターとゲッター両方設定することが可能です。
<body>
<div id="sample">
<input type="text" v-model.number="one">
<input type="text" v-model.number="double">
</div>
</body>
<script src=" {{ asset('js/app.js') }} "></script>
<script>
const sample = new Vue({
el: '#sample',
data: {
one: 1
},
computed: {
double:{
get(){
return this.one * 2;
},
set(double){
this.one = double / 2;
}
}
}
});
</script>
v-model.numberを使用して、数字入力でデータを同期させて、getでは、oneの値が変わると、doubleの値も変わります。
doubleから入力すると、oneの値がsetされるようにしました。
◆ウォッチャ
算出プロパティは元のデータが変更されると処理が走ります。
ウォッチャもデータの変更があったときに、処理が走ります。基本的には算出プロパティを使用すればよいのですが、非同期処理なんかの時はウォッチャを利用したほうが良いです。
参考記事
watch:{
データ:function(新しい値,古い値){}
}
個別に指定するときの指定の仕方
this.$watch(データ, function(新しい値,古い値){}, オプション)
◆フィルタ
フィルタを利用することで、数字や文字に細工ができます。
{{データ | フィルタ名}}で指定できます。
<body>
<div id="sample">
@{{price | localeNum}}
</div>
</body>
<script src=" {{ asset('js/app.js') }} "></script>
<script>
const sample = new Vue({
el: '#sample',
data: {
price: 3000000000000
},
filters:{
localeNum(price){
return price.toLocaleString();
}
}
});
</script>
javaScriptのtoLocaleStringを利用して、3桁ずつ数字を区切るようにしています。
ちなみにfilterに引数を持たせることも可能です。
◆カスタムディレクティブ
v-bindのようなものを自作できる機能です。下の階層のDOMにアクセスする必要がある場合に使用します。
カスタムディレクティブ
<body>
<div id="sample">
<input type="text">
<input type="text" v-focus>
</div>
</body>
<script src=" {{ asset('js/app.js') }} "></script>
<script>
const sample = new Vue({
el: '#sample',
directives: {
focus: {
inserted: function (el) {
el.focus()
}
}
}
});
</script>
directivesに登録することで使用でき、insertedは要素が挿入されたときです。今回ならv-focusをもつinputタグのほうにfocusを充てるようにしました。
◆nextTick
更新後のDOMにアクセスする際に、nextTickを利用します。用途は、データ更新後DOMにアクセスしたときにタイムラグが発生し、思い通りのデータが取得できないことを、nextTickを使えば、更新後に読むので防げます。
<body>
<div id="sample">
<div ref="message">
<p>@{{ message }}</p>
</div>
<button @click="addMessage">メッセージ追加</button>
</div>
</body>
<script src=" {{ asset('js/app.js') }} "></script>
<script>
const sample = new Vue({
el: '#sample',
data: {
message: ''
},
watch: {
message() {
console.log(this.$refs.message.clientHeight);
this.$nextTick(function () {
console.log(this.$refs.message.clientHeight);
})
}
},
methods: {
addMessage(){
this.message = 'sample';
}
}
});
</script>
this.$nextTickの中で、更新後にしたい処理を記述します。
一つ目のconsole.logでは、ボタンを押したときの高さは取得できません。
二つ目のconsole.logでは、更新後に高さを取得するので、高さを取得することができます。