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
ディレクティブ
一覧
| ディレクティブ | 機能 | 結果 | 備考 |
|---|---|---|---|
| v-text | dataプロパティ等を出力 | Hello Vue.js | {{ 〜 }}と同じ |
| v-pre | vue変数を無視 | {{ message }} | |
| v-html | htmlをエスケープせず出力 | Hello Vue.js | |
| v-model | inputにバインド | v-model参照 | |
| v-on | イベントにメソッドを関連付ける | methods参照 | 省略記法@ |
| v-bind | html属性を変更する | v-bind参照 | 省略記法: |
| v-show | 要素の表示/非表示を切り替える | v-show参照 | |
| v-if | 要素の出力する/しないを切り替える | v-if参照 | |
| v-for | 配列を操作 | v-for参照 | |
| v-slot | 子componentのスロットにデータを埋め込む | Vueコンポーネント参照 |
v-model
text
※index.html
<div id="app">
value属性にバインディングされる
<input type="text" v-model="message">
</div>
<script src="js/app.js"></script>
※js/app.js
Vue.createApp({
data: function() {
return {
check: [
message: ‘vue test’,
]
};
}
}).mount('#app');
radio
※index.html
<div id="app">
<input type="radio" id="radio1" v-model="radio" value="radio1">
<input type="radio" id="radio2" v-model="radio" value="radio2">
</div>
※js/app.js
Vue.createApp({
data: function() {
return {
value値を設定するとcheckedになる
radio: "radio1",
};
}
}).mount('#app');
checkbox
※index.html
<div id="app">
<input type="checkbox" id="check1" v-model="checks" value="check1">
<input type="checkbox" id="check2" v-model="checks" value="check2">
</div>
※js/app.js
Vue.createApp({
data: function() {
return {
check: [
value値を設定するとcheckedになる
"check1",
"check2",
]
};
}
}).mount('#app');
select
※index.html
<div id="app">
<select v-model="select">
<option value="select1">select1</option>
<option value="select2">select2</option>
<option value="select3">select3</option>
</select>
</div>
※js/app.js
Vue.createApp({
data: function() {
return {
value値を設定するとselectedになる
select: 'select1',
};
}
}).mount('#app');
v-bind
属性に単一値をbindする場合
<template>
<div id="app">
<button type="button" v-on:click="onClick">onClick</button>
<div>
src属性とdataプロパティ：dataSrcをbind
<img v-bind:src="dataSrc" alt="">
</div>
</div>
</template>
<script>
export default {
data: function() {
return {
dataSrc: '',
}
},
methods: {
onClick: function(){
this.dataSrc = 'img/logo.82b9c7a5.png'
}
}
}
</script>
class属性に配列をbindする場合
<template>
<div id="app">
<div
classと配列をbindする
v-bind:class="[
dataClassName, dataプロパティ：dataClassName
'selected', 文字列
computedClassName, computedプロパティ：computedClassName
methodClassName() methodsプロパティ：methodClassName
]">
</div>
</div>
</template>
<script>
export default {
data: function() {
return {
dataClassName: 'data-class-name',
}
},
computed: {
computedClassName: function(){
return 'computed-class-name';
}
},
methods: {
methodClassName: function(){
return 'methods-class-name'
}
}
}
</script>
結果
<div class="data-class-name selected computed-class-name methods-class-name"></div>
属性にJSオブジェクトをbindする場合
<template>
<div id="app">
<div
{出力する値: プロパティ値}で指定
v-bind:class="{'aaa': isActive}">
</div>
</div>
</template>
<script>
export default {
data: function() {
return {
isActive: true/false,
}
},
}
</script>
結果：isActive=trueの場合
<div class="aaa"></div>
結果：isActive=falseの場合
<div class=""></div>
v-show
<template>
<div id="app">
<div v-show="isShow"aaa</div>
</div>
</template>
<script>
export default {
data: function() {
return {
isShow: true/false,
}
},
}
</script>
結果：isShow=trueの場合
<div>aaa</div>
結果：isShow=falseの場合
<div style="display: none;">aaa</div>
v-if
<template>
<div id="app">
<div v-if="isIf"aaa</div>
<div v-else="〜"bbb</div>
</div>
</template>
<script>
export default {
data: function() {
return {
isIf: true/false,
}
},
}
</script>
結果：isIf=trueの場合
<div>aaa</div>
結果：isIf=falseの場合
出力されない
v-for
<template>
<div id="app">
<div v-for="(value, key) in items" :key="key" >{{ value }}</div>
</div>
</template>
<script>
export default {
data: function() {
return {
配列の場合
items: [1,2,3],
JSオブジェクトの場合
items: {
'key1': 'value1',
'key2': 'value2',
'key3': 'value3',
},
}
},
}
</script>
結果：配列
<div>1</div>
<div>2</div>
<div>3</div>
結果：JSオブジェクト
<div>value1</div>
<div>value2</div>
<div>value3</div>
