Vue.js เป็นไลบรารีสำหรับการสร้างเว็บอินเตอร์เฟสที่ขับเคลื่อนด้วยข้อมูล เป้าหมายของ Vue.js คือการใช้งานการตอบสนองข้อมูลการตอบสนองและส่วนประกอบมุมมองรวมผ่าน API ที่ง่ายที่สุดเท่าที่จะเป็นไปได้ (นี่คือคำอธิบายอย่างเป็นทางการ!)
บรรณาธิการไม่เคยใช้ AngularJs และไม่ได้ใช้ React.js ฉันไม่สามารถอธิบายความแตกต่างในรายละเอียดได้ทั้งสาม หากคุณต้องการทราบมีการวิเคราะห์อย่างเป็นทางการ กรุณาคลิกที่นี่เพื่อดู
บรรณาธิการมีส่วนร่วมในการพัฒนาส่วนหน้ามานานกว่าหนึ่งปี ในตอนแรกมีเทคโนโลยีมากเกินไปในการพัฒนาส่วนหน้า บรรณาธิการไม่มีอำนาจและไม่สามารถนำมาพิจารณาได้ หลังจากทำความเข้าใจเขาเลือกที่จะเรียนรู้เส้นทางการเรียนรู้ของการเรียนรู้จากการควบรวมกิจการพื้นฐานของ JS และ jQuery ตัวแก้ไขใช้ vue.js เนื่องจากความต้องการทางธุรกิจ ทำไมคุณไม่เลือก AngularJS อันที่จริงคุณไม่สามารถละทิ้ง jQuery ในเวลาเดียวกัน vue.js และ jQuery สามารถเข้ากันได้อย่างสมบูรณ์แบบ เนื่องจากโครงการนี้บรรณาธิการได้ทำงานล่วงเวลาเป็นเวลานานและศึกษาอย่างต่อเนื่องเพื่อหลีกเลี่ยงการเพิ่มขึ้นของเวลาในการพัฒนาโครงการ หากไม่มีความกังวลใจเพิ่มเติมให้เริ่มสรุปการเรียนรู้ VUE ของบรรณาธิการ หากคุณไม่ได้เขียนดีอย่าคุ้นเคยกับมัน การเขียนบทความเป็นจุดอ่อนของฉันเสมอ - - -
นี่คือตัวอย่างของ Vue เป็นห่วงโซ่หลัก
ส่วนประกอบเด็กสามารถส่งผ่านสิ่งนี้ได้ อินสแตนซ์รูทสามารถเข้าถึงได้โดยใช้สิ่งนี้รูท ผู้ปกครองมีอาร์เรย์นี้เด็กและองค์ประกอบทั้งหมด แน่นอนในโครงการส่วนประกอบของเราไม่สามารถมีเพียงหนึ่งหรือสอง เมื่อมีส่วนประกอบมากเกินไปมันเป็นเรื่องยากที่เราจะจดจำตำแหน่งของส่วนประกอบในเด็ก เราสามารถใช้คำสั่ง V-Ref เพื่อสร้างตะขอสำหรับส่วนประกอบของเรา ตะขอนี้เป็นดัชนีเมื่อส่วนประกอบอื่น ๆ ของเราเข้าถึงส่วนประกอบ
// นี่เป็นหนึ่งในองค์ประกอบของฉัน <msg v-ref: msgs> </sg> // ในเวลานี้เราได้สร้างดัชนีของ MSGs สำหรับส่วนประกอบ MSG นี้ // เราสามารถเข้าถึงองค์ประกอบ var vm = vue ใหม่ ({}); var children = vm. $ refs.msgs // เข้าถึงส่วนประกอบลูกของเราด้วยวิธีนี้ // v-ref เป็นอาร์เรย์หรือวัตถุซึ่งเป็นคอลเลกชันของส่วนประกอบที่เราสร้างเบ็ด ref ทั้งหมดที่นี่ฉันจะแสดงภาพให้คุณดูและดูเนื้อหาที่เกี่ยวข้องกับผู้ปกครองเด็กและ $ refs (ดูเหมือนว่าภาพจะเบลอเล็กน้อยและมันจะไม่เป็นภาพที่สมบูรณ์แบบมันน่าอายและมองไม่เห็นอย่างชัดเจนคุณสามารถสร้างตัวอย่างและพิมพ์ออกมา!)
แม้ว่าเราสามารถเข้าถึงส่วนประกอบโดยตรงในตัวอย่างทั้งหมดด้วยวิธีนี้ แต่ก็ไม่แนะนำให้ทำเช่นนั้นเพราะมันแย่มากสำหรับเด็กที่จะปรับเปลี่ยนสถานะขององค์ประกอบหลักโดยตรงซึ่งจะทำให้ส่วนประกอบของผู้ปกครองและเด็กเข้ากันอย่างแน่นหนา ตามหลักการแล้วแต่ละองค์ประกอบสามารถปรับเปลี่ยนสถานะของตัวเองได้เท่านั้นเนื่องจากขอบเขตของแต่ละองค์ประกอบนั้นเป็นอิสระ
ในกรณีนี้ Vue ยังนำกิจกรรมที่กำหนดเองของพวกเขามาให้เราด้วย
ใช้ $ dispatch () เพื่อส่งเหตุการณ์และเหตุการณ์ฟองสบู่ตามห่วงโซ่หลัก
ใช้ $ broadcast () เพื่อออกอากาศกิจกรรมและกิจกรรมจะถูกส่งไปยังลูกหลานทั้งหมด
มันดูเป็นนามธรรมเล็กน้อยมันง่ายกว่าที่จะเข้าใจด้วยตัวอย่าง
// $ dispatch () กรณีฟอง <!-ตัวอย่าง-> <div id = "แอป"> <!-การสื่อสารส่วนประกอบ 1-> <ส่วน> <div> <label for = ""> ข้อมูลของ MSG: </label> {{msg}} </div> <! v-model = "msg"> <a href = "JavaScript:;" @click = "add_data"> เพิ่ม </a> </div> </template> <script> vue.Component ('msg', {// น้ำตาลไวยากรณ์ถูกใช้เพื่อลงทะเบียนส่วนประกอบโดยตรงและเทมเพลตที่เรียบง่ายและทางลัด: '#msg', data: {return {msg: '}}}}}}} เหตุการณ์วิธีการ $ dispatch () จะถูกเรียกใช้; สิ่งนี้. $ parent.add (par_msg); เหตุการณ์ที่ฟังคำตอบที่สอดคล้องกัน 'add_msg': ฟังก์ชั่น (msg) {// add_msg เป็นวิธีที่ใช้ในการฟังส่วนย่อยหลังจากอ่านรหัสนี้ฉันเชื่อว่าทุกคนรู้ว่าการใช้ $ dispatch () ในความเป็นจริงมีสองพารามิเตอร์ในนั้น พารามิเตอร์แรกคือองค์ประกอบหลักฟังชื่อวิธีในวัตถุเหตุการณ์ขององค์ประกอบลูก ทั้งสองจะต้องสอดคล้องกัน พารามิเตอร์ที่สองคือข้อมูลที่อัปเดตโดยส่วนประกอบเด็กซึ่งจะถูกส่งผ่านไปยังข้อมูลที่จะได้รับการอัปเดตแบบซิงโครนัสไปยังส่วนประกอบพาเรนต์ จากนั้นส่วนประกอบหลักจะใช้พารามิเตอร์นี้เพื่อดำเนินการที่สอดคล้องกัน
// การใช้วิธี $ broadcast () นั้นเหมือนกับของ $ dispatch () ความแตกต่างคือวัตถุเหตุการณ์ถูกสร้างขึ้นในส่วนประกอบลูกและฟังก์ชั่นที่เรียกใช้กับองค์ประกอบหลักอยู่ในทางตรงกันข้าม สิ่งที่เราต้องการพูดที่นี่คือหากข้อมูลของส่วนประกอบเด็กขึ้นอยู่กับข้อมูลขององค์ประกอบหลักอย่างสมบูรณ์ไม่จำเป็นต้องใช้วิธีการส่งเหตุการณ์ทั่วไป คุณจะต้องได้รับข้อมูลขององค์ประกอบหลักผ่านอุปกรณ์ประกอบฉากและผูกไว้กับองค์ประกอบลูก
<!-การสื่อสารส่วนประกอบ 2 $ broadcast () เมธอด-> <section> <h3> แหล่งข้อมูลที่เพิ่มโดยองค์ประกอบหลัก: </h3> <div> <label for = "" id: </label> <div> <อินพุต type = "text" v-model = "id"> </div> v-model = "name"> </div> </div> <div> <label for = ""> โฮสต์: </label> <div> <อินพุต type = "text" v-model = "inst"> </div> </div> <div> สำหรับ = ""> </label> <div> <a href = "JavaScript:;" @click = "add_table"> เพิ่ม </a> </div> </div> <h3> ตารางต่อไปนี้เป็นข้อมูลส่วนประกอบของเด็ก: </h3> <!-ผูกข้อมูล table_data ของส่วนประกอบของแม่กับองค์ประกอบลูก-> <broadcase: data = "table_data"> </broadcase> < id = "broadcase"> <div> <table> <thead> <tr> <th> id </th> <th> ชื่อ </th> <th> งานอดิเรก </th> </tr> </tbody> <tr v-for = "รายการในข้อมูล"> <td> {{list.id}} </td> list.inst}} </td> </tr> </tbody> </table> </div> </template> <script> vue.Component ('broadcase', {// นี่คือน้ำตาลไวยากรณ์ที่ใช้ลงทะเบียนส่วนประกอบและการใช้งานแบบง่ายและการยอมรับ ข้อมูล '#app', data: {table_data: [{id: 1, ชื่อ: 'gjei', inst: 'gjweir'}, {id: 2, ชื่อ: 'jiuyer', inst: 'oiuyt'}]}, วิธี: {add_table: function () this.inst}; this.table_data.push (set); // this. $ broadcast ('test', set);คุณสามารถคลิกที่นี่เพื่อทดสอบสองตัวอย่างที่กล่าวถึงข้างต้น ไฟล์ได้รับการอัพโหลดไปยังการสาธิตการสื่อสารส่วนประกอบส่วนบุคคล Vue Parent-Child Component
เมื่อฉันเขียนสิ่งนี้เสร็จฉันมองย้อนกลับไปและเห็นว่าเนื้อหาที่ฉันเขียนดูเหมือนจะยุ่งเหยิงไปหน่อยซึ่งรู้สึกละอายใจจริงๆ! ฉันคิดถึงการเขียนบล็อกและสร้างห้องสมุดโน้ตของตัวเองเมื่อนานมาแล้ว แต่เมื่อฉันพยายามเขียนมันมาก่อนฉันไม่สามารถทำได้ เมื่อเร็ว ๆ นี้ฉันได้ตัดสินใจที่จะยืนยันในการเขียนไม่ว่าฉันจะเขียนมันอย่างไร จะเกิดอะไรขึ้นถ้าสไตล์การเขียนของฉันดีขึ้นในวันหนึ่ง!
ในความเป็นจริงแอปพลิเคชันไม่ยากมาก มันให้การตรวจสอบอินเตอร์เฟส API ที่สอดคล้องกัน วิธีการใช้งานและเปลี่ยนแอปพลิเคชันโครงการจริงยังคงต้องเขียนด้วยตัวเอง กุญแจสำคัญคือการปรับปรุงระดับ JS ของเรา ท้ายที่สุดมีเว็บแอปพลิเคชันที่ซับซ้อนมากขึ้น! ฉันหวังว่านักเรียนที่ชอบส่วนหน้าสามารถให้กำลังใจซึ่งกันและกันบนถนนสู่ JS