Zenn
💭

【Vue】学習開始１週間で覚える内容

2021/01/16に公開
JavaScript
Vue.js
tech

１週間で学ぶべきこと

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

基本用語

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

Vueインスタンス

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

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


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

条件付きレンダリング

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

◆ v-ifディレクティブ


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


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

◆ v-elseディレクティブ


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


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

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


<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>


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

リストレンダリング

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

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


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

props

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

親コンポーネント


<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>

子コンポーネント


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

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

$emit

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

親コンポーネント


<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>

子コンポーネント


<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>

同シリーズ

参考文献

Discussion