1. hidache

    No comment

    hidache
Changes in body
Source | HTML | Preview
@@ -1,29 +1,198 @@
# 概要
この記事では、Vue.jsで開発を始めるにあたって、押さえておくべきことを記述します。
-主にVue.jsでのstate管理にまつわる技術に重きを置いて解説していきます。
Reactで開発してきた人に向けて、「これはReactでいう〇〇」という情報も共有します。
#### [Vue.js](https://jp.vuejs.org/)
#### 単一ファイルコンポーネント
-基本的には普通のコンポーネントと同じです。
-「パーツを構成するために必要な HTML・CSS・JSをひとまとめ に」して独立した1つのファイルで扱うのが、この単一ファイルコンポーネントです。
-.vueファイルで作られるコンポーネントは以下のようになります。
-```
+- 基本的には普通のコンポーネントと同じ
+- パーツを構成するために必要な HTML・CSS・JSをひとまとめにして独立した1つのファイルで扱うのが、この単一ファイルコンポーネント
+- `template`、`script`、`style`で構成される
+- nameオプションは、コンポーネント名を表現します
+
+
+とてもシンプルに書けば、単一ファイルコンポーネントは以下のようになります。
+
+```example.vue
<template>
<div class="say-hello">Hello!!<div>
</template>
<script>
export default {
name: 'Hello'
}
</script>
<style scoped>
.say-hello {
font-weight: bold;
}
</style>
```
+
+## import
+他のコンポーネントをimportして使用したい場合には次のように記述
+
+- importして使用するコンポーネントをcomponentsオプションに登録する必要がある
+
+`'./Btn.vue'`は既にあるものとします。
+
+```example.vue
+<template>
+ <Btn />
+</template>
+<script>
+ import Btn from './Btn.vue'
+ export default {
+ name: 'Navigation',
+ components: {
+ Btn
+ }
+ }
+</script>
+```
+
+## data
+
+- Reactでいうstate
+- このコンポーネントが保持する状態を定義する
+- 関数で定義する
+
+```
+{
+ el: '#app',
+ data: {
+ message: 'Hello world'
+ }
+}
+```
+- 上記のように実装すると、idが"app"のDOMの中で{{message}}というように展開する
+- ただし、elオプションで指定したDOMの中でだけでしか展開できないので注意
+
+```example.vue
+<div id="app">
+ <h1>{{ message }}</h1>
+</div>
+```
+
+## methods
+ - コンポーネント内で使用する関数はmethodsで定義 (後から、算出プロパティの`computed`について記述するので、違いについて注意してください)
+
+```example.vue
+<div id="example">
+ <button v-on:click="greet">Greet</button>
+</div>
+```
+```
+<script>
+ export default {
+ name: 'Btn',
+ methods: {
+ greet: function () {
+ console.log('こんにちは!')
+ }
+ }
+ }
+</script>
+```
+
+#### インラインメソッドハンドラ
+
+- メソッド名を直接指定する代わりに、インラインJavaScript式でメソッドを指定することもできる
+
+``` example.vue
+<div id="say">
+ <button v-on:click="say('hi')">Say hi</button>
+ <button v-on:click="say('what')">Say what</button>
+</div>
+```
+```example.vue
+new Vue({
+ el: '#example-3',
+ methods: {
+ say: function (message) {
+ alert(message)
+ }
+ }
+})
+```
+- elオプション には、id、もしくはひとつしかないclassを指定しないといけない
+- `v-on:click`クリックされたときのイベント
+
+## computed
+
+- 算出プロパティである
+
+
+
+```example.vue
+<div id="example">
+ {{ message.split('').reverse().join('') }}
+</div>
+```
+上記のように、たくさんのロジックをテンプレートに詰め込んでしまうとコードが肥大化し、メンテナンスが難しくなる。
+そういった場合に、複雑なロジックには算出プロパティであるcomputedを利用します。
+
+```example.vue
+<div id="example">
+ <p>Original message: "{{ message }}"</p>
+ <p>Computed reversed message: "{{ reversedMessage }}"</p>
+</div>
+```
+```example.vue
+var vm = new Vue({
+ el: '#example',
+ data: {
+ message: 'Hello'
+ },
+ computed: {
+ reversedMessage: function () {
+ return this.message.split('').reverse().join('')
+ }
+ }
+})
+```
+これで、コードが簡潔でわかりやすくなりましたね。
+
+## v-if (条件付きレンダリング)
+- 条件分岐は、`v-if`を使う
+- 下記の例は、画像URLが空じゃなければimg要素を表示する例
+
+```example.vue
+<template>
+ <img :src="item.image" v-if="item.image.length > 0" />
+</template>
+```
+
+## v-for
+- 配列からリスト作りたいときは`v-for`を使う
+- mapを回す感覚
+- keyにはユニークな値をセットする
+- ただし、`:key`というように独特の記述の仕方があるので忘れないように注意
+
+```example.vue
+<template>
+ <div class="greeting" v-for="item in greetings" :key="item.id">{{ item.text }}</div>
+</template>
+<script>
+ export default {
+ name: 'Hello',
+ data: function () {
+ return {
+ greetings: [
+ {
+ id: 1,
+ text: 'おはよう!'
+ },
+ {
+ id: 2,
+ text: 'こんにちは!'
+ },
+ ]
+ }
+ }
+ }
+</script>
+```