≪インスタンス｜Instance｜emdw≫
画面をVue単位に開発

new Vue({
	//...
});

->new Vue()を使用してインスタンスを作成する場合、Vueは作成者と呼ばれます.
インスタンス・オプション
el:Vueを実行するHTMLのDOM要素を指定します.VueインスタンスにリンクするHTML要素
data:Vue観察のデータオブジェクトを指定し、直ちに変更を検出します.
計算けいさん:画面めん

Computed

これを貼ってください.

また、

の重複除外効果もあります.

は、最初に計算され、キャッシュの値を使用し続けます.

Watch

ComputedでComputedプロパティを使用できます.watchを乱発してはいけません.

データを監視します.パラメータは古いベル類と新しいベル類の2種類を用いることができる.

new Vue({
	el: '#app',
    data {
    	message: 'Hello'
    },
})
watch: {
	message(newVal, oldVla){  
    }
}

新Valは、新たに更新されたデータを受信します.
oldValは更新前にデータを入力します.

dataのメッセージとwatchのメッセージは同じ内容を置くべきです.

v-if & v-show

v-if

条件文を宣言すると、タグ内にv-ifで条件を作成できます.

通常、v-ifの切り替えコストは高く、v-showの初期レンダリングコストは高い.
とても交換したいなら、v-showは効率的で、条件が変わらなければ、v-ifをお勧めします.

<div id="app">
  <div v-if="show">YES</div>
  </div>
  <button @Clcik="toggleShow">show</button>
  <script>
  	new Vue({
  		el: "#app",
  		data: {
  			show: false
  },
  method: {
  	toggleShow(){
 		this.show = !this.show 
  },
 }
  })
  </script>

3個のラベルを同時に切り替えたいなら?テンプレートラベルでdivラベルを包むだけでいいです.

<template v-if="show">
	<div>1<div>
    	<div>2<div>
    	<div>3<div>
</template>

vueライフサイクル

created
:表示された瞬間(構成部品は初めて見ましたが、画面に表示される前に)
JavaScriptしか見えません.

mounted
:計算が完了したら画面を描画し、インストールを実行します.

updated
:

、画面上のデータが変化した場合、画面を再描画します.

destoryed
: