Vue.jsについてと少しの実践(Laravel使用)

##◆DOMとは
HTMLの要素や属性はDOMによって、オブジェクトデータにまとめられているため、JavaScript
からアクセスできる。

##◆ツリー構造
DOMは、HTMLをツリー構造にまとめることで、中身をきれいに分けることができる。
考え方としては、htmlの中にheadとbodyその中にといった感じで階層に分けられている。

#Vue.jsの考え方
設計はMVVMパターンを採用しています。
ViewModel(VM)とViewの間でデータ連携を行います。
ViewはHTMLのことで、VMはデータとメソッドです。
画面が表示される際に、VMが存在して、そのデータによってViewが表示されています。(データ駆動)
ディレクティブ(vからはじまるもの)を利用し、VMはViewとデータを連動させ、コンポーネントという単位で作成していくので、
再利用がしやすいようになっています。

[vue.js概要](https://qiita.com/asip2k25/items/bd4bdccd5201d542953c)
[vue.js概要](http://gihyo.jp/dev/serial/01/vuejs/0001)

[vue.jsChapter1](https://cr-vue.mio3io.com/guide/chapter1.html)
を参考にさせていただき、実践していきます。

##◆el・data・Vue
まず画面に「ようこそ!!」を表示します。

```
<body>
    <div id="sample">
        @{{ message }} //laravel使用のため@
    </div>
</body>
<script src=" {{ asset('js/app.js') }} "></script>
<script>
    const sample = new Vue({
        el: '#sample',
        data: {
            message: 'ようこそ!!'
        }
    });
</script>
```

・new VueでVueインスタンスを作成することでVueアプリケーションを利用できます
・elは、DOM要素を表すセレクタを指定することで、その範囲で利用可能になる
・dataは、new Vueで作成したVueアプリ内で利用できるデータ(変数)
@{{ message }}にdata内のmessageの内容が表示されます。これをテキストのバインディングといいます。

##◆繰り返し描画

```
<body>
    <div id="sample">
        <ol>
            <li v-for="fruit in fruitsList">
                @{{fruit}}
            </li>
        </ol>
    </div>
</body>
<script src=" {{ asset('js/app.js') }} "></script>
<script>
    const sample = new Vue({
        el: '#sample',
        data: {
            fruitsList: ['みかん', 'れもん', 'めろん']
        }
    });
</script>
```

v-forディレクティブを使用して、バインディングしたデータのリストを表示しています。
v-for=(リストの項目 in バインディングしたデータ)
そして、リストの項目を表示している。

###ディレクティブ(Directive)
データのバインディングを行うときに利用する(v-から始まる属性)
ディレクティブを指定すると、それはjsの変数になる(今回ならfruit)

##◆イベント検知

```
<body>
    <div id="sample">
        <button v-on:click="handleClick">クリック検知</button>
    </div>
</body>
<script src=" {{ asset('js/app.js') }} "></script>
<script>
    const sample = new Vue({
        el: '#sample',
        methods:{
            handleClick: function () {
                alert('クリックしたよ!')
            }
        }
    });
</script>
```

v-onはイベントを検知します。今回のclickはクリックを検知します。(省略形は@click)
[v-on種類](https://jp.vuejs.org/v2/guide/events.html)
methodsはVueアプリ内で使用する関数を用意する場所です。
今回ですと、ボタンを押したらalertが出るようにしています。

##◆入力値の同期

```
<body>
    <div id="sample">
        <input type="text" v-model="message">
        <p>@{{ message }}</p>
    </div>
</body>
<script src=" {{ asset('js/app.js') }} "></script>
<script>
    const sample = new Vue({
        el: '#sample',
        data:{
            message: 'ようこそ!!'
        }
    });
</script>
```

v-modelディレクティブを利用し、入力値を同期させています。

##◆条件分岐

```
<body>
    <div id="sample">
        <button v-on:click="handleClick">表示切替</button>
        <p v-if="show">表示されています</p>
    </div>
</body>
<script src=" {{ asset('js/app.js') }} "></script>
<script>
    const sample = new Vue({
        el: '#sample',
        data:{
            show: true
        },
        methods:{
            handleClick: function () {
                this.show = !this.show;
            }
        }
    });
</script>
```

v-ifを使用して条件分岐を行っています。ボタンを押すと表示非表示が入れ替わります。
表示非表示では、v-showというものもあります。v-ifはfalseだとDOMから削除されますが、
v-showの場合、display:noneになり、非表示となります。

##◆まとめ
[基礎から始めるVue.js](https://cr-vue.mio3io.com/guide/chapter1.html)
こういったサイトがあることが、すごくありがたいです。参考にさせていただきます。