◆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概要
 vue.js概要

vue.jsChapter1
を参考にさせていただき、実践していきます。

◆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種類
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
こういったサイトがあることが、すごくありがたいです。参考にさせていただきます。

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