Vue.js(バインディング・リスト・$el・$refs)(laravel使用)

[チュートリアル](https://cr-vue.mio3io.com/guide/chapter2.html)
を参考に進めさせていただきます。

##◆マスタッシュタグ
Vue.jsでViewのほうで記述する{{プロパティ名}}
マスタッシュはテキスト限定のため、属性に使用することはできません。

[vue.js公式](https://jp.vuejs.org/v2/guide/syntax.html)

##◆v-bind
属性値・クラス・スタイルをバインディングしたい場合、マスタッシュは使用できないため、v-bindを使用します。
v-bindは省略することもできます。

```
<body>
    <div id="sample">
        <input type="text" v-bind:value="value" v-bind:class="{'text-center' : textAlign}" v-bind:style="{'color': textColor}">
    </div>
</body>
<script src=" {{ asset('js/app.js') }} "></script>
<script>
    const sample = new Vue({
        el: '#sample',
        data:{
            value: 'ようこそ!!',
            textAlign: true,
            textColor: 'red'
        }
    });
</script>
```

ちなみにバインドしたいものが複数ある場合、それ用のオブジェクトを作って対応できます。

##◆SVGのデータバインディング
SVGとは画像フォーマットのことで拡大縮小や色の変更に向いています。そのためVue.jsと相性がいいそうです。
[SVG](https://ferret-plus.com/7089)

```
<body>
    <div id="sample">
        <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
            <circle cx="100" cy="75" :r="radius" fill="lightpink"></circle>
        </svg>
        <input type="range" min="0" max="100" v-model="radius">
    </div>
</body>
<script src=" {{ asset('js/app.js') }} "></script>
<script>
    const sample = new Vue({
        el: '#sample',
        data:{
            radius:10
        }
    });
</script>
```

v-modelでデータを同期させており、それを円の半径と連携させています。

##◆リスト加えたり削除したり

```
<body>
    <div id="sample">
        <ol>
            <li v-for="(fruit, index) in fruitsList" :key="index">
                @{{fruit.name}} @{{ fruit.price }}円
                <button @click="remove(index)">かごから果物を棚に戻す</button>
            </li>
        </ol>
        <input type="text" v-model="fruitName">
        <button @click="add">果物をかごに追加する</button>
    </div>
</body>
<script src=" {{ asset('js/app.js') }} "></script>
<script>
    const sample = new Vue({
        el: '#sample',
        data: {
            fruitsList: [
                {id: 1, name: 'りんご', price: 100},
                {id: 2, name: 'ばなな', price: 200},
                {id: 3, name: 'みかん', price: 300},
            ],
            fruitName: ''
        },
        methods: {
            add: function(){

                if (this.fruitName === ''){
                    alert('入力をしてください。');
                    return false;
                }

                const maxIdFruit = this.fruitsList.reduce(function (previous, current) {
                    return previous.id > current.id ? previous : current
                });

                this.fruitsList.push({
                    id: maxIdFruit.id + 1,
                    name: this.fruitName,
                    price: maxIdFruit.price + 100
                });
            },
            remove: function (index) {
                this.fruitsList.splice(index, 1)
            }
        }
    });
</script>
```

v-forディレクティブを使用し、果物一覧を表示します。removeメソッドで配列の番号を受け取り削除します。
addメソッドはinputに入力したものを果物の名前として、idが一番上のもののid+1したものとprice+100したものを持たせて新しい果物を加えます。

##◆$el・$refs
仮想DOMではなく、直接DOM操作をしたいときに使用します。
\$elはelで指定したセレクタのDOMへのアクセス
それ以外は\$refsを使用する。

例

```
<body>
    <div id="sample">
        <h1 ref="message"></h1>
    </div>
</body>
<script src=" {{ asset('js/app.js') }} "></script>
<script>
    const sample = new Vue({
        el: '#sample',
        mounted: function () {
            console.log(this.$refs.message);
        }
    });
</script>
```

refでDOMに名前を付けて、$refsでアクセスします。mountedで呼ぶことでDOM要素にアクセス可能です。