◀ 15.

【Vue.js】v-bindによるデータ連携

▶
編集
ページの作成
テンプレートを更新

ページの作成

親となるページを選択してください。

ページは必ず何かしらの親ページに紐づきます。
親ページに紐づくページを子ページといいます。
例： 親=スポーツ, 子1=サッカー, 子2=野球

子ページを親ページとして更に子ページを作成することも可能です。
例： 親=サッカー, 子=サッカーのルール

親ページはいつでも変更することが可能なのでとりあえず作ってみましょう！

Vue.jsはv-bindを利用することでjavascriptのdataをhtml内で利用することが出来る。

中括弧を用いることでもデータ連携は可能であるが、一部v-bindでしか利用できない場面がある。 中括弧の例: {{ data1 }}

※v-bindでなければいけない場面はコンパイル時に明確に指摘されるのでそれを参考に

以下、トレンドワードをAPIで取得して、その検索結果画面(Google)リンクを表示させる実践的なサンプル。

<template>
    <div>
        <ul>
            <li v-for="trendWord in trendWords">
                <a v-bind:href="searchUrl + encodeURI(trendWord)">search</a>
            </li>
        </ul>
    </div>
</template>

<script>

    export default {
        created() {
            this.getTrendWords()
        },
        data() {
            return {
                trendWords: [],
                searchUrl: "https://www.google.com/search?q=",
            }
        },
        methods: {
            getTrendWords() {
                axios
                    .get('/api/trend-word/list') //架空のURL
                    .then(res =>  {
                        this.trendWords = res.data
                    })
            }
        }
    }
</script>
 

 

編集
ページの作成
テンプレートを更新

ページの作成

親となるページを選択してください。

ページは必ず何かしらの親ページに紐づきます。
親ページに紐づくページを子ページといいます。
例： 親=スポーツ, 子1=サッカー, 子2=野球

子ページを親ページとして更に子ページを作成することも可能です。
例： 親=サッカー, 子=サッカーのルール

親ページはいつでも変更することが可能なのでとりあえず作ってみましょう！
子ページ
子ページはありません
同階層のページ
  1. インストール(ファイルのダウンロード)
  2. npmを使用したプロジェクトの作成(mac)
  3. for 繰り返し処理
  4. ifの条件分岐とtemplateを用いたグループ化
  5. on:click クリック時のイベント処理
  6. modelとdata フォーム入力値とDOMへの即時反映
  7. computed(算出プロパティ)と使い方とdataとの違い
  8. ライフサイクルフック(created / mounted / updated / destroyedの使い方)
  9. $nextTickの使い方(ライフサイクルフック)
  10. メソッドの定義方法
  11. エラー一覧
  12. ルーティング設定
  13. aリンクの貼り方と動的URLの作成
  14. Mixinを利用した共通処理の記述方法
  15. v-bindによるデータ連携
  16. ヘッダー/フッターの共通コンポーネント
  17. ナビゲーションの現在ページをハイライトする方法
  18. 画面サイズの取得方法

人気ページ

最近更新/作成されたページ