はじめてのSymfony4 + Vue.js

4. Vue.jsことはじめ

2018年07月06日 by unio

Vue.jsはプログレッシブフレームワークという思想で作成されたUIフレームワークです。 コンポーネント指向ですべてのUIをVue.jsで組み上げることができたり、部分的にVue.jsを適用する使い方も可能です。 このように、Vue.jsは様々な状況に応じて柔軟に使い分けることができるメリットがあります。

はじめてのVue

第2回目のチュートリアルでvueパッケージをインストールしましたが、 まずはCDN経由で配布されているjsで動きを確認します。前回作成したindex.html.twigにVue.jsを追加してみましょう。
templates/tutorial/index.html.twig
            
                <!DOCTYPE html>
                <html>
                <head>
                    <title>チュートリアル</title>
                    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
                </head>
                <body>
                <div id="target-container">
                    <h1 v-text="title"></h1>
                    <input type="text" v-model="message">
                    <p>${message}</p>
                </div>
                <script>
                    'use strict';
                    (function () {
                        let vm = new Vue({
                            el: '#target-container',
                            delimiters: ['${', '}'],
                            data: {
                                title: 'はじめてのSymfony4 + Vue.js',
                                message: 'Vue.jsのtwigサンプルです'
                            }
                        });
                    })();
                </script>
                </body>
                </html>
            
        
Vue.jsの開発バージョンと本番バージョン
CDN配布のVue.jsは「開発用」と「本番用」の2つのバージョンが存在します。 今回のサンプルではエラーを確認しやすいように開発用を読み込んでいますが、本番環境では下記のスクリプトを読み込んでください。
                        
                            <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.min.js"></script>
                        
                    
まずはVueオブジェクトから見ていきましょう。 elは、Vueのレンダリングを行うDOMエレメントを指定します。 今回はtarget-containerを指定しているので、Vueの影響範囲はtarget-containerのdiv内に限られます。
            
                 el: '#target-container',
            
        
twigとVueは同じテンプレート構文({{ }})を持つため、delimitersでVueのテンプレート構文を${ }に変更しています。
            
                 delimiters: ['${', '}'],
            
        
dataはVueモデルのコアとなる部分です。DOMとこのdataがバインドされることにより、リアクティブなWebページを作成することができます。
            
                 data: {
                     title: 'はじめてのSymfony4 + Vue.js',
                     message: 'Vue.jsのtwigサンプルです'
                 }
            
        
次はHTML部分を見ていきましょう。 v-textはVueのバインド構文です。 v-textで指定したtitleがh1のテキストとして設定されます。
            
                <h1 v-text="title"></h1>
            
        
v-modelも同じくVueのバインド構文で、双方向バインディングが可能になります。 今回はテキストボックスなので、文字入力とmessageが互いに結びつきます。
            
                <input type="text" v-model="message">
            
        
最後はテンプレート構文でmessageを直接設定します。 delimitersでテンプレート構文を変更しているので注意してください。
            
                <p>${message}</p>
            
        

Vueを動かしてみよう

ビルトインウェブサーバを起動して、http://localhost:8000/tutorial/indexにアクセスしてみましょう。
            
                bin/console server:start
                 [OK] Server listening on http://127.0.0.1:8000
            
        
テキストフォームの文字列を変更すると、messageも連動して書き換わります。 次回は、Webpack Encoreを利用した場合の開発について解説いたします。