องค์ประกอบคืออะไร?
Component เป็นหนึ่งในคุณสมบัติที่ทรงพลังที่สุดของ Vue.js ส่วนประกอบสามารถขยายองค์ประกอบ HTML และห่อหุ้มรหัสที่นำกลับมาใช้ใหม่ได้ ในระดับที่สูงขึ้นส่วนประกอบเป็นองค์ประกอบที่กำหนดเองและคอมไพเลอร์ของ Vue.js จะเพิ่มคุณสมบัติพิเศษให้กับมัน ในบางกรณีส่วนประกอบยังสามารถอยู่ในรูปแบบขององค์ประกอบ HTML ดั้งเดิมซึ่งขยายออกไปด้วยคุณสมบัติ IS
บทความนี้เป็นคำอธิบายโดยละเอียดเพิ่มเติมที่รวบรวมโดยบรรณาธิการตามเอกสารอย่างเป็นทางการ รหัสนั้นสมบูรณ์และสมบูรณ์แบบมากขึ้นซึ่งเหมาะสำหรับผู้เริ่มต้นที่จะเรียนรู้
เอกสารอย่างเป็นทางการ:
http://cn.vuejs.org/guide/components.html#u52a8_u6001_u7ec4_u4ef6
ส่วนประกอบแบบไดนามิกอธิบายไว้ด้านล่าง:
① Simple:
หมายความว่ามีส่วนประกอบหลายอย่างอยู่ใต้จุดเมานต์และจากนั้นพวกเขาตัดสินใจว่าจะแสดงตัวใดตามตัวแปรขององค์ประกอบหลักหรือไม่มีการแสดง
②สวิตช์ไดนามิก:
ใช้แท็กส่วนประกอบที่จุดเมานต์จากนั้นใช้ V-bind: IS =” ชื่อส่วนประกอบ” เพื่อค้นหาชื่อส่วนประกอบที่ตรงกันโดยอัตโนมัติ ถ้าไม่มันจะไม่ปรากฏ;
ในการเปลี่ยนองค์ประกอบที่ติดตั้งคุณจะต้องแก้ไขค่าของคำสั่ง IS เท่านั้น
ดังในรหัสตัวอย่าง:
<div id = "app"> <button @click = "toshow"> คลิกเพื่อให้การแสดงผลส่วนประกอบเด็ก </button> <component v-bind: is = "ซึ่ง _to_show"> </ponent> </div> <script> var vm = new vue ({el: #App ' ["First", "Second", "Third", "]; 1 </div> "}, ที่สอง: {// เทมเพลตองค์ประกอบลูกที่สอง:" <div> นี่คือองค์ประกอบเด็ก 2 </div> "}, สาม: {// เทมเพลตองค์ประกอบลูกที่สาม:" <div> นี่คือองค์ประกอบเด็ก 3 </div> "},}}); </script>ภาพประกอบ:
การคลิกปุ่มของส่วนประกอบพาเรนต์จะสลับเพื่อแสดงส่วนประกอบลูกโดยอัตโนมัติ (พิจารณาตามค่าของตัวแปรที่ _to_show)
③ Keep-Alive
พูดง่ายๆคือส่วนประกอบที่ถูกปิด (ไม่ปรากฏในปัจจุบัน) จะถูกลบโดยตรง
เมื่อดูสิ่งนี้แอตทริบิวต์เด็ก $ ในองค์ประกอบหลักคุณจะพบว่าเมื่อส่วนประกอบของเด็กมีอยู่ความยาวของแอตทริบิวต์คือ 1 และเมื่อไม่มีส่วนประกอบของเด็กความยาวของแอตทริบิวต์คือ 0 (ไม่สามารถรับองค์ประกอบเด็กได้);
หากจำเป็นต้องเปลี่ยนส่วนประกอบเด็กก็ยังจำเป็นต้องเก็บไว้ในหน่วยความจำเพื่อหลีกเลี่ยงการแสดงผลอีกครั้งเมื่อปรากฏในครั้งต่อไป จากนั้นคุณควรเพิ่มแอตทริบิวต์ Keep-Alive ลงในแท็กส่วนประกอบ
เป็นรหัส:
<div id = "แอป"> <button @click = "toshow"> คลิกเพื่อให้การแสดงผลส่วนประกอบลูก </button> <component v-bind: is = "ซึ่ง _to_show" Keep-Alive> </ponent> </div> <script> var vm = new vue ({el: #app ' แสดง arr = [ครั้งแรก "," ที่สอง "," ที่สาม ","]; เทมเพลตส่วนประกอบลูกแรก: "<div> นี่คือส่วนประกอบเด็ก 1 </div>"}, ที่สอง: {// เทมเพลตองค์ประกอบลูกที่สอง: "<div> นี่คือองค์ประกอบเด็ก 2 </div>"}, สาม: {// เทมเพลตองค์ประกอบลูกที่สาม: "<div> </script>ภาพประกอบ:
ในกรณีเริ่มต้นมีเพียงองค์ประกอบเดียว (องค์ประกอบแรก) ในแอตทริบิวต์ VM. $ หลังจากคลิกปุ่มเพื่อสลับมีสององค์ประกอบในแอตทริบิวต์ VM $ เด็ก หลังจากสลับอีกครั้งมีสามองค์ประกอบ (ส่วนประกอบย่อยทั้งสามจะถูกเก็บไว้ในหน่วยความจำ)
หลังจากนั้นไม่ว่าคุณจะเปลี่ยนอย่างไรจะมีสามองค์ประกอบ
④เปิดใช้งาน Hook
พูดง่ายๆก็คือการโหลดขี้เกียจ
ตัวอย่างเช่นเมื่อเริ่มคำขอ AJAX เราต้องรอสักครู่ หากเราต้องการโหลดคำขอ AJAX หลังจากเสร็จสิ้นเราต้องใช้ Hook Activate
ในแง่ของการใช้งานเฉพาะการเปิดใช้งานเป็นแอตทริบิวต์ในระดับเดียวกับแอตทริบิวต์เช่นเทมเพลตและข้อมูล แบบฟอร์มเป็นฟังก์ชั่น มีพารามิเตอร์ในฟังก์ชั่นโดยค่าเริ่มต้น พารามิเตอร์นี้เป็นฟังก์ชัน ส่วนประกอบจะถูกสลับเฉพาะเมื่อฟังก์ชั่นนี้ถูกเรียกใช้งาน
เพื่อพิสูจน์การโหลดล่าช้าทางฝั่งเซิร์ฟเวอร์ฉันตั้งค่าว่าเมื่อมีการเริ่มคำขอ AJAX บางอย่างมันจะล่าช้า 2 วินาทีก่อนที่จะส่งคืนเนื้อหา ดังนั้นเมื่อสลับส่วนประกอบ 2 เป็นครั้งแรกคุณต้องรอ 2 วินาทีก่อนที่จะสลับสำเร็จ:
<div id = "app"> <button @click = "toshow"> คลิกเพื่อให้การแสดงผลส่วนประกอบเด็ก </button> <component v-bind: is = "ซึ่ง _to_show"> </ponent> </div> <script> var vm = new vue ({el: #App ' [First "," Second "," Third ","]; เทมเพลต: "<div> นี่คือส่วนประกอบเด็ก 1 </div>"}, วินาที: {// เทมเพลตองค์ประกอบลูกที่สอง: "<div> นี่คือส่วนประกอบเด็ก 2 นี่คือเนื้อหาหลังจาก ajax: {{hello}} </div>" data: function () {return {hello: ""}} สวิตช์ 3 </div> "}}}); </script>รหัสเอฟเฟกต์:
【 1 】เมื่อเปลี่ยนไปใช้ส่วนประกอบ 2 เป็นครั้งแรกคุณต้องรอ 2 วินาทีก่อนที่จะแสดง (เนื่องจาก AJAX เริ่มต้น);
[2] ในกรณีของการเก็บรักษา-live เมื่อเปลี่ยนไปใช้ส่วนประกอบ 2 วินาทีหรือใหม่กว่าไม่จำเป็นต้องรอ; แต่เนื้อหา AJAX จะต้องแสดงสองวินาทีหลังจากเริ่ม AJAX เป็นครั้งแรก
【 3 】โดยไม่ต้องเก็บรักษา (ไม่ได้บันทึกไว้ในหน่วยความจำหลังจากสลับออก) คุณยังต้องรอเมื่อเปลี่ยนมาใช้ส่วนประกอบ 2 เป็นครั้งที่สอง
[4] เมื่อรอมันจะไม่ส่งผลกระทบต่อการสลับอีกครั้ง (นั่นคือเมื่อรอส่วนประกอบ 2 คลิกเพื่อสลับอีกครั้งเพื่อสลับโดยตรงไปยังส่วนประกอบ 3);
ภาพประกอบ:
【 1 】เปิดใช้งานจะถูกดำเนินการเฉพาะเมื่อส่วนประกอบถูกแสดงผลเป็นครั้งแรกและฟังก์ชั่นจะถูกดำเนินการเพียงครั้งเดียวเท่านั้น (ส่วนประกอบปรากฏล่าช้าเมื่อส่วนประกอบปรากฏขึ้น)
【 2 】เมื่อไม่มีการเก็บรักษาทุกครั้งที่ส่วนประกอบสวิตช์ปรากฏขึ้นมันจะถูกแสดงใหม่อีกครั้ง (เนื่องจากกระบวนการทำลายถูกดำเนินการเมื่อซ่อนมาก่อน) ดังนั้นวิธีการเปิดใช้งานจะถูกดำเนินการ
⑤โหมดการเปลี่ยนโหมดการถ่ายภาพ
พูดง่ายๆปล่อยให้องค์ประกอบไดนามิกเปลี่ยนเป็นภาพเคลื่อนไหว (จำคำแนะนำในส่วนการเปลี่ยนภาพการเปลี่ยนแปลงเหมาะสำหรับส่วนประกอบแบบไดนามิก)
โดยค่าเริ่มต้นรายการและทางออกจะเสร็จสิ้นร่วมกัน (เนื้อหาที่เข้ามาอาจปรากฏอยู่ด้านล่างเนื้อหาทางออกซึ่งหมายถึงด้านล่างของแกน y หลังจากออกรายการจะปรากฏในตำแหน่งที่ถูกต้อง);
เมื่อ transition-mode =” out-in” ภาพเคลื่อนไหวจะออกก่อนแล้วป้อน;
เมื่อ Transition-Mode =” In-Out” ภาพเคลื่อนไหวเป็นครั้งแรกในและใหม่กว่า (เช่นเดียวกับปัญหาที่มีแนวโน้มที่จะเกิดขึ้นในค่าเริ่มต้น);
ตัวอย่างโค้ด: (ใช้ชื่อการเปลี่ยนแปลงที่กำหนดเองและไฟล์ animate.css)
<div id = "app"> <button @click = "toshow"> คลิกเพื่อให้การแสดงผลส่วนประกอบลูก </button> <component v-bind: is = "ซึ่ง _to_show" transition = "bounce" transition-mode = "out-in"> </ponent> }) var vm = new vue ({el: '#app', ข้อมูล: {whhe_to_show: "แรก"}, วิธีการ: {toshow: function () {// สวิตช์ส่วนประกอบแสดง var arr = ["แรก", "ที่สอง", "สาม", ""]; var index = arr.indexof + 1];} else {this.which_to_show = arr [0];}}}, ส่วนประกอบ: {ครั้งแรก: {// เทมเพลตส่วนประกอบลูกแรก ข้อมูล: function () {return {hello: ""}}}, สาม: {// เทมเพลตองค์ประกอบลูกที่สาม: "<div> นี่คือส่วนประกอบลูก 3 </div>"}}}}); </script>ด้านบนเป็นองค์ประกอบแบบไดนามิกของบทที่ 12 ของ Vuejs ที่แนะนำโดยบรรณาธิการ ฉันหวังว่ามันจะเป็นประโยชน์กับคุณ หากคุณมีคำถามใด ๆ โปรดฝากข้อความถึงฉันและบรรณาธิการจะตอบกลับคุณทันเวลา ขอบคุณมากสำหรับการสนับสนุนเว็บไซต์ Wulin.com!