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

19245 ワード
vue tutorial javascript beginners テキストリンク
私たちは旅の終わりに近づいているし、ほぼVueパダワンレベルから卒業する準備が整いました.しかし、最初のウォッチャー、あなたが学ぶ必要があります.
我々は、2つの非常に重要な概念に今日取り組んでいます、ウォッチャー、言及して、入力入力バインディングを形づくるつもりです.
始めましょう、そして、我々は両方のこれらの素晴らしい特徴をショーケースに超簡単なフォームを構築します.
<html>

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

<body>
  <div id="app">
    <label>What's your favorite game ever?</label>
    <input type="text" >

    <hr>

    <p>{{ response }}</p>
  </div>

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

  <script>
    const app = new Vue({
      el: '#app',
      data() {
        return {
          favoriteGame: null,
          response: ''
        }
      }
    });
  </script>
</body>

</html>
我々がここでしていることを見てみましょう.
インサイド<div id="app"> 我々は、ラベルと最も基本的な形を作成しました<input> タグ.その後、我々は結果を出力しているresponse プロパティ.
Vueインスタンス内では、2つのプロパティを含むローカル状態を宣言しています.favoriteGame and response . また、我々は使用していることに注意してくださいdata() との関数としてreturn この時点では、V -モデルが動作しない場合は動作しません.
ここでのアイディアは、ユーザーが何を入力したかを最初に記憶したいということです<input> 変数にフィールドを指定します.
バニラJSまたはjQueryでさえ、あなたはinput による要素$('input') or document.querySelector , しかし、Vueで我々は、この世俗的なタスクを達成するためにはるかに簡単な方法があります.
導入v-model .

Vモデル
あなたが前に学んだようにv- はVueディレクティブです.何v-model 特に、非常に簡単な用語では、

Vue、私はあなたに私がこれを入れているこの入力をつかむために欲しいv-model ディレクティブをオンにし、それと双方向の関係を作ります.私はあなたに与えるproperty , そして、私が私のコードのどこにでもこの資産を変えるときはいつでも、私はあなたに入力でそれを変えて欲しいです、そして、同様に、この入力が変わるときはいつでも、私はあなたに私の支柱のそれらの変化を反映して欲しいです.
これを行動に移そうとしましょう<input> 宣言し、v-model それへの指令.
<input type="text" v-model="favoriteGame">
今すぐあなたのブラウザでこれを実行し、善のあなたの魔法の入力ボックスに何かを入力します.タサウナ.ダ?
OK、何も起こらないようですが.先に行くとVue devtoolsを開き、検査<Root> 要素のデータ.うん.進歩!

今は、devのツールに移動してfavoriteGame 何か他の(それは包みを引用符を忘れないでください、我々はここで文字列を必要とします).EZ - BINDS - R - US💪
VueはどのようにネイティブのHTMLフォームの入力のすべてのタイプにバインドする方法については非常にスマートですので、本当にv-model 爆弾と利益が、あなたが独自のラッパーのコンポーネントを構築し、それを使用しているときにV -モデルの力は本当に表示されます.
舞台裏でv-model が設定されているv-bind:value とv-on:input バインディングでも、これについての深さで行くことはスコープから少しですので、あなたがさらに見て、他の方法を見て興味があれば私はあなたにリンクをドロップするつもりです.v-model on Components

ウォッチャー
今、我々は甘い甘い双方向結合を持っているv-model 場所でawesomenes、実際に何かをしましょう.
あなたは既に状態でそれを学んだdata あなたがテンプレートでそれを置くことができるprop{{ favoriteGame }} , それで、再びその上に行く必要はありません.あなたは、Aの中でそれを使う方法を学びましたmethod and computed プロップthis.favoriteGame - だからそれをやり直す必要はありません.しかし、実際に変更されてこのプロパティに“聞く”または“反応”するときに何が起こるか?
計算されたプロパティは、再計算されたものと値を返すのは素晴らしいですが、我々は我々のアプリの状態の別の部分を変更する場合は、この値が変更される場合、または多分いくつかの並べ替えの非同期要求を発射するか?これらのニッチケースでwatchers 来て、日を保存してください.
見ている支柱を作成するためにボイラー板を加えましょう.
<script>
  const app = new Vue({
    el: '#app',
    data() {
      return {
        favoriteGame: null,
        response: ''
      }
    },

    // Watchers here
    watch: {
      favoriteGame(newValue, oldValue) {
        console.log('Favorite game was ' + oldValue + ' and now is ' + newValue)
      }
    }
  });
</script>
ウォッチャーはwatch 我々のインスタンスまたはコンポーネントのプロパティ、および我々はそれを見たいと思う小道具のそれぞれのプロパティを含めるオブジェクトを渡します.
簡単に言えばdata 小道具props あなたが見たいと思う支柱/これの中に入る必要に反応してくださいwatch: {} という名前です.それで、あなたの支柱が命名されるならばfavoriteGame それがあなたの関数の名前です.
これらの関数のそれぞれは、それに渡される2つのparamsを得ますnewValue この小道具が手に入り、2番目のものがoldValue それは以前の変更前に使用されます.
チェックアウトconsole.log ステートメントとブラウザのウィンドウを更新します.何かを入力してみてください<input> コンソール出力をチェックします.毎回我々favoriteGame 任意の方法でプロップの変更、このウォッチャーが解雇されます.
さあ、実際にクールなことをしましょう.覚えてresponse 支柱?ユーザーの答えに応じて何かを入れましょう.
watch: {
  favoriteGame(newValue, oldValue) {
    if (!newValue) return // If its an empty string, pass

    // If the new value contains the keyword metroid
    if (newValue.toLowerCase().indexOf('metroid') !== -1) {
      this.response = 'Ceres station is under attack!'
      return
    }

    // If the new value contains the word zelda
    if (newValue.toLowerCase().indexOf('zelda') !== -1) {
      this.response = 'Its dangerous to go alone, take this 🗡️'
      return
    }

    // If the OLD value was metroid, and user changed it something else
    if (
      oldValue.toLowerCase().indexOf('metroid') !== -1 &&
      newValue.toLowerCase().indexOf('metroid') === -1
    ) {
      this.response = 'GET TO DA CHOPPA NAO'
      return
    }

    // Default response
    this.response = 'Sure, why not?'
  }
}
あなたが知らない場合はindexOf 文字列をチェックし、-1 マッチがなかった場合、それ以外の場合は検索中の文字列の位置を返します.
先に行くといくつかの新しい例を作成し、それをあなたのブラウザで再生すると、いくつかの楽しみを持っている.
私はあなたが今見たプロパティの力を見ることができれば、私はそれが有用であることを発見した方法は、私のプロパティが変更され、私はそれにプログラム的に(AJAXコール、外部関数、二次値を更新するなど)に反応する必要がある場合、それを考えることであるとウォッチャーは通常良い呼び出しです.他の何かのために、計算された特性で行きなさい.
<html>

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

<body>
  <div id="app">
    <label>What's your favorite game ever?</label>
    <input type="text" v-model="favoriteGame">

    <hr>

    <p>{{ response }}</p>
  </div>

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

  <script>
    const app = new Vue({
      el: '#app',
      data() {
        return {
          favoriteGame: null,
          response: ''
        }
      },
      watch: {
        favoriteGame(newValue, oldValue) {
          if (!newValue) return

          if (newValue.toLowerCase().indexOf('metroid') !== -1) {
            this.response = 'Ceres station is under attack!'
            return
          }

          if (newValue.toLowerCase().indexOf('zelda') !== -1) {
            this.response = 'Its dangerous to go alone, take this 🗡️'
            return
          }

          if (
            oldValue.toLowerCase().indexOf('metroid') !== -1 &&
            newValue.toLowerCase().indexOf('metroid') === -1
          ) {
            this.response = 'Nothing is true , everything is permitted'
            return
          }

          this.response = 'Sure, why not?'
        }
      }
    });
  </script>
</body>

</html>

結論
それを今までの祝辞!
今、実際にVueで本当にクールで機能的なアプリケーションを構築するための基本的なツールを持って、私はそれを保証します.しかし、まだ多くのことを学ぶために、多くのためには、このフレームワークからジュースのあらゆるインチを絞るために探索することです.
しかし、心配しないでください、私は前にそれを言ったと私は今日それによって立っている、私がVueについて最も楽しむ重要な側面の一つ.jsはdocumentation .
私がプログラミングを始めたとき、私は、彼らが通常本当に不十分に説明されたので、私がダイビングドックを持たなければならないことを本当に恐れていたことを思い出します、そして、私が使用しようとしていた言語とフレームワーク/リブの理解の高いレベルを仮定しました.
ありがたいことに、VUEのドキュメントチームは完全なガイドを我々は我々がこのガイドでは、このフレームワークでExcelに必要なすべての他のすべてで覆われているすべての例を完全に作るの素晴らしい仕事をしている.
これはVueの初心者シリーズを締結!
あなたは私の記事を維持したい場合は、私のTwitterのアカウントで目を離さないと私の他の記事をチェックアウトProgress' blog !
魔法のアボカドのパワーに注意し、読書のおかげで!♥
App起動画面の問題
AudioRecordがサードパーティ管理アプリケーションによって無効になったかどうかを検出するには、demoを添付します.