การวิเคราะห์สั้น ๆ ของส่วนประกอบ vue.js ที่ทรงพลัง

องค์ประกอบคืออะไร: ส่วนประกอบเป็นหนึ่งในคุณสมบัติที่ทรงพลังที่สุดของ Vue.js ส่วนประกอบสามารถขยายองค์ประกอบ HTML และห่อหุ้มรหัสที่นำกลับมาใช้ใหม่ได้ ในระดับที่สูงขึ้นส่วนประกอบเป็นองค์ประกอบที่กำหนดเองและคอมไพเลอร์ของ Vue.js จะเพิ่มคุณสมบัติพิเศษให้กับมัน ในบางกรณีส่วนประกอบยังสามารถอยู่ในรูปแบบขององค์ประกอบ HTML ดั้งเดิมซึ่งขยายออกไปด้วยคุณสมบัติ IS

จะลงทะเบียนส่วนประกอบได้อย่างไร?

คุณต้องสร้างส่วนประกอบโดยใช้วิธี Vue.extend จากนั้นลงทะเบียนส่วนประกอบโดยใช้วิธี Vue.Component รูปแบบของวิธี vue.extend มีดังนี้:

 var myComponent = vue.extend ({// ตัวเลือก ... ฉันจะแนะนำในภายหลัง})

หากคุณต้องการใช้ส่วนประกอบที่สร้างขึ้นที่อื่นคุณต้องตั้งชื่อ:

Vue.Component ('My-Component', MyComponent)

หลังจากการตั้งชื่อคุณสามารถใช้ชื่อส่วนประกอบนี้ในแท็ก HTML เช่นเดียวกับการใช้องค์ประกอบ DOM มาดูตัวอย่างที่สมบูรณ์ของการลงทะเบียนและการใช้งาน

รหัส HTML:

 <div id = "ตัวอย่าง"> <my-component> </my-component> </div>

รหัส JS:

 // define var myComponent = vue.extend ({template: '<div> องค์ประกอบที่กำหนดเอง! </div>'}) // ลงทะเบียน vue.Component ('My-Component', MyComponent) // สร้างอินสแตนซ์ใหม่ vue ({el:##example '})

ผลลัพธ์ผลลัพธ์:

 <div id = "ตัวอย่าง"> <div> ส่วนประกอบที่กำหนดเอง! </div> </div

ส่วนประกอบซ้อน

ส่วนประกอบของตัวเองยังสามารถมีส่วนประกอบได้ องค์ประกอบหลักต่อไปนี้มีส่วนประกอบที่มีชื่อว่าองค์ประกอบเด็ก แต่ส่วนประกอบนี้สามารถใช้งานได้โดยส่วนประกอบหลักเท่านั้น:

 var child = vue.extend ({template: '<div> องค์ประกอบที่กำหนดเอง! </div>'}); var parent = vue.extend ({template: '<div> องค์ประกอบหลัก: <เด็ก-องค์ประกอบ> </component> </div>

กระบวนการนิยามข้างต้นค่อนข้างยุ่งยากและคุณไม่จำเป็นต้องเรียกวิธี VUE.COMPONENT และ VUE.EXTEND ทุกครั้ง:

 // ขยายและลงทะเบียน Vue.Component ('My-Component', {แม่แบบ: '<div> องค์ประกอบที่กำหนดเอง! </div>'}) // สิ่งนี้เป็นไปได้ด้วยการลงทะเบียนท้องถิ่น var parent = vue.extend ({ส่วนประกอบ: {'องค์ประกอบของฉัน': {เทมเพลต: '<div>

ส่วนประกอบแบบไดนามิก

ส่วนประกอบหลายส่วนสามารถใช้จุดเมานต์เดียวกันจากนั้นสลับระหว่างกันแบบไดนามิก ใช้องค์ประกอบ <Component> ที่สงวนไว้เพื่อผูกกับคุณสมบัติ IS แบบไดนามิก คอลัมน์ด้านล่างมีสามองค์ประกอบที่บ้านโพสต์และที่เก็บถาวรที่ติดตั้งภายใต้อินสแตนซ์ VUE เดียวกันและสลับการแสดงส่วนประกอบแบบไดนามิกผ่านคุณสมบัติ CurrentView

รหัส HTML:

 <div id = "dynamic"> <button id = "home"> home </button> <button id = "โพสต์"> โพสต์ </putous> <button id = "Archive"> Archive </button> <br> <bonent: IS = "CurrentView"

รหัส JS:

 var vue = new vue ({el: "#dynamic", data: {currentView: "home"}, ส่วนประกอบ: {หน้าแรก: {template: "home"}, โพสต์: {template: "โพสต์"}, เก็บถาวร: {template: "archive"}}}); "home";}; document.getElementById ("โพสต์"). onclick = function () {vue.currentView = "โพสต์";}; document.getElementById ("เก็บถาวร") onClick = function () {vue.currentView = "เก็บถาวร";};

ส่วนประกอบและ v-for

<องค์ประกอบของฉัน v-for = "รายการในรายการ"> </my-component>

ข้อมูลไม่สามารถส่งผ่านไปยังส่วนประกอบได้เนื่องจากขอบเขตของส่วนประกอบนั้นเป็นอิสระ เพื่อส่งผ่านข้อมูลไปยังส่วนประกอบควรใช้อุปกรณ์ประกอบฉาก:

<องค์ประกอบของฉัน

v-for = "รายการในรายการ"

: item = "item"

: index = "$ index">

</my-component>

เหตุผลที่รายการนั้นไม่ได้ถูกฉีดลงในส่วนประกอบโดยอัตโนมัติคือสิ่งนี้ทำให้ส่วนประกอบถูกจับคู่กับ V-FOR อย่างแน่นหนา ประกาศอย่างชัดเจนว่าข้อมูลมาจากไหนและสามารถนำกลับมาใช้ใหม่ได้ที่อื่นสำหรับส่วนประกอบ

หลักการตอบสนองเชิงลึก

เมื่อส่วนประกอบเชื่อมโยงข้อมูลการผูกจะมีประสิทธิภาพอย่างไรและสามารถแก้ไขและเพิ่มแอตทริบิวต์แบบไดนามิกได้อย่างไร ดูการแนะนำหลักการต่อไปนี้

วิธีการติดตามการเปลี่ยนแปลง: ส่งวัตถุอื่นไปยังอินสแตนซ์ VUE เป็นตัวเลือกสำหรับข้อมูล vue.js จะสำรวจคุณสมบัติของมันและแปลงเป็น getter/setter ด้วย object.defineproperty นี่คือคุณสมบัติ ES5 และ Vue.js ทั้งหมดไม่รองรับ IE8 หรือต่ำกว่า

แต่ละคำสั่ง/ข้อมูลที่มีผลผูกพันในเทมเพลตมีวัตถุ Watcher ที่สอดคล้องกันซึ่งบันทึกแอตทริบิวต์เป็นการพึ่งพาระหว่างกระบวนการคำนวณ หลังจากนั้นเมื่อมีการเรียกผู้ตั้งค่าที่ขึ้นอยู่กับการคำนวณใหม่ของ Watcher จะถูกเรียกใช้ กระบวนการมีดังนี้:

เปลี่ยนปัญหาการตรวจจับ: vue.js ไม่สามารถตรวจจับการเพิ่มหรือการกำจัดคุณสมบัติของวัตถุ คุณสมบัติจะต้องอยู่ในข้อมูลเพื่อเปิดใช้งาน vue.js เพื่อแปลงเป็นโหมด getter/setter เพื่อตอบสนอง ตัวอย่างเช่น:

 var data = {a: 1}; var vm = new vue ({data: data}); // `vm.a` และ` data.a` ตอนนี้ตอบสนอง vm.b = 2 // `vm.b` ไม่ใช่ข้อมูลที่ตอบสนองได้

อย่างไรก็ตามมีวิธีเพิ่มแอตทริบิวต์หลังจากการสร้างอินสแตนซ์และทำให้สอดคล้องกัน คุณสามารถใช้วิธีอินสแตนซ์ชุด (คีย์ค่า):

VM ตั้งค่า ('B', 2)

// `vm.b` และ` data.b` ตอนนี้ตอบสนองแล้ว

สำหรับวัตถุปกติคุณสามารถใช้วิธีการทั่วโลก: vue.set (วัตถุ, คีย์, ค่า):

vue.set (data, 'c', 3)

// `vm.c` และ` data.c` ตอนนี้ตอบสนองแล้ว

เริ่มต้นข้อมูล: แม้ว่า vue.js จะให้การเพิ่มคุณสมบัติที่สอดคล้องกันแบบไดนามิก แต่ก็ขอแนะนำให้ประกาศคุณสมบัติที่เกี่ยวข้องทั้งหมดในวัตถุข้อมูล

อย่าทำเช่นนี้:

 var vm = new vue ({template: '<div> {{msg}} </div>'}) // จากนั้นเพิ่ม `msg`vm. $ set ('msg', 'hello!')

สิ่งนี้ควรทำ:

 var vm = new vue ({data: {// declare `msg` msg: ''}, เทมเพลต: '<div> {{msg}} </div>'}) // จากนั้นตั้งค่า` msg`vmmmsg = 'hello!'

เคสที่สมบูรณ์ส่วนประกอบ

ตัวอย่างที่แนะนำด้านล่างใช้ฟังก์ชั่นหน้าต่างโมดัลและรหัสค่อนข้างง่าย

รหัส HTML:

 <!-ใช้สคริปต์เพื่อกำหนดเทมเพลต-> <script type = "x/template" id = "modal-template"> <!-ไม่ว่าเทมเพลตจะถูกตั้งค่าผ่าน v-show = "show", การเปลี่ยนแปลงชุดเอฟเฟกต์ภาพเคลื่อนไหว-> <div v-show = "show" transition = "modal ส่วนหัว </lot> </div> <div> <!-สล็อตเทียบเท่ากับตัวยึดตัวตน-> <slot name = "body"> ร่างกายเริ่มต้น </slot> </div> <div> <! </div> </div> </div> </div> </div> </div> </div> </div> </script> <div id = "แอป"> <!-ตั้งค่าแอตทริบิวต์อินสแตนซ์ VUE เมื่อคลิกปุ่ม ค่าของ showmodal เป็นจริง-> <button id = "show-modal" @click = "showmodal = true"> แสดง modal </button> <!-Modal เป็นปลั๊กอินที่กำหนดเอง คุณสมบัติของปลั๊กอินแสดงให้เห็นถึงคุณสมบัติ showmodal ของอินสแตนซ์ vue-> <modal: show.sync = "showmodal"> <!-แทนที่เนื้อหาของสล็อตในปลั๊กอินโมดอลแล้วเป็นส่วนหัว-> <h3 slot = "ส่วนหัว"> ส่วนหัวที่กำหนดเอง </h3>

รหัส JS:

 // กำหนดปลั๊กอินด้วยชื่อ modalVue.Component ("modal", {// เทมเพลตของปลั๊กอินถูกผูกไว้กับเนื้อหาขององค์ประกอบ DOM ด้วย ID ของเทมเพลต modal-template: "#modal-template", อุปกรณ์ประกอบฉาก: {// ประเภทคือบูล // อินสแตนซ์ Vue, ขอบเขตอยู่ภายใต้ ID ขององค์ประกอบแอพ, Vue ใหม่ ({el: "#App", ข้อมูล: {// ค่าเริ่มต้นเป็นเท็จแสดงให้เห็นว่า: เท็จ}});

รหัส CSS:

 .MODAL-MASK {ตำแหน่ง: แก้ไข; z-index: 9998; ด้านบน: 0; ซ้าย: 0; ความกว้าง: 100%; ความสูง: 100%; พื้นหลังสี: RGBA (0, 0, 0, .5); แสดง: ตาราง; การเปลี่ยนแปลง: ความทึบ. 3S ง่ายดาย;}. modal-wrapper {display: table-cell; แนวตั้ง-จัดตำแหน่ง: middle;}. modal-container {width: 300px; มาร์จิ้น: 0px auto; Padding: 20px 30px; พื้นหลังสี: #FFF; แนวชายแดน: 2px; Box-Shadow: 0 2px 8px RGBA (0, 0, 0, .33); การเปลี่ยนแปลง: ความสะดวก. 3S ทั้งหมด; Font-Family: Helvetica, Arial, Sans-Serif;}. Modal-Header H3 {margin-top: 0; สี: #42b983;}. modal-body {margin: 20px 0;}. modal-default-button {float: ขวา;}/** รูปแบบต่อไปนี้ใช้งานอัตโนมัติกับองค์ประกอบที่มีการเล่น* v-transition = "modal" รูปแบบ.*/. Modal-Enenter, .modal-Leave {Opacity: 0;}. Modal-Entern.modal-container, .modal-Leave .Modal-container {-webkit-transform: Scale (1.1); แปลง: สเกล (1.1);}

บทความนี้ได้รวบรวมไว้ใน "Vue.js front-end การสอนการเรียนรู้การเรียนรู้" และทุกคนยินดีที่จะเรียนรู้และอ่าน

สำหรับการสอนเกี่ยวกับส่วนประกอบ vue.js โปรดคลิกที่หัวข้อพิเศษ vue.js การสอนการเรียนรู้องค์ประกอบเพื่อเรียนรู้

เนื่องจากฉันไม่ได้ใช้ฟังก์ชั่นของส่วนประกอบในเชิงลึกในโครงการฉันจึงไม่มีความเข้าใจอย่างลึกซึ้งเกี่ยวกับส่วนประกอบและการแนะนำค่อนข้างผิวเผิน ขอบคุณสำหรับการอ่าน