hkのweblogスマートフォン用の表示で見るhkのweblogひよっこエンジニアがにわとりになるまでの軌跡この広告は、90日以上更新していないブログに表示しています。Vue.js少し間が空きましたが、前回の記事の続きです。前回は複数のモデルのリレーションを設定して、jsonを返してやるところまで進めました。}}今回は返ってきたjsonを展開してみます。Applicationは文字通り最初のリクエスト時に1つのページを返しますが、以降はhtmlを返さず同じページを使いまわします。APIにリクエストを投げて、返ってきたjsonを基にページを書き換えていくようなイメージになります。今回の場合、最初のリクエスト時にベースとなるページを返したり、モデル周りなどサーバーサイドの処理を司るのがLaravel、以降ページを書き換えたりルーティングをしたりするのはVue側の役割になります。いうわけでまずはweb.phpに最初に読み込むページを設定します。'.*');ざっくり言うと、「スラーの後に何が来ようとapp.blade.phpを返すよ」ということを書いています。次に読み込まれるapp.blade.phpが以下です。src="{{mix('js/app.js')}}"></script></html>静的ファイルの読み込み方とかcsrfがどうだとか細かく説明すべき箇所はたくさんあるのですが、今回は端折ります。重要な役割を担うのは最後のほうで読み込んでいるapp.jsです。id="app">の中を書き換えます。router}).$mount('#app');私自身、SPAについて何も知らなかった頃は「SPAってURL固定でどうやってAPIリクエストするんだろう...」と思っていましたが、当然ルーティングはあります。installしておきましょう。今回は'/'を叩くとIndex.vueを読み込み、'/about'を叩くとAbout.vueを読み込む...という構造にしています。3つめだけ少し勝手が違いますが、'/detail/1'を叩くとsento_code=1というパラメータを渡しつつDetail.vueを読み込みます。この他にコンポーネントを作っている部分があります。こんな書き方で<navbar></navbar>のところにNavbar.vueを読み込むことができます。説明の順番がおかしい感じもしますが、最後の3行でVueインスタンスを生成しています。id="app">の中を書き換えることができます。Vueのテンプレートの中でjsonを読み込むさて、ようやく本題。Vueのテンプレートの中でjsonを読み込みます。いくつかvueを読み込んでいますが、今回はこの中でDetail.vueについて書きます。先程のjsonを読み込んで銭湯の情報の詳細ページを作るイメージです。}}</script>まず、<script>以下から見ていきます。defaultはimportする際に特に指定がなければそのクラスや関数を呼ぶということのようです。今回はgetSentoを呼んでいます。下の方にgetSentoを書いています。'/api/sento/'のうしろにthis.$route.params.sento_codeとありますが、これが先ほどvue-routerで書いたパラメータです。jQueryなんかと似ていますが、帰ってくるres.dataをsentoに渡してやって、これをテンプレートの中で展開していきます。dataの部分では帰ってくるオブジェクトの型を書いています。苦労したのはここの構造だったりします。cssを全く書いていないので表示はぐちゃぐちゃですが、表示されてほしいものはこれで表示されるはずです。Vue.jsはまだまだ勉強中ですが、シンプルかつ便利な機能が豊富に準備されていて、おしゃれなアニメーションとかも作りやすそうです。全体的に駆け足になりましたが、今日はこんなところで。»プロフィールid:h2r4t都内で働く新米webエンジニアです。このブログは月2更新が目標。読者になる検索リンクはてなブログブログをはじめる週刊はてなブログはてなブログPro最新記事Bingの検索結果をcsvで出力するPythonスクリプトを書いたcanvasで画像ファイルを読み込むVue.jsでsetTimeoutする時の注意点rsyncについてのメモスレッドが競合した時のこと月別アーカイブはてなブログをはじめよう!h2r4tさんは、はてなブログを使っています。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。