#１週間で学ぶべきこと

基本用語
Vueインスタンス
条件付きレンダリング
リストレンダリング
props
$emit

#基本用語

用語	詳細
DOM	HTMLに表現するためのプログラム。 Document Object Modelの略。
ディレクティブ	DOM要素に対して実行するアクションを伝えるトークン。
コンポーネント	.vue拡張子を持つvueファイル。componentsフォルダに格納される。名前付きかつ再利用可能なVueインスタンスのこと
レンダリング	ディレクティブに基づいてHTML上にデータを反映させること

#Vueインスタンス

Vueインスタンス：new Vueで生成する。変数定義を行う。

sample.js


new Vue({
  el: '#sample',
  data: {
    message: 'Hello World!'
  }
})

sample.html


<div id='sample'>
  <p>{{ message }}</p>
</div>

#条件付きレンダリング

v-if、v-else、v-else-ifを用いて条件分岐を行う。

####◆ v-ifディレクティブ

sample.html


<div id="sample">
  <!-- dataプロパティの"answer"を参照する -->
  <p v-if="answer">Hello World!</p>
</div>

sample.js


new Vue({
  el: '#sample',
  data: {
    answer: true
  }
})

####◆ v-elseディレクティブ

sample.html


<div id="sample">
  <!-- dataプロパティの"answer"を参照する -->
  <p v-if="answer">Hello World!</p>
  <p v-else="answer">Good Evening!</p>
</div>

sample.js


new Vue({
  el: '#sample',
  data: {
    answer: true
  }
})

####◆ v-else-ifディレクティブ

sample.html


<div id="sample">
  <p v-if="answer">Hello World!</p>
  <!-- dataプロパティの"maybe"を参照する -->
  <p v-else-if="maybe">Good Afternoon!</p>
  <p v-else>Good Evening!</p>
</div>

sample.js


new Vue({
  el: '#sample',
  data: {
    answer: true
    maybe: true
  }
})

#リストレンダリング

v-forディレクティブを用いてレンダリングを行う。

sample.html


<div id="sample">
  <ul>
　　 <!-- "sample"は引数。 "引数 in 配列名" -->
    <li v-for="sample in samples">{{sample}}</li>
  </ul>
</div>

sample.js


new Vue({
  el: '#sample',
  data: {
    samples: ['品川', '五反田', '目黒']
  }
})

#props

親コンポーネントから子コンポーネントにデータを渡す際に使用する

####親コンポーネント

App.vue


<template>
  <!-- props名：answer データ値："YES" -->
  <Sample v-bind:answer="YES"></Sample>
</template>

<script>
import Sample from "./components/Sample.vue";

export default {
  data() {
    return {
      answer: 'YES'
   };
 };
};
</script>

####子コンポーネント

Sample.vue


<template>
  <div>
<!-- props名：answer 親コンポーネントから参照する -->
     <p>{{ answer }}</p>
  </div>
</template>

<script>
export default {
  props: ["answer"]
};
</script>

#$emit

子コンポーネントから親コンポーネントにデータを渡す際に使用する

####親コンポーネント

App.vue


<template>
  <!-- event名：sample-action / props名：answer / $event:受け取るデータ -->
  <Sample v-bind:answer="YES" v-on:sample-action="answer = $event"></Sample>
</template>

<script>
import Sample from "./components/Sample.vue";

export default {
  data() {
    return {
      answer: 'YES'
   }
 }
};
</script>

####子コンポーネント

Sample.vue


<template>
  <div>
<!-- props名：answer 親コンポーネントから参照する -->
     <p>{{ answer }}</p>
  <button v-on:click="sample">{{ answer }}</button>
 </div>
</template>

<script>
export default {
  props: ["answer"]
},
methods: {
  sample: function () {
  //event名：sample-action / props名：answer
    this.$emit("sample-action", this.answer + "good")
 }
};
</script>

#同シリーズ

#参考文献