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

Vueインスタンス生成

<div id="app">
 {{ message }}
</div>
<script>
let app = new Vue({
 el: '#app',
 data: function() {
  return {
   message: 'Hello Vue.js'
  };
 }
});
</script>

※結果
<div id="app">
 Hello Vue.js
</div>

※index.html
<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');

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!

前の記事

Vue vue-cli

次の記事

Vue コンポーネント