ใช้ VUE เพื่อเขียนเกมกำหนดเวลาจำนวนมินิคลิกซึ่งรวมอยู่ในกล่องข้อความ การคลิกเริ่มจะสร้างตารางที่มี 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 = 'เวลา (รายการ)'
3) V-for = "(ดัชนี, รายการ) ในรายการ", array ลูป, ดัชนีเป็นเครื่องหมายมุมของอาร์เรย์และรายการคือค่าในอาร์เรย์
คุณสามารถตรวจสอบเอกสาร Vue สำหรับข้อมูลเพิ่มเติม
<body> <div id = "play"> <pan> ป้อนหมายเลขและคลิกเพื่อเริ่มต้นและตารางที่สอดคล้องกับหมายเลขอินพุตจะถูกสร้างขึ้น เริ่มต้นจากหมายเลข 1 ในตารางคลิกที่จุดสิ้นสุดตามลำดับ .... </span> <br /> <อินพุตประเภท = "หมายเลข" v-model = "num" /> <button @คลิก = 'arr'> เริ่มต้น < /button> <br /> <div v-for = "(ดัชนี, รายการ) ในรายการ"> < style = "float: left;"> <button @click = 'time (item)'> {{item}} </button> </div> </div> </div> </body>5. การดำเนินการ
1) ก่อนอื่นคุณต้องใช้อินสแตนซ์ของ Vue ใหม่และ EL ผูก DOM ของคุณและใช้ ID เป็นตัวระบุที่นี่
2) ข้อมูลคือข้อมูลที่จะดำเนินการโดย Vue ค่าของกล่องข้อความ NUM (ค่าเริ่มต้นคือ 2), รายการ [] ตามค่ากล่องข้อความรายการที่สร้างขึ้นเวลาเริ่มต้นการคลิกเวลาเริ่มต้นเวลาเริ่มต้นตารางเวลาคลิกสุดท้ายและจำนวน CheckNum ที่เลือกในปัจจุบัน
3) มีสองวิธีในวิธีการที่สร้างอาร์เรย์ตามค่าของกล่องข้อความและสร้างอาร์เรย์ที่มีความยาวสี่เหลี่ยมของค่ากล่องข้อความและจะไม่ถูกทำซ้ำ ค่าของอาร์เรย์คือ 1 ตารางของค่ากล่องข้อความและค่าที่เพิ่มลงในกล่องข้อความคือ 3 จากนั้นความยาวอาร์เรย์ที่สร้างขึ้นคือ 9 เนื้อหาของอาร์เรย์คือ 1-9 และไม่ทำซ้ำ
เวลาคำนวณเวลาเริ่มต้นและเวลาสิ้นสุดของการคลิกและใช้เช็ค] NUM เพื่อควบคุมลำดับการคลิก
<script> ใหม่ vue ({el: '#play', ข้อมูล: {num: 2, รายการ: [], starttime: 0, endtime: 0, checknum: 0}, วิธีการ: {arr: function () {ถ้า (this.num> 20) {การแจ้งเตือน นี่คือ array arr = array (arrlength); รับจำนวน 1 ~? else {// ฉันพบว่ามีองค์ประกอบที่ซ้ำกันและสร้างหมายเลขใหม่ให้กับฉัน-; 1) {this.starttime = date.gettime (); }}}) </script>6. รหัส CSS
<style> .Ibutton {margin-top: 10px; ขอบซ้าย: 10px; สี: #FFFF; ชายแดน: 1px Solid #8A6DE9; พื้นหลังสี: #8A6DE9; ขนาดตัวอักษร: 14px; Padding: 6px 12px; แนวชายแดน: 7px; ความกว้าง: 50px; ความสูง: 40px; } </style>7. การใช้ VUE เพื่อทำฟังก์ชั่นในสถานการณ์เฉพาะบางอย่างนั้นง่ายกว่า jQuery มาก แต่ jQuery ยังคงทรงพลังมาก ใช้เทคโนโลยีที่แตกต่างกันเพื่อทำฟังก์ชั่นที่คุณต้องการเร็วขึ้นและดีขึ้นตามสถานการณ์ที่แตกต่างกัน
บทความนี้ได้รวบรวมไว้ใน "Vue.js front-end การสอนการเรียนรู้การเรียนรู้" และทุกคนยินดีที่จะเรียนรู้และอ่าน
ข้างต้นเป็นเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการเรียนรู้ของทุกคนและฉันหวังว่าทุกคนจะสนับสนุน wulin.com มากขึ้น