１週間で学ぶべきこと
- 基本用語
- 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>