【入門】Laravel×Vue.js②〜実装編〜

はじめに

PHPのフレームワークであるLaravelで作成したアプリケーションに
JavaScriptのフレームワークであるVue.jsを連携させる方法について説明します。
簡単な機能を実装します。自分のコンポーネントを登録する方法について説明します
実装する機能
　　メッセージを表示して、ボタンを押すと、メッセージを反転する

コンポーネントの作成

まず、resources/js/components/内にHelloComponent.vueを作成してください
そして、内容を以下のようにしてください

resources/js/components/HelloComponent.vue

<template>
    <div id="app">
      <p>{{ message }}</p>
      <button v-on:click="reverseMessage">Reverse Message</button>
    </div>
</template>
<script>
export default {
      data:function(){
          return {
            message: 'Hello Vue!',
          };
      },
      methods: {
        reverseMessage: function () {
          this.message = this.message.split('').reverse().join('')
        }
      }
}
</script>

コンポーネントの登録

上で作成したコンポーネントを登録しましょう

resource/js/app.js

require('./bootstrap');

window.Vue = require('vue');

Vue.component('example-component', require('./components/ExampleComponent.vue').default);
Vue.component('hello-component', require('./components/HelloComponent.vue').default);

ビューファイルへの組み込み

ビューファイルの追加したい時に下記を記述してください

hello/index.blade.php

<div id="app">
  <hello-component></hello-component>
</div>

以上で実装完了です。

疑問、気になるところがございましたら、質問、コメントよろしくお願いします！！！