vue.js 入門

laravel 入門チュートリアル

まずはここ見てからね。
https://qiita.com/ma7ma7pipipi/items/d58b1a8114f122bf918d

まず、適当なページに以下をコピペ。
ただし、laravelを使っていることが条件

# まず基本

```

<div id="app" v-cloak>


    {{--両方同じ意味--}}
    <span v-text="message"></span>
    <span>@{{message}}</span>

    {{--htmlをそのまま表示したい--}}
    <span v-html="message"></span>

</div>

```


# さぁ、何も考えずコピペ

```

<!doctype html>
<html lang="{{ app()->getLocale() }}">
<head>
    <meta charset="utf-8">
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Laravel-Vue-todo</title>
    <style type="text/css">

        /*初期表示時にテンプレートが一瞬表示されてしまうのを防ぐ*/
        [v-cloak] {
            display: none;
        }

    </style>
</head>
<body>


<div id="app" v-cloak>
    @{{message}}
</div>


<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.9.1/underscore-min.js"></script>


<script>

    const app = new Vue({
        el: '#app',

        //ここに入ってきたデータは自動的にテンプレートに反映される
        data: {
            message: 'こんにちわ。Vue.jsです。',
        },

    });

</script>

</body>
</html>


```

これで こんにちわVue.jsです。 と表示されましたね。

## 解説

・ vue.js メインファイル
・ axios.min.js AJAX用
・ underscore-min.js 配列を操作


# テキストフィールドの内容を動的に変化させる


```

<div id="app" v-cloak>

    {{--ここの値を変更すると pタグ内のデータも変わる テキストフィールドに message の値を入れる--}}
    <input v-model='message'>

    {{--pタグ内に message を入れる--}}
    <p>
        @{{message}}
    </p>



</div>

<script>

    const app = new Vue({
        el: '#app',

        //ここに入ってきたデータは自動的にテンプレートに反映される
        data: {
            message: 'こんにちわ。Vue.jsです。',
        },

    });

</script>


```


# 要素をゆったり 消す

Toggleボタンをクリックしたら文字がゆったり消えたり表示されたり。

```

<style>
    .fade-enter-active, .fade-leave-active {
        transition: opacity .5s;
    }
    .fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
        opacity: 0;
    }
</style>

<div id="app" v-cloak>

    <button v-on:click="show = !show">
        Toggle
    </button>
    <transition name="fade">
        <p v-if="show">ゆったりきえるぅ</p>
    </transition>

</div>



<script>
    const app = new Vue({
        el: '#app',

        //ここに入ってきたデータは自動的にテンプレートに反映される
        data: {
            show:true,
        },

    });

</script>



```

# カウントを増やす

```

<div id="app" v-cloak>
    {{--v-on:click の略 クリックで incremnt メソッドを利用--}}
    <button @click="increment">カウントを増やす</button>
    <p>@{{ count }}回のクリック</p>
</div>


<script>
    const app = new Vue({
        el: '#app',

        //ここに入ってきたデータは自動的にテンプレートに反映される
        data: {
            count:0
        },

        //ここで処理を実行。実行語に data に 格納。
        methods: {
            increment: function(){ //←axios.getでTODOリストを取得しています
                this.count++;
            }
        }
    });

</script>


```

# リスト、配列操作

果物を追加したり、消したり。

```


<div id="app" v-cloak>


    果物名 <input v-model="name" />

    <button @click="add">果物を増やす</button>

    <ul>
        {{--items があるだけ 繰り返し表示--}}
        <li v-for="(v , key) in fruits">@{{ v.id }} : @{{ v.name }}
            <button @click="del(key)">削除</button>
        </li>
    </ul>

    <hr/>

</div>


<script>
    const app = new Vue({
        el: '#app',

        //ここに入ってきたデータは自動的にテンプレートに反映される
        data: {
            name:'レモン',
            fruits:[
                { id: 1 , name: 'りんご' , color:'red' },
                { id: 2 , name: 'ぶどう' , color:'purple' },
                { id: 3 , name: 'みかん' , color:'orange' },
            ],
            list: ['夢','希望','勇気']
        },

        //ここで処理を実行。実行後に data に 格納。
        methods: {

            add: function(){

                //underscore.js で 最大のIDを取得
                var max = _.max(this.fruits, function (d) {
                    return d.id;//id の一番高いデータ返す
                });

                this.fruits.push({
                    id: max.id + 1,
                    name: this.name,
                    color: 'yellow'
                });
            },
            del: function(key){
                this.fruits.splice(key,1);
            },
        },

    });

</script>



```


## 果物に値上げ機能をつける

500円以下の場合のみ セールと表示させる。

```

<div id="app" v-cloak>

    <h2>果物を表示</h2>
    <input v-model="name" />
    <button @click="add">果物を増やす</button>


    <ul>
        {{--items があるだけ 繰り返し表示--}}
        <li v-for="(v , key) in fruits">@{{ v.id }} : @{{ v.name }}  @{{ v.price }} 円

            {{-- 値段が 500円以下なら なら セール と表示 --}}
            <span v-if="v.price < 500"> セール</span>


            <button @click="del(key)">削除</button>
            <button @click="up(key)">値上げ</button>

        </li>
    </ul>



    <hr/>


</div>



<script>
    const app = new Vue({
        el: '#app',

        //ここに入ってきたデータは自動的にテンプレートに反映される
        data: {
            name:'初期値',
            fruits:[
                { id: 1 , name: 'りんご' , price:100 },
                { id: 2 , name: 'ぶどう' , price:700 },
                { id: 3 , name: 'みかん' , price:1500 }
            ]
        },

        //ここで処理を実行。実行語に data に 格納。
        methods: {
            add: function(){

                var max = _.max(this.fruits, function (d) {
                    return d.id;//id の一番高いデータ返す
                });

                this.fruits.push({
                    id: max.id + 1,
                    name: this.name,
                    price: 700
                });
            },
            del: function(key){
                this.fruits.splice(key,1);
            },
            up: function (key) {
                this.fruits[key].price += 33;
            }
        },
    });

</script>

```