Vueの上の手.初心者のためのJS (第4回)

18276 ワード
vue tutorial javascript beginners テキストリンク
ようこそ!🤩
前回は条件付きレンダリングをv-if and v-show . 今回は、配列とオブジェクトをループする方法を学び、それらの要素のそれぞれについて要素を作成します.我々はまた、我々が以前に学んだ概念のいくつかを適用します.

V用v-for Vueの基本的な指示の一つです.JSは、一度どのようにそれはあなたのアプリケーション内で構築することができますの拡張機能を理解して指数関数的に成長します.v-for 簡単に言えばfor ループ.あなたがまだこれを意味しないならば、forループはグループの各々の要素につき1回実行されるコードの一部ですArray またはObject .
私たちは今日、空のスレートから始めようとします.そうすれば、私たちのすることはすべて明確な目的を持っています.ここに我々の基地のコピーがありますindex.html ファイルをコピーしてエディタに貼り付けます.
<html>

<head>
  <title>Vue 101</title>
</head>

<body>
  <div id="app">

  </div>

  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

  <script>
    const app = new Vue({
      el: '#app',
      data: {

      },
      methods: {

      }
    });
  </script>
</body>

</html>
簡単なリスト、配列を作成することから始めましょう.我々は、我々の中に財産をつくりますdata オブジェクトと呼ばれます.お気軽に自分の個人的なお気に入りにタイトルを変更する🙃🎮
data: {
  games: [
    'Super Mario 64',
    'The Legend of Zelda Ocarina of Time',
    'Secret of Mana',
    'Super Metroid'
  ]
},
すごい!私たちがアレイをセットアップした今、悲しくて単純なものを作りましょう<ul> 要素が表示されます.例えば、今は簡単にしましょう.
<div id="app">
  <ul>
    <li>Game title here</li>
  </ul>
</div>
OK、良い探し!今、我々は多くのように出力したいVueを伝える必要があります<li> 内部の要素<ul> 必要に応じて我々の全体の配列をループする.
他の言語では、バニラJavaScriptでも、これと似たようなことをすることができます.
<?php foreach ($game in $games): ?>
  <li><?php echo $game; ?></li>
<?php endforeach; ?>
ループが要素を囲むところでは、それは出力または出力をするでしょう.
我々は宣言するv-for ループしたい要素の上のディレクティブ.これらの変更を<li> そして、我々は彼らを後に解剖します.
<ul>
  <li v-for="game in games">{{ game }}</li>
</ul>
見てみましょう.
  • v-for に直接追加されました<li> , ない<ul> 前に見たように.これはそれぞれ読むgame インマイgames アレイを作ってください<li> インサイド<ul> タグ.
  • 注意games は、以前に追加したプロパティですdata , そこで、この変数名を使わなければなりません.
  • 変数game (単数形)は私たちによって定義されますitem , game , title または、我々が好きであるものは何でも.でもこれを理解してください*game* in games ループ内の変数として使用します.
  • 最後に、内部<li> タグは我々のコンテンツを出力しているgame 変数は、ループが私たちのゲームのそれぞれのために実行されている間、これは<li> .
    • ブラウザ内のアプリケーションを実行し、画面に出力される項目のリストを参照してください.

    ノッチを取る
    これまでのところ、良い?v-for 実際には非常にシンプルなコンセプトであり、この例はスーパーボーリングです.だから、我々はいくつかのオブジェクトを含むいくつかのオブジェクトを作成し、またいくつかを適用することによって物事を少し複雑にする方法v-if 我々のリストの中のs?
    まず最初に、更新しましょうgames いくつかのより興味深いデータを持つプロパティ.
    data: {
  games: [
    { name: 'Super Mario 64', console: 'Nintendo 64', rating: 4 },
    { name: 'The Legend of Zelda Ocarina of Time', console: 'Nintendo 64', rating: 5 },
    { name: 'Secret of Mana', console: 'Super Nintendo', rating: 4 },
    { name: 'Fallout 76', console: 'Multiple', rating: 1 },
    { name: 'Super Metroid', console: 'Super Nintendo', rating: 6 }
  ]
},
    いつものように自由に自分の好きなタイトルを使用してください.PSのスーパーMetroidの評価は、タイポではない、それだけで良い-と私は偏っている.😬 また、ベセスダ、あなたは恥ずかしいです.とにかく咳.
    あなたのアプリケーションを実行する場合は、特にそれは中断されませんが、それはちょうど文字列形式では、オブジェクトを出力しますが、きれいではない.実際、我々は我々のスクラッチをするつもりです<ul> 完全にアプローチして<div> 情報を出力する.(心配しないでください、それはまだ醜いです).
    あなたの全体を更新<div id="app"> :
    <div id="app">
  <div v-for="game in games">
    <h1>{{ game.name }} - <small>{{ game.console }}</small></h1>

    <span v-for="star in game.rating">❤️</span>

    <div v-if="game.rating > 5">Wow, this game must be <b>REALLY</b> good</div>
  </div>
</div>
    うん.OK、多分ではなく、心配しないでください、あなたはすでに何がここで起こっているかを理解するために必要なすべてを知っている.
  • div v-for="game in games" 同じ古い、我々はループするつもりですgames 配列プロップとストアgame 変数.
  • h1 . 宜しくgame はオブジェクト自身で、プロパティ、名前、コンソール、評価を保持します.インサイド<h1> ゲームの名前を出力します.game.name . コンソールgame.console . ご覧の通り、v-for は、li , しかし、必要に応じて実際に多くのHTMLとして出力することができます.
  • 入れ子になったv-for . だから、内部span 我々が実際に入れ子にした要素v-for ループ(それは完全にOKです)、それが少し異なる以外は、我々は配列またはオブジェクトをループしていません.私はあなたに嘘をついていませんでした、多分ちょうど若干の情報を差し控えましたgame.rating とループからカウントされます1 それが評価の値に達するまで.簡単?
  • 最後にv-if . 私たちはAを出力するつもりです<div> 条件が満たされるならば、我々のループの中にタグをつけてください、そうすれば、現在のゲームの評価が5より大きいならば.推測してください?
    • 前に移動し、再度ブラウザでこれを実行し、cssで悩まさないAwesomenesを見てください.

    私はラッピングの必要はありませんか?
    任意の時点では、自分で束を作る見つける<div> 単にあなたのラップアップする要素v-for ループ、あなたのケースを助けるために使用できる特別なHTMLタグがあります.<template></template>たとえば、ラップを削除する場合<div> そして、<template> あなたの開発者コンソールを見てください、そして、あなたはそれを見ます<h1> and <span> 要素は何もラップされません.
    <template> Vueはラッパー要素として扱いますが、それを実行したときにHTMLにレンダリングされませんので、マークアップに影響を与えることなくループのために他の要素の束を論理的にラップすることができます.

    key属性
    私が意図的に最後に残した1つの最終的なこと.The :key 属性.
    あなたが要素をループしているときv-for VueJSは反応性のためにあなたの要素を追跡する方法を手がかりにしていません.これが意味するのは、Vueがこれをすることができないので、このループによって作成されているページの全セクションを再描画するということです.私たちのケースでは、それは非常に小さなセクションです、そして、パフォーマンスヒットは多分最小であるでしょう、しかし、それはあなたが心に留めておくべき何かです-そして、ちょうど最高の実行のためにそれをしてください.
    さて、どうやって使うの?:key 要素を“name”または“track”に使う文字列を想定しているので、一意の識別子を指定する必要があります.我々の場合games 簡単です.
    <div v-for="game in games" :key="game.name">
    私は、我々がこのリストで2回同じゲームをするつもりでないとかなり確信しています.安id データベースからのデータがあればここでも理想的です.
    あなたが複雑さに興味があるならば:key ドキュメントを常に見ることができます.Key's docs
    実際、今、あなたがこれまで得た今、私は十分にドキュメンテーションと知り合いになることの重要性を強調することができません.VueJSのドキュメントは、印象的に、非常に非常に非常に非常に明確なコード例では、ドキュメントのチームは、それらを更新し、明確に保つために素晴らしい仕事をしている-それらのすべてに大きな叫び.

    最終コード
    これは最後のコードです.
    <html>

<head>
  <title>Vue 101</title>
</head>

<body>
<div id="app">
  <div v-for="game in games" :key="game.name">
    <h1>{{ game.name }} - <small>{{ game.console }}</small></h1>

    <span v-for="star in game.rating">❤️</span>

    <div v-if="game.rating > 5">Wow, this game must be <b>REALLY</b> good</div>
  </div>
</div>

  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

  <script>
    const app = new Vue({
      el: '#app',
        data: {
          games: [
            { name: 'Super Mario 64', console: 'Nintendo 64', rating: 4 },
            { name: 'The Legend of Zelda Ocarina of Time', console: 'Nintendo 64', rating: 5 },
            { name: 'Secret of Mana', console: 'Super Nintendo', rating: 4 },
            { name: 'Fallout 76', console: 'Multiple', rating: 1 },
            { name: 'Super Metroid', console: 'Super Nintendo', rating: 6 }
          ]
        }
    });
  </script>
</body>

</html>

    チャレンジ
    あなたがそれを受け入れたいならば、あなたは挑戦を得ます.加える@click リスナー<span> は、ゲームの評価を出力し、ランキングによって増加1 それぞれのクリックで、そのユニークなゲーム.あなたは既にこれを達成するために必要なすべてを知っている😉.
    ヒント:あなたはgame あなたはクリック機能にループして、それを調べます.
    グッドラック!
    スクラッチ部分9からWebGL 3 Dエンジン:頂点照明+カメラズーム
    GitワークフローとGitエイリアスの私の新しい愛