ゼロから学ぶVue

Vueはコンパクトで軽量なJavaScriptライブラリです.開発者がWebアプリケーションを開発する際により簡単で便利になる簡単なAPIがあります.実際、Vueが誇るのは、その利便性、実行力、柔軟性です.
このチュートリアルの目的は、いくつかの例を通じて、基本的な概念と特性を概説することです.次の他のチュートリアルでは、Vueのより多くの有用な特性を学び、Vueで拡張可能なプロジェクトを構築します.
new Vue()を使用してVueインスタンスを作成
htmlページを初期化してから、Vueのjsファイルを導入する必要があります.導入の方法はいろいろありますが、scriptにVueのcdnを導入したり、公式サイトにVueのmin.jsをダウンロードしたり、npmでVueの依存をインストールしたりすることができます.便宜上,本稿ではcdnを用いて導入する.

に されていないバージョンを していることを します. されていないバージョンは に つ な を し、コードの き みに くの を します.
まずbodyにdivを き み、Vueインスタンスを し、インスタンスとdivをバインドします. しいVueインスタンスを するときは、Vue()コンストラクタを し、インスタンスにマウントポイントを します.このマウントポイントは、あなたが したいVueインスタンスの です.マウントポイントとインスタンス は1つ1つに しており、マウントポイントではインスタンス のトランザクションのみを でき、マウントポイントではインスタンス のトランザクションを できません.Vueインスタンスでマウントポイントを するパラメータは「el」で、elの はdom で できます.

      
            
                  
            
      
            
               

            

            
                  //       Vue  ，      
                  var V = new Vue({
                        el : '#vueInstance'
                  });
            
      

上記のように、newはVue()で新しいインスタンスを作成し、インスタンスのマウントポイントとしてDOM要素を指定します.マウントポイントを定義する際にcssセレクタのidを用いて定義した.インスタンス化された名前は、後で呼び出すために自分で定義することもできます.
v-modelによる双方向データバインド
v-modelを使用してinput入力ボックスをバインドすることで、データオブジェクトの値を動的に取得できます.v-modelはhtml要素の属性のように指定された属性だと考えることができます.ここでの双方向データバインドは、input、textarea、selectなどの多くのフォーム要素で使用できます.Vueはv-modelという命令を用いてデータをバインドし,このデータはユーザ入力操作によって更新されることを望んでいるデータである.たとえば、次の例では、inputラベルにデータnameをバインドし、Vueインスタンスのdataオブジェクトで宣言を実装する必要があります.

            : 


//       

      var V = new Vue({
            el : '#vueInstance',
            data : {
                  name : '_Appian'
            }
      });

ユーザーが何度入力しても、このnameは自動的に更新されます.また,nameの値が変更されると,他にもnameがマッピングされている箇所の値が変更される.このinputボックスとマッピングの同期修正の原因は,v-modelという命令を用いて,最下位のデータストリームを介してデータをバインドして直接修正することである.これがデータの双方向バインドの概念です.
この概念を証明するために,$dataを用いてデータのマッピングを印刷して見ることができる.

            : 
      
{{ $data | json }}
 //#1
      
{{ name }}
          //#2



      var V = new Vue({
            el : '#vueInstance',
            data : {
                  name : '_Appian'
            }
      });

1中:$dataはVueインスタンスで観察されるデータオブジェクトであり,本質タイプはオブジェクトであるためjsonに変換できる.新しいオブジェクトで置き換えることができます.インスタンスは、データ・オブジェクトのプロパティをエージェントします.{{}}は、2つのカッコで補間されます.ここに挿入する値は$dataがリアルタイムで変化する値です.|jsonは、データをより直感的に示す方法にすぎない.JSONのようなフィルターと見なすこともできます.stringify()の効果は同じです.
2:{{name}}は,補間式に直接挿入し,2つのカッコの間にデータ変数を挿入し,nameの値を直接マッピングする.
Vueはこのように簡単にデータの双方向バインドを行い、jsやjqを利用してデータを制御する必要がなく、v-model命令だけでよい.上の例から論理を整理できると信じています.
v-onによるイベントバインド
Vueはv-on命令を用いてイベント傍受とイベント配布を行う.Vueのインスタンスにリスニングイベントをバインドするメソッドを作成し、クリックイベントを割り当てるメソッドを作成できます.
次の例では、buttonにバインドされたsayメソッドを作成します.クリックすると、ユーザー名付きのウェルカムボックスがポップアップされます.この方法をbuttonに割り当てるには、v-on:clickを使用してイベントバインドを行う必要があります.

            : 
           //#1
               //#2



      var V = new Vue({
            el : '#vueInstance',
            data : {
                  name : '_Appian'
            },
            methods : {
                  say : function(){
                       alert('  ' + this.name);
                 }
            }
      });

もちろん、clickクリックイベントだけでなく、他のマウスイベント、キーボード入力イベントなどjsのイベントタイプもバインドできます.例えばv-on:mouseover,v-on:keydown,v-on:submit,v-on:keypress,v-on:keyup.13など、または他のカスタムイベントがあります.
開発の過程で、イベントバインドを頻繁に使用する可能性があります.v-onは書くのが少し面倒なので、前例では2つの書き方を提供しました.2は1の書き方の略です.v-onの代わりに@を利用して、ここではあまり言いません.
v-ifまたはv-showによる条件判定
ユーザーがログインしてからウェルカムポップアップを表示することを望んでいる場合、ログインしていない場合はログインインタフェースを与えます.Vueは、異なるログイン状態での表示内容を制御するためにv-ifコマンドとv-showコマンドを提供します.
以前の例ではloginStatusの値でログインの有無を制御でき、trueであれば入力ボックスとボタンを表示してウェルカムポップアップを見ることができたが、false(すなわちログインしていない)であれば入力アカウント、パスワードの入力ボックスとコミットボタンしか見えない(認証は一時的に行わず、ログイン状態のみを変更).

      //loginStatus true     section
     

               : 
             
             
     

      //loginStatus false     section
     

               : 
               : 
             
     



      var V = new Vue({
            el : '#vueInstance',
            data : {
                  name : '_Appian',
                  loginStatus :　false
            },
            methods : {
                  say : function(){
                       alert('  ' + this.name);
                  },
                   switchLoginStatus : function(){
                       this.loginStatus = !this.loginStatus;
                   }
            }
      });

この実行がインスタンスVである.thisの指向は自分で理解しなければならない問題で、ここではあまり言わない.上記の例では、V-ifをv-showに変更すれば、同様に同等の効果を得ることができる.同時にv-ifとv-showはv-elseをサポートしますが、v-elseコマンドのラベルをバインドする前の兄弟要素にはv-ifまたはv-showが必要です.
上記の例では、「ログイン」または「ログインを終了」ボタンをクリックするとswitchLoginStatusメソッドがトリガーされ、このメソッドをトリガーするとloginStatusの状態変化(trueとfalseで切り替え)を招き、htmlにおけるv-ifの判定条件結果の変化が、現在のloginStatusのブール値の状態に基づいて変化する表示されるsectionが異なる状態のsectionとなるようにします.
v-showとv-ifの違いは何ですか?v-ifブロックを切り替えると、Vueには、v-ifのテンプレートにデータバインディングまたはサブコンポーネントが含まれる可能性があるため、ローカルコンパイル/アンロードプロセスがあります.v-ifは、条件ブロックが切替中に条件ブロック内のイベントリスナーおよびサブコンポーネントを適切に破棄および再構築することを保証するため、実際の条件レンダリングである.v-ifも不活性です.初期レンダリング時に条件が偽の場合、何もしません.条件が初めて真になったときにローカルコンパイルが開始されます(コンパイルはキャッシュされます).それに比べて、v-showはずっと簡単です.要素は常にコンパイルされ、保持されます.CSS切替に基づいています.一般に、v−ifはより高いスイッチング消費量を有し、v−showはより高い初期レンダリング消費量を有する.したがって、v-showを頻繁に切り替える必要がある場合が好ましく、実行時の条件がv-ifを変更する可能性が低い場合が好ましい.
この違いはあなたの現在の開発にとって重要ではないかもしれませんが、プロジェクトの開発が大きくなると、この点が重要になるので、注意して注意してください.
v-for出力リストの利用
もしあなたが電子商取引プラットフォームを経営している商人であれば、商品リストの出力をレンダリングするページがたくさんあるに違いありません.v-for命令は私たちの配列オブジェクトをループすることを許可し、「element in arrayObj」の方法で、「arrayObjというデータオブジェクトのすべてのelementをループする」と読みます.
次の例では、v-forコマンドを使用して商品リストをループ出力します.各商品は1つのliにあり、liには商品の名前、価格、商品タイプが出力されます.

     

         

            {{ el.name }} - ￥ {{ el. price }} - {{ el. category }}
         
     



      var V = new Vue({
            el : '#vueInstance',
            data : {
                   products : [
                         {name: 'microphone', price: 25, category: 'electronics'},
                         {name: 'laptop case', price: 15, category: 'accessories'},
                         {name: 'screen cleaner', price: 17, category: 'accessories'},
                         {name: 'laptop charger', price: 70, category: 'electronics'},
                         {name: 'mouse', price: 40, category: 'electronics'},
                         {name: 'earphones', price: 20, category: 'electronics'},
                         {name: 'monitor', price: 120, category: 'electronics'}
                   ]
            }
      });

もちろん、dataの配列オブジェクトは、上記のように定義しなくてもいいし、データベースからインポートしたり、ajaxリクエストを利用して取得したりすることができます.ここではv-forを実証するためだけです.
配列オブジェクトの対応する下付きラベルを手に入れる必要がある場合があります.$indexで入手できます.

//#1

    {{ $index }} - {{ el.name }} - ￥ {{ el. price }} - {{ el. category }}


//#2

   {{ index }} - {{ el.name }} - ￥ {{ el. price }} - {{ el. category }}

計算属性Computed
属性を計算する適用シーンは、通常、1つの変数の値が他の変数の計算を必要とする場合に使用されます.
例えば、例えばユーザが入力ボックスに数xを入力すると、ユーザにこの数の平方xが自動的に返される².入力ボックスをデータバインドし、データが変更されるとすぐに平方を計算する必要があります.

               : 
         
    ：{{ square }}



      var V = new Vue({
            el : '#vueInstance',
            data : {
                  value : 1
            },
            computed : {
                  square : function(){
                       return this.value * this.value;
                  }
            }
      });

属性定義値の計算は、methodsオブジェクトを以前定義したときと同様に、一連のfunctionを定義することによって行われます.例えば、squareメソッドは変数「square」を計算するためのものであり、そのメソッドの戻り値は2つのthisである.valueの積.
次にcomputedで複雑な例を作ることができます.システムはランダムに1~10以内の数字を取り、ユーザーは入力ボックスにランダムに1~10以内の数字を入力することができ、ちょうどユーザーの入力とシステムのランダム数がちょうど一致すれば、ゲームは成功し、逆に失敗する.

           1~10    : 
         
    ：{{ resultMsg }}



      var V = new Vue({
            el : '#vueInstance',
            data : {
                  value : null,
                  randNum : 5//       5
            },
            methods : {
                  getRandNum: function(min, max){
                      return Math.floor(Math.random() * (max - min + 1)) + min;
                  }
            },
            computed : {
                  resultMsg : function(){
                       if (this.value == this.randNum) {
                            this.randNum = this.getRandNum(1, 10);
                            return '    !';
                       } else {
                            this.randNum = this.getRandNum(1, 10);
                            return '   ，  !';
                       }
                  }
            }
      });

後記
ここまで、あなたはすでにVueの基本的な使用を掌握することができて、世界で最も簡潔で最もきれいな枠組みの一つで、その構築は自分の完全な設計思想を持っていて、しかもますます流行しています.このフレームワークは十分に小さくて軽く、あなたの開発でよりスムーズなユーザー体験をもたらし、開発効率を効果的に向上させます.上記で一連の例を挙げましたが、すべて把握しましたか?

new Vue()を使用して新しいVueインスタンスを作成し、マウントポイント

を設定します.

v-model命令によりフォームコントロールを双方向にバインド

$data,{}},$indexのデータ出力時の使い方

を理解する

v-onによるイベントバインド,methodsの使い方

v-onと組み合わせて、v-ifまたはv-showにより条件判定を行い、区別

を知る.

v-forループ出力リスト

を利用する

計算属性Computedの基本応用

今ではVueの基礎を基本的に把握しています.次にあなたがしなければならないのは、Vueの最新のニュースをもっと見たり、私とVueの旅を理解したりすることです.
githubアドレスhttps://github.com/AppianZ/Close2Vue