Vueを使用して、テキストボックスに含まれているミニクリック番号タイミングゲームを作成します。 [スタート]をクリックすると、3行と3列のテーブルが生成されます。テーブルデータは1から9にランダムに配置されます。この時点で、1からクリックして9にクリックして順番にクリックします。正しい順序でクリックすると、使用される時間がプロンプトされます。注文が正しくない場合、ゲームはプロンプトされます。
1.最初にVUEソースコードをダウンロードし、アドレスをダウンロードhttp://cn.vuejs.org
2.JqueryはDOM操作に向けられていますが、Vueはデータ操作に向けられているため、VUEを使用するときはDOMを動作させないことが最善です。VUEの独自性を示してみてください(Angularjsを使用した場合は理解しやすいかもしれません)
3.通常のHTMLファイルを作成し、ヘッダーのVUEのソースファイルを参照してください
<head> <Meta charset = "utf-8"/> <title> </title> <script = "text/javascript" src = "js/vue.js"> </script> </head>
4。シンプルなページ
1)まず、V-Model、データの双方向の結合は、テキストボックスに入力された値に応じて変更されます。
2)@Clickはクリックイベントにバインドします。ここで、 @はV-onの略語です。もちろん、バインディングイベントでは、 @click = 'time(item)'などのパラメーターを使用できます。
3)v-for = "(index、item)in list"、ループ配列、インデックスは配列の角度マークであり、アイテムは配列の値です。
詳細については、VUEドキュメントをご覧ください。
<body> <div id = "play"> <span>番号を入力してクリックして起動すると、入力番号に対応するテーブルが生成されます。テーブルの番号1から開始し、順序で最後までクリックしてください。..< /span> <br /> <input type = "num" /> <button @click = 'arr'> start < /button> <br /> <div v-for = "(index、item)in list"> <template v-if = "index%num == 0 &? style = "float:left;"> <button @click = 'time(item)'> {{item}} </button> </div> </div> </div> </body>5.Vue操作
1)最初に、Vueのインスタンスを新しいものにし、El Bind Your Domを使用し、ここでIDを識別子として使用する必要があります
2)データは、VUEによって操作されるデータ、numテキストボックスの値(デフォルトは2)、テキストボックスの値、生成リスト、開始タイムのクリックテーブル開始時間、終了時間クリックテーブルの終了時間、現在選択されているチェックナムの数に従ってリスト[]によって操作されるデータです。
3)テキストボックスの値に基づいて配列を生成し、テキストボックス値の正方形の長さの配列を生成するメソッドARRには2つのメソッドがあり、繰り返されません。アレイの値はテキストボックス値の1平方で、テキストボックスに追加される値は3で、生成された配列の長さは9、配列の内容は1〜9で、繰り返されません。
時間の開始時間とクリックの終了時間を計算し、チェックnumを使用してクリックの順序を制御します。
<Script> new Vue({el: '#play'、data:{num:2、list:[]、starttime:0、endtime:0、checknum:0}、method:{arr:function(){if(this.num> 20){alert( '値が大きすぎる、ブラウザーは死にます。 this.num bar array(arrention)= 0;乱暴な数(0]! {私は、新しい乱数を再生することを発見しました{index ++} 1){start.gettime} if(this.num); }}})</script>6.CSSコード
<style> .fibton {margin-top:10px;マージン左:10px;色:#ffff;境界線:1PX SOLID#8A6DE9;バックグラウンドカラー:#8a6de9;フォントサイズ:14px;パディング:6px 12px;ボーダーラジウス:7px;幅:50px;高さ:40px; } </style>7.特定の特定のシナリオで機能を完了するためにVUEを使用することは、jQueryよりもはるかに簡単ですが、jQueryは依然として非常に強力です。さまざまなテクノロジーを使用して、さまざまなシナリオに従って、より速く、より良い機能を完了します。
この記事は、「vue.jsフロントエンドコンポーネント学習チュートリアル」にまとめられており、誰もが学習して読むことを歓迎します。
上記はこの記事のすべての内容です。みんなの学習に役立つことを願っています。誰もがwulin.comをもっとサポートすることを願っています。