して再利用することができます。ためしに前回作成したテキストフォームをコンポーネント化してみましょう。使うことで同様の機能を実現できます。関数の第一引数はコンポーネント名で、HTMLのカスタム要素名となります。DOM内ではケバブケースでカスタム要素を記述できます。第2引数にはVueインスタンスに渡すことのできるオブジェクトを同じように設定できます(data、methods、computedなど)。dataは関数にしないとコンポーネント毎の独立したプロパティにならないので注意してください。詳しく記載されています。element.templateは必ず1つのルート要素で構成されます。トップレベルで2つ以上のタグが記述されているとコンパイルエラーになります。このように、divタグで囲むことでエラーがでなくなります。webpackの実行後に、ビルトインウェブサーバを起動して画面を確認してみましょう。Components)を作成します。SFCを書く前に、追加のパッケージをインストールします。次にwebpack.config.jsでvue-loaderの設定を追加します。1行追加してください。vueファイルの作成いままで作成したページをコンポーネントに分解してvueファイルにします。ルートとなるSf4VueTutorial.vueと、その中にTextFiled.vueが入る構成を考えてみましょう。TextField.vueを作成します。つけると、このコンポーネント内にのみスタイルが適用されるようになります。script内で作成したTextField.vueをimportして、componentsにオブジェクトとして設定します。componentsに登録したコンポーネントは、template内で自由に呼び出すことができます。このように、複数のコンポーネントを組み合わせることで設計の柔軟性が格段に向上します。最後にVueインスタンスを作成するjsとtwigを用意します。Sf4VueTutorialコンポーネントが描画されます。ここまでのファイルを用意できたら、webpackを実行してページを確認してみましょう。様々なブラウザに対応するために別記事へ次回はコンポーネントを使って、簡単な電卓アプリを作成します。>>なかのひと:unio数十年前の牧歌的なインターネッツが好きだった、永遠のモラトリアム人。モラトリアムしててもお金は増えないので、しゃかいの厳しさを斜め後ろから眺めつつほそぼそと生活しています。Encoreの導入Symfonyのコントローラ作成Vue.jsことはじめはじめてのwebpackパッケージングVueコンポーネントVue.jsで作る電卓アプリ1Vue.jsで作る電卓アプリ2。