ฐาน
นอกเหนือจากคำสั่งในตัว Vue.js ยังอนุญาตให้ลงทะเบียนคำสั่งที่กำหนดเอง คำสั่งที่กำหนดเองเป็นกลไกในการแมปการเปลี่ยนแปลงข้อมูลในพฤติกรรม DOM
คำสั่งที่กำหนดเองทั่วโลกสามารถลงทะเบียนได้โดยใช้วิธี Vue.directive (ID, คำจำกัดความ) ซึ่งได้รับ ID คำสั่งพารามิเตอร์สองรายการและวัตถุนิยาม นอกจากนี้คุณยังสามารถลงทะเบียนคำสั่งที่กำหนดเองในท้องถิ่นโดยใช้ตัวเลือกคำสั่งของส่วนประกอบ
ฟังก์ชันเบ็ด
การกำหนดวัตถุสามารถให้ฟังก์ชั่นตะขอหลายฟังก์ชั่น (ตัวเลือกทั้งหมด):
•ผูก: เรียกเพียงครั้งเดียวและเรียกว่าเมื่อคำสั่งถูกผูกไว้กับองค์ประกอบเป็นครั้งแรก
•อัปเดต: การโทรครั้งแรกจะถูกเรียกทันทีหลังจากผูกกับค่าเริ่มต้นเป็นพารามิเตอร์และจากนั้นเมื่อใดก็ตามที่ค่าที่มีการเปลี่ยนแปลงพารามิเตอร์จะเป็นค่าใหม่และค่าเก่า
• Unbind: เรียกเพียงครั้งเดียวเมื่อคำสั่งไม่ได้อยู่ในองค์ประกอบ
ตัวอย่าง
vue.directive ('my-directive', {bind: function () {// การเตรียมงาน // ตัวอย่างเช่นการเพิ่มตัวจัดการเหตุการณ์หรืองานที่ต้องใช้เวลาสูงซึ่งต้องเรียกใช้เพียงครั้งเดียว}, อัปเดต: ฟังก์ชั่น (newvalue, oldValue) {// การทำงาน ลบฟังเหตุการณ์ที่เพิ่มโดย bind ()}})หลังจากลงทะเบียนแล้วคุณสามารถใช้มันได้ในเทมเพลต vue.js (อย่าลืมเพิ่มคำนำหน้า v-):
<div v-my-directive = "somevalue"> </div>
เมื่อต้องการฟังก์ชั่นการอัปเดตเท่านั้นคุณสามารถส่งผ่านฟังก์ชั่นแทนวัตถุนิยาม:
vue.directive ('my-directive', ฟังก์ชั่น (ค่า) {// ฟังก์ชั่นนี้ใช้เป็น update ()})คุณสมบัติอินสแตนซ์คำสั่ง
ฟังก์ชั่นฮุกทั้งหมดจะถูกคัดลอกไปยังวัตถุคำสั่งจริงและสิ่งนี้อยู่ภายในจุดตะขอไปยังวัตถุคำสั่งนี้ วัตถุนี้เปิดเผยคุณสมบัติที่มีประโยชน์บางอย่าง:
• EL: องค์ประกอบที่ผูกพันกับคำสั่ง
• VM: บริบท ViewModel ที่เป็นเจ้าของคำสั่ง
•การแสดงออก: การแสดงออกของคำสั่งยกเว้นพารามิเตอร์และตัวกรอง
• ARG: พารามิเตอร์ของคำสั่ง
•ชื่อ: ชื่อของคำสั่งโดยไม่มีคำนำหน้า
•ตัวดัดแปลง: วัตถุที่มีตัวดัดแปลงสำหรับคำสั่ง
• descriptor: วัตถุที่มีผลการแยกวิเคราะห์ของคำสั่ง
คุณควรปฏิบัติต่อคุณสมบัติเหล่านี้เป็นแบบอ่านอย่างเดียวและไม่แก้ไข นอกจากนี้คุณยังสามารถเพิ่มคุณสมบัติที่กำหนดเองให้กับวัตถุ Directive แต่ระวังอย่าเขียนทับคุณสมบัติภายในที่มีอยู่
ตัวอย่าง:
<div id = "demo" v-demo: hello.ab = "msg"> </div>
vue.directive ('demo', {bind: function () {console.log ('Demo Bound!')}, อัปเดต: ฟังก์ชั่น (ค่า) {this.el.innerhtml = 'ชื่อ -' + this.name + '<br>' + ' json.stringify (this.modifiers) + '<br>' + 'value -' + value}}) var demo = new vue ({el: '#demo', ข้อมูล: {msg: 'สวัสดี!'}})วัตถุ
หากคำสั่งต้องใช้หลายค่าคุณสามารถส่งผ่านตัวอักษร JavaScript โปรดจำไว้ว่าคำสั่งสามารถใช้นิพจน์ JavaScript ตามกฎหมาย:
<div v-demo = "{color: 'White', ข้อความ: 'Hello!' } "> </div>
vue.directive ('demo', ฟังก์ชั่น (ค่า) {console.log (value.color) // "White" console.log (value.text) // "Hello!"})ตัวดัดแปลงตัวอักษร
เมื่อคำสั่งใช้ตัวดัดแปลงตัวอักษรค่าของมันจะถูกประมวลผลเป็นสตริงปกติและส่งผ่านไปยังวิธีการอัปเดต วิธีการอัปเดตจะถูกเรียกเพียงครั้งเดียวเนื่องจากสตริงปกติไม่สามารถตอบสนองต่อการเปลี่ยนแปลงข้อมูล
<div v-demo.literal = "foo bar baz">
vue.directive ('demo', ฟังก์ชั่น (ค่า) {console.log (value) // "foo bar baz"})คำสั่งองค์ประกอบ
บางครั้งเราต้องการใช้คำสั่งในรูปแบบขององค์ประกอบที่กำหนดเองไม่ใช่ในรูปแบบของคุณสมบัติ สิ่งนี้คล้ายกับคำสั่ง "E" ของ Angular มาก คำแนะนำองค์ประกอบสามารถถือได้ว่าเป็นองค์ประกอบที่มีน้ำหนักเบา คุณสามารถลงทะเบียนคำสั่งองค์ประกอบที่กำหนดเองได้ดังต่อไปนี้:
vue.elementDirective ('my-directive', {// api bind: function () {// การดำเนินการ this.el ... }})อย่าเขียนแบบนี้:
<div v-my-directive> </div>
เขียนด้วยวิธีนี้:
<my-directive> </my-directive>
คำสั่งองค์ประกอบไม่สามารถยอมรับพารามิเตอร์หรือนิพจน์ได้ แต่สามารถอ่านลักษณะขององค์ประกอบเพื่อกำหนดพฤติกรรมของมัน
ซึ่งแตกต่างจากคำแนะนำทั่วไปคำแนะนำองค์ประกอบถือเป็นที่สิ้นสุดซึ่งหมายความว่าเมื่อ Vue พบคำสั่งองค์ประกอบมันจะข้ามองค์ประกอบและองค์ประกอบลูกของมัน - มีเพียงคำสั่งองค์ประกอบเท่านั้นที่สามารถทำงานกับองค์ประกอบและองค์ประกอบลูกได้
ตัวเลือกขั้นสูง
พารามิเตอร์
คำสั่งที่กำหนดเองสามารถรับอาร์เรย์พารามิเตอร์ระบุรายการคุณสมบัติและคอมไพเลอร์ Vue จะแยกคุณสมบัติเหล่านี้ขององค์ประกอบที่ถูกผูกไว้โดยอัตโนมัติ ตัวอย่างเช่น:
<div v-example a = "hi"> </div>
vue.directive ('ตัวอย่าง', {params: ['a'], bind: function () {console.log (this.params.a) // -> "hi"}})API นี้ยังรองรับคุณสมบัติแบบไดนามิก this.params [คีย์] จะได้รับการอัปเดตโดยอัตโนมัติ นอกจากนี้ยังสามารถระบุการโทรกลับเพื่อโทรเมื่อค่าเปลี่ยน:
<div v-example v-bind: a = "somevalue"> </div>
vue.directive ('ตัวอย่าง', {params: ['a'], paramwatchers: {a: function (val, oldval) {console.log ('A change!')}}})คล้ายกับอุปกรณ์ประกอบฉากชื่อของพารามิเตอร์ Directive ใช้สไตล์ Camelcase ใน JavaScript และสไตล์เคบับเคสนั้นสอดคล้องกับ HTML ตัวอย่างเช่นสมมติว่ามีพารามิเตอร์ `disable-effect` ในเทมเพลตให้เข้าถึงใน JavaScript ด้วย` disableffect '
ลึก
หากมีการใช้คำสั่งแบบกำหนดเองบนวัตถุและการอัปเดตจะถูกเรียกใช้เมื่อคุณสมบัติภายในของการเปลี่ยนแปลงวัตถุให้ระบุลึก: จริงในวัตถุคำนิยาม Directive
<div v-my-directive = "obj"> </div>
vue.directive ('my-directive', {deep: true, update: function (obj) {// เรียกว่าเมื่อคุณสมบัติซ้อนของ `obj` Change}})วันที่สอง
หากคำสั่งต้องการเขียนข้อมูลกลับไปยังอินสแตนซ์ VUE ให้ระบุ Twoway: จริงในวัตถุคำจำกัดความคำสั่ง ตัวเลือกนี้อนุญาตให้ใช้งานนี้ (ค่า) ในคำสั่ง:
vue.directive ('ตัวอย่าง', {twoway: true, bind: function () {this.handler = function () {// เขียนข้อมูลกลับไปที่ vm // ถ้าคำสั่งผูก v-example = "abc" เช่นนี้ // this.handler)}, unbind: function () {this.el.el.removeeVentListener ('อินพุต', this.handler)}})ยอมรับสถานะ
การผ่านการยอมรับ: จริงอนุญาตให้คำสั่งที่กำหนดเองยอมรับคำสั่งแบบอินไลน์เช่น V-ON:
<div v-my-directive = "A ++"> </div>
vue.directive ('my-directive', {AcceptStatement: จริง, อัปเดต: ฟังก์ชั่น (fn) {// ค่าขาเข้าเป็นฟังก์ชัน // คำสั่ง "A ++" จะถูกคำนวณภายในขอบเขตของอินสแตนซ์ของการเป็นเจ้าของเมื่อเรียกว่า}}))ใช้อย่างชาญฉลาดเพราะโดยปกติคุณต้องการหลีกเลี่ยงผลข้างเคียงในเทมเพลตของคุณ
เทอร์มินัล
1.0.19+
VUE รวบรวมโมดูลโดยการสำรวจต้นไม้ DOM ซ้ำ แต่เมื่อมันพบคำสั่งเทอร์มินัลมันจะหยุดการสำรวจองค์ประกอบลูกหลานขององค์ประกอบนี้ คำสั่งนี้จะเข้ามามีส่วนร่วมในการรวบรวมองค์ประกอบนี้และลูกหลาน V-IF และ V-FOR เป็นคำสั่งเทอร์มินัล
การเขียนคำสั่งเทอร์มินัลแบบกำหนดเองเป็นหัวข้อระดับสูงและต้องการความเข้าใจที่ดีขึ้นเกี่ยวกับกระบวนการรวบรวมของ Vue แต่นี่ไม่ได้หมายความว่าเป็นไปไม่ได้ที่จะเขียนคำสั่งเทอร์มินัลแบบกำหนดเอง ใช้เทอร์มินัล: จริงเพื่อระบุคำสั่งเทอร์มินัลที่กำหนดเองและอาจต้องใช้ vue.fragmentFactory เพื่อรวบรวมบางส่วน นี่คือคำสั่งเทอร์มินัลแบบกำหนดเองที่รวบรวมเทมเพลตเนื้อหาและฉีดผลลัพธ์ลงในสถานที่อื่นในหน้า:
var fragmentFactory = vue.fragmentFactoryVar ลบ = vue.util.removevar createAnchor = vue.util.createAnchorVue.directive ('inject', {terminal: true, bind: function () {var container = document.getElementByidid ลบ (this.el) var Factory = ใหม่ FragmentFactory (this.vm, this.el) this.frag = factory.create (this._host, this._scope, this._frag) this.frag.before (this.anchor)}, unbind: function () {this.frag.Remove ()<div id = "modal"> </div> ... <div v-inject: modal> <h1> ส่วนหัว </h1> <p> body </p> <p> footer </p> </div>
หากคุณต้องการเขียนคำสั่งเทอร์มินัลที่กำหนดเองขอแนะนำให้คุณอ่านรหัสแหล่งที่มาของคำสั่งเทอร์มินัลในตัวเช่น V-IF และ V-FOR เพื่อให้เข้าใจกลไกภายในของ Vue ได้ดีขึ้น
ลำดับความสำคัญ
คุณสามารถกำหนดลำดับความสำคัญให้กับคำสั่ง หากไม่ได้ระบุค่าเริ่มต้นสำหรับคำสั่งปกติคือ 1,000 และค่าเริ่มต้นสำหรับคำสั่งเทอร์มินัลคือ 2000 คำสั่งที่มีลำดับความสำคัญสูงกว่าในองค์ประกอบเดียวกันจะถูกประมวลผลเร็วกว่าคำสั่งอื่น ๆ คำสั่งที่มีลำดับความสำคัญเดียวกันจะถูกประมวลผลตามลำดับที่ปรากฏในรายการคุณสมบัติองค์ประกอบ แต่ไม่สามารถรับประกันได้ว่าคำสั่งนี้สอดคล้องกันในเบราว์เซอร์ที่แตกต่างกัน
ลำดับความสำคัญของคำสั่งในตัวสามารถดูได้ใน API นอกจากนี้คำแนะนำการควบคุมกระบวนการ V-IF และ V-FOR มีลำดับความสำคัญสูงสุดในระหว่างกระบวนการรวบรวม
ข้างต้นเป็นเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการเรียนรู้ของทุกคนและฉันหวังว่าทุกคนจะสนับสนุน wulin.com มากขึ้น