استخدم VUE لكتابة لعبة توقيت رقم MINI-CHINCING ، والتي يتم تضمينها في مربع النص. سيؤدي النقر فوق بدء التشغيل إلى إنشاء جدول مع 3 صفوف و 3 أعمدة. يتم ترتيب بيانات الجدول بشكل عشوائي من 1 إلى 9. في هذا الوقت ، انقر من 1 وانقر إلى 9 بالترتيب. عند النقر بالترتيب الصحيح ، سيتم مطالب الوقت المستخدم. إذا لم يكن الطلب صحيحًا ، فسيتم مطالب اللعبة.
1. قم أولاً بتنزيل رمز المصدر Vue ، قم بتنزيل العنوان http://cn.vuejs.org
2. يتم توجيه jquery نحو عمليات DOM ، في حين أن VUE موجهة نحو عمليات البيانات ، لذلك من الأفضل عدم تشغيل DOM عند استخدام VUE ، حاول إظهار تفرد VUE (قد يكون من الأسهل فهم إذا كنت قد استخدمت AngularJS)
3. قم بإنشاء ملف HTML عادي ويرجع الملف المصدر لـ VUE في الرأس
<head> <meta charset = "utf-8"/> <title> </title> <script type = "text/javaScript" src = "js/vue.js"> </script> </head>
4. صفحة بسيطة
1) أولاً وقبل كل شيء ، سيتغير نموذج V-Model ، الربط ثنائي الاتجاه للبيانات وفقًا للقيمة التي تم إدخالها في مربع النص الخاص بك.
2) click يربط حدث نقرة ، حيث @ هو اختصار V-ON. بالطبع ، يمكن أن يأخذ حدث الربط معلمات مثل @click = 'time (item)'.
3) v-for = "(الفهرس ، البند) في القائمة" ، صفيف الحلقة ، الفهرس هو علامة زاوية الصفيف ، والبند هو القيمة في الصفيف.
يمكنك التحقق من وثائق VUE لمزيد من المعلومات.
<Body> <div id = "play"> <span> أدخل الرقم وانقر للبدء ، وسيتم إنشاء جدول يتوافق مع رقم الإدخال. ابدأ من الرقم 1 في الجدول ، انقر إلى النهاية بالترتيب .... < /span> <br /> <input type = "number" v-model = "num" /> <button @click = 'arr'> ابدأ < /button> <br /> <div v-for = " style = "float: left ؛"> <button @click = 'time (item)'> {{item}} </button> </viv> </viv> </viv> </body>5.vue العملية
1) أولاً ، تحتاج إلى جديد مثيل VUE ، وربط EL DOM الخاص بك ، واستخدم المعرف كمعرف هنا
2) البيانات هي البيانات التي سيتم تشغيلها بواسطة VUE ، وقيمة مربع نص NUM (الافتراضي هو 2) ، والقائمة [] وفقًا لقيمة مربع النص ، والقائمة التي تم إنشاؤها ، وبدء بدء تشغيل جدول النقر ، ووقت نهاية جدول الانقر فوق الوقت ، والرقم المحدد حاليًا من checkNum.
3) هناك طريقتان في الأساليب التي تنشئ صفيفًا تعتمد على قيمة مربع النص ، ويقوم بإنشاء صفيف بطول مربع من قيمة مربع النص ولن يتم تكراره. قيمة الصفيف هي 1 مربع من قيمة مربع النص ، والقيمة المضافة إلى مربع النص هي 3 ، ثم طول الصفيف الذي تم إنشاؤه هو 9 ، ومحتوى الصفيف هو 1-9 ولا يتكرر.
يحسب الوقت وقت البدء ووقت الانتهاء من النقرات ، واستخدم Check] Num للتحكم في ترتيب النقرات.
<script> new Vue ({el: '#play' ، البيانات: {num: 2 ، القائمة: [] ، وقت البدء: 0 ، endtime: 0 ، checkNum: 0} ، الطرق: {arr: function () {if (this.num> 20) هذا. الحصول على عدد عشوائي من (arr [0] = 0) // وجدت أن هناك عنصرًا عشوائيًا جديدًا ؛ this.startTime = dateTime () ؛ }) </script>6.CSS رمز
<style> .ibulton {margin-top: 10px ؛ الهامش اليساري: 10px ؛ اللون: #ffff ؛ الحدود: 1 بكسل Solid #8a6de9 ؛ لون الخلفية: #8a6de9 ؛ حجم الخط: 14px ؛ الحشو: 6px 12px ؛ الحدود الحدودية: 7px ؛ العرض: 50 بكسل ؛ الارتفاع: 40 بكسل ؛ } </style>7. استخدام VUE لإكمال وظيفة في سيناريوهات معينة أكثر بساطة من jQuery ، لكن JQuery لا تزال قوية للغاية. استخدم تقنيات مختلفة لإكمال الوظائف التي تريدها بشكل أسرع وأفضل وفقًا لسيناريوهات مختلفة.
تم تجميع هذه المقالة في "Vue.js Front Component Learning Tutorial" ، والجميع مرحب بهم للتعلم والقراءة.
ما سبق هو كل محتوى هذه المقالة. آمل أن يكون ذلك مفيدًا لتعلم الجميع وآمل أن يدعم الجميع wulin.com أكثر.