表示リストへのVueの使用

4039 ワード
vue webdev javascript beginners テキストリンク
いくつかの時点でWebアプリを構築している場合は、画面上に必要なデータの一覧が表示されます.データは、テーブル、箇条書きのリストやオプションのフォームから選択することがあります.Vueを使用すると、そのデータを表示する大きなトリックではない.のはどのように行うのを見てみましょう!
リストデータ
あなたの国の簡単なリストと、その短いコードを様々な部分のアプリでレンダリングすると言う.このリストはおそらく変更されます.
設定
アプリケーションでVueを使用するには、次の3つが必要です.
  • Vueロード
  • コード
    • を含む要素
  • コンテンツを表示するコード.
    • このチュートリアルでは、私たちはアプリを実行する単純なHTMLファイルを使用します.
    HTMLファイル
    HTMLページは次のようになります.
    <html lang="en">
<head>
    <!-- Load Vue -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <!-- Load script file.  'defer' loads after body is generated -->
    <script src="vue_lists.js" defer></script>
</head>

<body>
    <h1>List</h1>
    <div id="app">
       <!-- Div where Vue runs -->
    </div>
</body>
</html>
    あなたのappファイルがスクリプトタグで' defer 'を持つことに注意してください.は、ドキュメントがロードされた後にスクリプトがロードされることを意味します.アプリのためのコンテナ要素がアプリケーションコードの読み込み前に読み込まれることを確認します.
    アプリケーションファイル
    今すぐアプリファイル(別名VueHileリスト. js):
    var app = new Vue({
    el: '#app',
    data: {
        countries_list: [
            { "name": "Canada", "code": "CAN" },
            { "name": "Mexico", "code": "MEX" },
            { "name": "United States of America", "code": "USA" }
        ],
    }
})
    破壊する
    ここで重要なことは、
    data: {
countries_list: [
....
]}
    これは、このアプリのデータは、オブジェクトの配列を持っていることを意味します.私たちがしなければならないのは、HTMLファイル内のオブジェクトの配列を表示することです.
    HTMLでデータを表示する
    通常、vueでは、データをHTMLで表示します.これはオブジェクトの配列であるため、動作しません.○各配列にアクセスするために配列を反復処理する必要があります.V - forディレクティブは正確にそれを行います.
    <ul id="country_list">
    <li v-for="country in countries_list">
        {{ country.name }} ({{ country.code }})
     </li>
</ul>
    破壊する
    “V - for”は“それぞれ”に似ています.これは、配列を一度に1つの項目を通過し、別の要素を作成します.ここでは別.
    「国の国のリスト」は「配列のcountriesountリストの各々の項目のために、現在のものは国と呼ばれます」ことを意味します.結果はまさに我々が欲しいものです.
  • カナダ(缶)
  • メキシコ(MEX)
    • 米国の
  • 米国(米国)
    • すべてをまとめる
    <html lang="en">
<head>
    <!-- Load Vue -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <!-- Load script file.  'defer' loads after body is generated -->
    <script src="vue_lists.js" defer></script>
</head>

<body>
    <h1>List</h1>
    <div id="app">
       <ul id="country_list">
          <li v-for="country in countries_list">
            {{ country.name }} ({{ country.code }})
         </li>
       </ul>
    </div>
</body>
</html>
    テーブル
    もちろん、データの表を作成するのと同じように動作します.
    <table>
    <tr>
        <th>Country</th>
        <th>Short Code</th>
    </tr>
    <tr v-for="country in countries_list">
        <td>{{ country.name }}</td>
        <td>{{ country.code }}</td>
    </tr>
</table>
    要素を選択
    そして、それは選択要素を移すことと同じ考えです.
    <select name="country_code">
    <option v-for="country in countries_list" v-bind:value="country.code">
        {{ country.name }}
    </option>
</select>
    ちょっと待って!何がこの“バインド”のものですか?
    「v - bind:価値=」国.コード
    Vueでは、かぎ括弧はタグの属性を設定するために動作しません.その代わりに、v - bindを使ってデータを属性に結び付けます.
    知っていることは、単一の値(国、コード)、またはオブジェクト全体(国)をバインドすることができます.非常にするときに動作するように全体のデータオブジェクトが必要に役立つ!
    結論
    あなたが見ることができるように、データの配列を表示することは本当にちょうどV - forディレクティブを使用しています.HTMLでそれを持つことは、あなたがデータを表示して、フォーマットするために必要とするすべての柔軟性を与えます.はい、それは簡単です.
    また、Vueにあるので、任意のWebプロジェクトにも、簡単にドロップするのは簡単です
    ダウンロードコード
    mysqlパーティション
    の非同期発電機とパイプライン