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をもっとサポートすることを願っています。