Vue プロパティ、ディレクティブ

Vueインスタンス生成

プロパティ

一覧

ライフサイクル

data

<template>
　<div id="app">
　　dataプロパティを指定。templateからはthis不要
　　{{ todo }}
　</div>
</template>

<script>
export default {
　data: function() {
　　return {
　　　template、他プロパティから参照できる変数を設定。他プロパティからはthis.todoと指定
　　　todo: '',
　　}
　}
}
</script>

修飾子

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');

修飾子

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-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');

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>

Follow me!