lavarl5.5でvue.jsを導入してみた

admin

7年前

参考URL
https://ver-1-0.net/2017/08/09/laravel%E3%81%ABvue-js%E3%82%92%E5%B0%8E%E5%85%A5%E3%81%97%E3%81%A6%E3%81%BF%E3%82%8B%E3%80%82-blade%E3%81%AE-%E3%81%A8%E3%82%B3%E3%83%B3%E3%83%95%E3%83%AA%E3%82%AF%E3%83%88%E3%81%99%E3%82%8B/

vue.jsは、javascriptフレームワークの名前です(laravel5.3から標準搭載)
jqueryは厳密にはフレームワークではなく、javascriptの記述量を減らすためのライブラリ(指針がなく実装にバラつきがち)

導入は簡単で、jqueryのように一行追加するだけ

<script src="https://unpkg.com/vue"></script>

1	<script src="https://unpkg.com/vue"></script>

1, CDN(Content Delivery Network)は楽だけど、常に最新バージョンが使われるので動作が変わる可能性がある。
2, 実働サーバにダウンロードして、そこから読み込む方が安全！
3, 開発バージョン(vue.js=警告出力とデバッグモードあり)と本番バージョン(vue.min.js = 改行なし)の二種類がある
4, laravelの.envを読み込んで切り替えるように、ヘッダなどに記述する

    @if (env('APP_DEBUG'))
        <script src="{{ asset('js/vue.js') }}"></script>
    @else
       <script src="{{ asset('js/vue.min.js') }}"></script>
    @endif

@if (env('APP_DEBUG'))

@else

@endif

5, helloプログラミングを書く。
bodyタグの中にscriptタグがあるのが違和感！
Vueオブジェクトを生成(idで要素を指定、内容をmessage変数で定義)
laravelのbladeファイルでvue.jsを使う時の注意点は、{{}}がPHP出力として解釈されてしまうため、エラー無視のアットマークを最初に付ける必要がある！

<!DOCTYPE html>
<head>
    @if (env('APP_DEBUG'))
        <script src="{{ asset('js/vue.js') }}"></script>
    @else
        <script src="{{ asset('js/vue.min.js') }}"></script>
    @endif
</head>

<body>
    <div class="container" id="app">
        @{{ message }}
    </div>
    
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                message: 'Hello Vue!'
            }
        })
    </script>
</body>
</html>

<!DOCTYPE html>

<head>

@if (env('APP_DEBUG'))

@else

@endif

</head>

<body>

@{{ message }}

</div>

var app = new Vue({

el: '#app',

data: {

message: 'Hello Vue!'

}

})

</script>

</body>

</html>

6, ふむ、helloプログラミングまでは分かった。ここから後はどうすればいい？

関連記事