Vue プロパティ
Vueインスタンス生成
{{ message }}
</div>
<script>
let app = new Vue({
el: ‘#app’,
data: function() {
return {
message: ‘Hello Vue.js’
};
}
});
</script>
※結果
<div id=”app”>
Hello Vue.js
</div>
<div id=”app”>
{{ message }}
</div>
<script>
Vue.createApp({
data: function() {
return {
message: ‘Hello Vue.js’
};
}
}).mount(‘#app’);
</script>
※結果
<div id=”app” data-v-app=””>
Hello Vue.js
</div>
プロパティ
一覧
| 種類 | 機能 | 備考 |
|---|---|---|
| data | htmlやプロパティから参照できる値を提供 | |
| computed | メソッド | callされてもメソッドの結果が変わらない限り再実行されない |
| methods | メソッド | callされる度に常に実行される |
| watch | メソッド | data、computedの結果値を監視、変更がある場合にのみ実行される |
ライフサイクル
| 種類 | タイミング | 機能 |
|---|---|---|
| beforeCreate | Vueインスタンス生成時 | dataプロパティ参照× |
| created | インスタンス生成後 | dataプロパティ参照〇 |
| beforeMount | VueインスタンスのDOMへのマウント時 | DOM参照× |
| mounted | VueインスタンスのDOMへのマウント後 | DOM参照〇 |
| beforeUpdate | dataプロパティ値更新、DOMへの反映前 | |
| updated | dataプロパティ値更新、DOMへの反映後 | |
| beforeUnmount | Vueインスタンスのマウントが解除前 | |
| unmounted | Vueインスタンスのマウントが解除後 |
data
<template>
<div id=”app”>
dataプロパティを指定。templateからはthis不要
{{ todo }}
</div>
</template>
<script>
export default {
data: function() {
return {
template、他プロパティから参照できる変数を設定。他プロパティからはthis.todoと指定
todo: ”,
}
}
}
</script>
修飾子
| 修飾子 | 機能 | 備考 |
|---|---|---|
| v-model.lazy | changeイベント発生時にvalue値が更新される | 規定：inputイベント |
| v-model.number | value値が数値型として扱われる | 規定：文字列型 |
| v-model.trim | value値の両端をtrimする |
computed
※index.html
<div id=”app”>
<input type=”checkbox” id=”check1″ v-model=”check” value=”check1″><br>
<input type=”checkbox” id=”check2″ v-model=”check” value=”check2″><br>
<p>{{ joinedChecks }}</p>
</div>
※js/app.js
Vue.createApp({
data: function() {
return {
check: []
};
},
computed: {
joinedChecks: function() {
return this.check.join(‘/’);
}
}
})
.mount(‘#app’);
methods
※index.html
<div id=”app”>
<button type=”button” v-on:click=”onClickCountUp“>CountUp</button>
<p>{{ count }}</p>
</div>
省略記法
<button type=”button” @click=“onClickCountUp”>CountUp</button>
※js/app.js
Vue.createApp({
data: function() {
return {
count: 0,
};
},
methods: {
onClickCountUp: function() {
this.count += 1;
},
},
})
.mount(‘#app’);
修飾子
| 修飾子 | 機能 | 備考 |
|---|---|---|
| stop | ||
| prevent | event.preventDefault()と同機能 | @submit.prevent=”メソッド名” submitをキャンセルしてメソッドを実行する |
| capture | ||
| self | ||
| once | ||
| passive |
watch
<template>
<div id=”app”>
<input type=”text” v-model.trim=”todo” />
<p>{{ todo }}</p>
</div>
</template>
<script>
export default {
data: function() {
return {
todo: ”,
}
},
watch: {
watch対象のvue変数を指定。todoの値の変更を検知して実行されるメソッドを設定
todo: function(next, prev){
console.log(`next:${next}/prev:${prev}`);
},
JSオブジェクトをwatchする場合
deep: true,
prevが不要な場合
todo: {
handler: function(next){
console.log(`next:${next}`);
},
deep: true,
}
}
}
</script>
実行
テキストボックスにaaaと入力
結果
next:a/prev:
next:aa/prev:a
next:aaa/prev:aa
