คำสั่ง
แม้ว่าดูเหมือนว่าถึงแม้ว่ามันจะคล้ายกับคำจำกัดความในเชิงมุม แต่คำสั่งก็คือการขยายฟังก์ชั่น DOM แต่คำสั่งของ Vue นั้นอ่อนแอกว่ามาก เนื่องจากองค์ประกอบ Vue มีการดำเนินการใน DOM จริง ๆ แล้วเวลาส่วนใหญ่เมื่อเราเขียนองค์ประกอบทั่วไปจึงเป็นองค์ประกอบมากกว่าคำสั่งและในเชิงมุมเราจึงเขียนองค์ประกอบทั่วไปมันมักจะเป็นคำสั่ง
ดังนั้นฉันจึงบอกว่าคำสั่งของ Vue นั้นอ่อนแอกว่า Angular มากหรืออาจกล่าวได้ว่าบริสุทธิ์กว่ามาก เป็นการขยายฟังก์ชั่น DOM ไม่ใช่เพื่อห่อหุ้มตรรกะที่เกี่ยวข้องกับ DOM หากคุณสนใจคุณสามารถเข้าใจได้โดยการเปรียบเทียบห้องสมุด UI สองแห่งนี้:
• vux https://github.com/airyland/vux
• bootstrap เชิงมุม https://github.com/angular-ui/bootstrap
จากการเปรียบเทียบเราจะพบว่าใน VUE เราจะห่อหุ้มองค์ประกอบทั่วไป (อันที่จริงไม่ว่าจะเป็นทั่วไปหรือไม่) เป็นองค์ประกอบ แต่ในเชิงมุมมันเป็นคำสั่งเพราะคอนโทรลเลอร์ใน Angular สามารถสร้างขอบเขต $ เท่านั้น มันสามารถคิดได้ง่ายๆใน Vue Directive = Directive Angular + Controller ดังที่ได้กล่าวไว้ก่อนหน้านี้การออกแบบของ Vue จำนวนมากคล้ายกับ Angular2 คำสั่งใน Vue สามารถเทียบเท่ากับคำสั่งใน Angular2 แต่อย่าสับสนกับคำสั่งใน Angular
เพื่อหลีกเลี่ยงการทำให้เข้าใจผิดคำสั่งเชิงมุมจะไม่ถูกเปรียบเทียบในภายหลัง
วงจรชีวิต
วงจรชีวิตแบ่งออกเป็นสามขั้นตอน:
•ผูกทริกเกอร์เมื่อผูกกับองค์ประกอบ DOM เป็นครั้งแรก
•การอัปเดตการผูกจะถูกทริกเกอร์ทันทีหลังจากเสร็จสิ้นและจะถูกเรียกใช้เมื่อใดก็ตามที่พารามิเตอร์ได้รับการปรับปรุงในอนาคต
•ปลดทริกเกอร์เมื่อไม่ได้ผูกมัดและองค์ประกอบ DOM จะถูกปลดออก
API นั้นกระชับมาก - -
ในหมู่พวกเขาการอัปเดตเป็นสิ่งที่สำคัญที่สุดคือเมื่อ Directive ได้รับการอัปเดตค่ารหัสที่เกี่ยวข้องจะถูกดำเนินการ พารามิเตอร์ที่ได้รับจากฟังก์ชั่นการอัปเดตคือค่าที่ส่งโดยผู้ใช้ผ่าน ATTR
ลองใช้คำสั่งง่ายๆด้านล่างซึ่งใช้เพื่อตรวจสอบการป้อนข้อมูลเนื้อหาโดยรายการสิ่งที่ต้องทำ (การตรวจสอบแบบฟอร์ม) โครงสร้างพื้นฐานของคำสั่งมีดังนี้:
vue.directive ("minlength", {bind: function () {}, update: function (value) {}, unbind: function () {}});จากนั้นเราจำเป็นต้องทำการตรวจสอบเมื่อผู้ใช้ป้อนข้อมูล ที่นี่เราใช้การตรวจสอบความยาว minlength อย่างง่ายรหัสมีดังนี้:
vue.directive ("minlength", {bind: function () {var self = this; var el = this.el; el.addeventListener ("keydown", ฟังก์ชั่น (e) {ถ้า (e.keycode === 13) {ถ้า (el.value.length <self.minlength) El.ParentNode.querySelection ("ปุ่ม, [type = 'subment']"); -ตรรกะพื้นฐานผูกเหตุการณ์ในระหว่างขั้นตอนการผูกและจากนั้นทำการตัดสินตามค่า minlength ที่ส่งผ่านในระหว่างการอัปเดต
ในปัจจุบันคำสั่งควรจะบรรลุฟังก์ชั่นที่คล้ายกันและแน่นอนว่ายังมีรายละเอียดการใช้งานอีกมากมายดังนั้นฉันจะไม่เข้าไปดูรายละเอียด คำสั่งไม่ใช่ส่วนสำคัญใน Vue คนมักจะเขียนองค์ประกอบเมื่อเขียนโค้ด
ตัวกรองและผสมดูค่อนข้างง่ายข้ามไป
ข้างต้นเป็นเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการเรียนรู้ของทุกคนและฉันหวังว่าทุกคนจะสนับสนุน wulin.com มากขึ้น