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

13058 ワード
vue tutorial javascript beginners テキストリンク
ようこそ!最後に、我々は我々の非常に最初のユーザーイベントと方法をこれらのイベントに反応することを聞きに行きました.今日は、ディレクティブと条件付きレンダリングについて学びます.

簡単ならば
フレームワークに関係なくプログラマのベルトの下で最も重要なツールの一つは条件付きレンダリングです.能力を表示したり、条件や値に応じて、アプリケーションの一部を非表示には、これについての学習を開始するのに最適な場所であり、またVUEディレクティブについて.
我々は、我々の前の例の上で建築を続けます.あなたがそれを失った場合、または単に追いついている場合は、ここで我々はこれまで持っている:
<html>
    <head>
        <title>Vue 101</title>
    </head>

    <body>
        <h1>Hello!</h1>
        <div id="app">
          <p>My local property: {{ myLocalProperty }}</p>
          <hr>
          <button @click="buttonClicked">Click me</button>
        </div>

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

        <script>
          const app = new Vue({
            el: '#app',
            data: {
              myLocalProperty: 'Im a local property value'
            },
            methods: {
              buttonClicked() {
                const newText = 'The new value is: ' + Math.floor( Math.random() * 100 );

                this.myLocalProperty = newText;
              }
            }
          });
        </script>
    </body>
</html>
これまで我々は我々のアプリケーションにローカルのプロパティを出力し、また、単純なボタンにユーザーのクリックを聞いて管理してきました.
さらに一歩を踏み出して、条件付きのレンダリングについて学びましょう.
ボタンをクリックして、ランダムな数を生成するように変更しましょう<p> 結果の要素.
これはリファクタリングを必要とするので、まず変更しましょうbuttonClicked この新しい数を計算する方法と、新しいプロパティに格納されますrandomNumber .
<script>
  const app = new Vue({
    el: '#app',
    data: {
      myLocalProperty: 'Im a local property value',
      randomNumber: 0 // 1
    },
    methods: {
      buttonClicked() {
        this.randomNumber = Math.floor(Math.random() * 100); // 2
      }
    }
  });
</script>
ちょっと見ましょう.
  • 私たちは新しいローカルプロパティを追加しましたrandomNumber , デフォルト値は0になります.
  • 古いコードを削除し、前の文字列にランダムな値を使用する代わりに、私たちはrandomNumber プロップ
    • 私たちは私たちの結果に応じてコンテンツを表示/非表示にしたいrandomNumber 計算は、2つの新しい<p> 要素.つだけが表示されますrandomNumber が50以上である.もう1つは50未満です.
    <div id="app">
  <p>My local property: {{ myLocalProperty }}</p>
  <hr>
  <button @click="buttonClicked">Click me</button>
  <hr>
  <!-- 1 -->
  <p v-if="randomNumber >= 50">randomNumber is >= 50!</p>

  <!-- 2 -->
  <p v-else>Sorry, randomNumber is only <b>{{ randomNumber }}</b></p>
</div>
    私たちは<hr> クラリーと分離のために<p> 要素.
    詳しく見ていきましょう.
    最初にv-if="randomNumber >= 50" . それでv-if はVueディレクティブです.用語の定義にあまりにも引っかかることはありません、それは私たちがVueがどのように読み書きするかを知るHTML要素の中に置くことができる「特別な」価値であることを意味します.実際には、既にディレクティブを使用しています.記憶するv-on:click and @click ? それらもディレクティブです!
    理論v-if Vueに、この内部で宣言した条件が真ならば、この要素を表示するよう指示します.この場合には<p> ifならばrandomNumber が50より大きいか等しい.
    第二に、いつでもv-if ディレクティブは、他のケースを持つことができます.でも頭をあげなさい.v-else は、v-if (または3番目のオプションv-else-if ). if if - elseステートメントからの要素として期待されるようにv-else は最初にtrueでない他のケースでレンダリングされます.のどちらかです.
    先に行き、あなたのリロードindex.html ボタンを数回クリックします.あなたは、それを見ます<p> タグは、randomNumber .

    V‐IFとV‐Show
    あなたがクリックする間、あなたのdevツールを開くことが興味があるならば、あなたは非常に重要なものに気がつきます.v-if がdisplay: block/hidden CSSスイッチを切り替えるには、実際に値を変更したり、条件を変更したりすると、要素をレンダリングまたは破棄します.あなたが可視性トグルディレクティブを持っている場合は、先に行くとv-if for v-show 何が起こるかを参照してください!
    あなたが気づくかもしれないのは、v-else 宣言はもう表示されません.これはv-show 孤独なレンジャーで、単独で働くだけです.それで、使用の利益は何ですかv-show ?
    使用するときに考慮することができるパフォーマンスコストがありますv-if VueはDOMを再実行しなければなりません(DOMを追加して削除する必要がある部分については非常にスマートであることを心配しないでください).しかし、これはCSSの適用/削除よりも広範なタスクですdisplay プロパティ.
    ボトムライン:あなたは、例えば、メニューバーのように、ほんの数回、アプリの小さな/媒体の一部を切り替えるにしている場合.v-if 通常、トリックを行います.しかし、あなたがタブスクリーンのまわりでスイッチングしているならばv-show あなたのマークアップが毎回書き直されていないので、パフォーマンスに関してより安いかもしれません.
    ( p . s .我々が続行する前に、ディレクティブをv-if または、あなたはコンソールエラーを得るでしょうv-else 以下は不対.)

    開発ツール
    あなたが望んでいるならば、あなたはどの値がランダムになっているかを理解する方法を知っていましたrandomNumber 我々のために>= 50 中にそれをレンダリングすることなく条件<p> 我々の信頼でタグ{{ }} その後、Vueは仕事のための素晴らしいツールを持っています.
    インストールしてインストールするChrome Vue Devtools or Firefox Vue Devtools .
    いくつかの私たちのブラウザで直接ファイルを開くことがありますのでfile:// あなたがChromeであなたのために働く拡張を見ないならば、プロトコル.次の手順に従ってください.
    "To make it work for pages opened via file:// protocol, you need to check "Allow access to file URLs" for this extension in Chrome's extension management panel."

Right-click the Vue icon on the extensions toolbar, click on manage extensions and then toggle the allow access switch.
    ブラウザのあなたの好みの味にそれらを追加したら、先に行くと、それらを開きますindex.html ページを再生するにはかなりの数のグッズに気づくでしょう.
    画面は次のようになります.

    あなたは右上にいくつかのアイコンを持つツールバーに気づくでしょう、私たちはVUEXを見て、あなたが安全に今すぐ無視することができますときに見ている人.
    しかし、この画面で重要なことはコンポーネントツリーです.devのツールは、あなたがページのために作成するすべてのコンポーネント、そのプロパティ(データ)を検査することを可能にします.(今これが意味をなさないなら心配しないでください).
    をクリックして<Root> コンポーネントとこれが表示されます.

    つのローカルプロパティに注目してください.myLocalProperty and randomNumber .
    あなたのクリック<button> いくつかの回、どのように開発ツールの応答を参照してくださいrandomNumber 値.

    今、これは今、超印象的なように見えることはありませんが、このツールは、私たちは、実際の世界のアプリケーションを構築したり、実際の作業プロジェクトでも、確かにそれを再生するいくつかの時間を費やすときにあなたの1つの情報源になります!
    ローカルストレージの例としては、手動で値を変更して、アプリケーションのさまざまな状態をテストすることができます.プロパティのホバーを変更する場合は、[編集]ボタンを取得します(数値プロパティの場合)+ +ボタンを増加したり、値を減少させる.


    結論
    我々はすでに覆われているファンダメンタルズで:セットアップ、イベント、プロパティと条件付きレンダリングを使用すると、今いくつかの本当に楽しいと反応性のアプリケーションを作成を開始するビルディングブロックがあります.しかし、これはかろうじてVueのパワーの表面をひっくり返しているだけです、そして、それはここでより面白くて面白くなるだけです.
    パート4のためにチューニング滞在!
    MYSQL第15課-一意性制約のテスト
    Androidが開発したViewPagerはFragmentと連携してスライドページの効果を実現(ソースコード共有)