قاعدة
بالإضافة إلى التوجيهات المدمجة ، يسمح Vue.js أيضًا بتسجيل التوجيهات المخصصة. توفر التوجيهات المخصصة آلية لتعيين التغييرات في البيانات في سلوك DOM.
يمكن تسجيل التوجيه المخصص العالمي باستخدام طريقة Vue.Directive (ID ، التعريف) ، والتي تتلقى معرفات تعليمات المعلمة وكائنات التعريف. يمكنك أيضًا تسجيل توجيه مخصص محلي باستخدام خيار توجيهات المكون.
وظيفة الخطاف
يمكن أن يوفر تحديد كائن عدة وظائف خطاف (كل شيء اختياري):
• ربط: يسمى مرة واحدة فقط ، ويتم استدعاؤه عندما تكون التعليمات مرتبطة بالعنصر لأول مرة.
• تحديث: يتم استدعاء المكالمة الأولى مباشرة بعد الربط بالقيمة الأولية كمعلمة ، ثم كلما تغيرت القيمة المرتبطة ، تكون المعلمات هي القيمة الجديدة والقيمة القديمة.
• Undind: تسمى مرة واحدة فقط ، عندما تكون التعليمات غير مرتبطة من العنصر.
مثال
vue.directive ('my-directive' ، {bind: function () {// preparation work // على سبيل المثال ، إضافة معالج أحداث أو مهمة مستهلكة عالية لا تحتاج إلا إلى تشغيل مرة واحدة} ، تحديث: الوظيفة (newvalue ، oldvalue) {// العمل عند تحديث القيمة // حذف مستمع الحدث الذي تمت إضافته بواسطة BIND ()}})بعد التسجيل ، يمكنك استخدامه مثل هذا في قالب Vue.js (تذكر إضافة البادئة V-):
<div v-my-directive = "somevalue"> </viv>
عند الحاجة إلى وظيفة التحديث فقط ، يمكنك تمرير وظيفة بدلاً من كائن التعريف:
vue.directive ('my-directive' ، function (value) {// يتم استخدام هذه الوظيفة كتحديث ()})خصائص مثيل التوجيه
سيتم نسخ جميع وظائف الخطاف في كائن التوجيه الفعلي ، وهذا داخل الخطاف يشير إلى هذا الكائن التوجيهي. هذا الكائن يكشف بعض الخصائص المفيدة:
• EL: العنصر المرتبط بالتوجيه.
• VM: Context ViewModel الذي يمتلك التعليمات.
• التعبير: التعبير عن التوجيه ، باستثناء المعلمات والمرشحات.
• Arg: معلمات التوجيه.
• الاسم: اسم التوجيه ، دون بادئة.
• المعدلات: كائن يحتوي على المعدلات للتوجيهات.
• واصف: كائن يحتوي على نتائج تحليل التوجيه.
يجب عليك التعامل مع هذه الخصائص على أنها قراءة فقط ولا تعدلها. يمكنك أيضًا إضافة خصائص مخصصة إلى كائن التوجيه ، ولكن احرص على عدم الكتابة فوق الخصائص الداخلية الموجودة.
مثال:
<div id = "demo" v-demo: hello.ab = "msg"> </viv>
vue.directive ('demo' ، {bind: function () {console.log ('demo bound!')} ، update: function (value) {this.el.innerhtml = 'name - json.stringify (this.modifiers) + '<br>' + 'value -' + value}}) var demo = new vue ({el: '#demo' ، data: {msg: 'hello!'}})كائن حرفي
إذا كان التوجيه يتطلب قيمًا متعددة ، فيمكنك المرور في كائن JavaScript الحرفي. تذكر أنه يمكن للتوجيهات استخدام أي تعبير قانوني JavaScript:
<div v-demo = "{color: 'White' ، text: 'hello!' } "> </div>
vue.directive ('Demo' ، function (value) {console.log (value.color) // "white" console.log (value.text) // "hello!"})المعدل الحرفي
عندما يستخدم التوجيه المعدل الحرفي ، ستتم معالجة قيمته كسلسلة عادية وتم نقلها إلى طريقة التحديث. سيتم استدعاء طريقة التحديث مرة واحدة فقط ، لأن السلسلة العادية لا يمكنها الاستجابة لتغييرات البيانات.
<div v-demo.literal = "Foo Bar Baz">
vue.directive ('Demo' ، function (value) {console.log (value) // "Foo Bar Baz"})توجيه عنصري
في بعض الأحيان نريد استخدام التوجيهات في شكل عناصر مخصصة ، وليس في شكل ميزات. هذا يشبه إلى حد كبير توجيه Angular "E". يمكن اعتبار تعليمات العناصر مكونًا خفيف الوزن. يمكنك تسجيل توجيه عنصر مخصص مثل ما يلي:
Vue.ElementDirective ('my-directive' ، {// api bind: function () {// st on this.el ...}})لا تكتب مثل هذا:
<div v-my-directive> </viv>
اكتب بهذه الطريقة:
<my-directive> </sirective>
لا يمكن أن تقبل تعليمات العناصر المعلمات أو التعبيرات ، ولكن يمكنها قراءة خصائص عنصر ما لتحديد سلوكه.
على عكس التعليمات العادية ، تكون تعليمات العناصر نهائية ، مما يعني أنه بمجرد مواجهة تعليمات العناصر ، فإنها ستتخطى العنصر وعناصره الفرعية - فقط تعليمات العنصر نفسها يمكن أن تعمل على العنصر وعناصره الفرعية.
خيارات متقدمة
params
يمكن أن تتلقى التوجيهات المخصصة مجموعة Params ، وتحديد قائمة بالميزات ، وسيقوم برنامج التحويل البرمجي VUE تلقائيًا باستخراج ميزات العناصر المرتبطة. على سبيل المثال:
<div v-example a = "hi"> </viv>
vue.directive ('example' ، {params: ['a'] ، bind: function () {console.log (this.params.a) // -> "hi"}})API هذا يدعم أيضًا الخصائص الديناميكية. سيتم تحديث This.Params [المفتاح] تلقائيًا. بالإضافة إلى ذلك ، يمكن تحديد رد الاتصال للاتصال عندما تتغير القيمة:
<div v-example v-bind: a = "somevalue"> </viv>
vue.directive ('example' ، {params: ['a'] ، paramwatchers: {a: function (val ، oldval) {console.log ('a change!')}}})على غرار الدعائم ، يستخدم اسم المعلمة التوجيهية نمط Camelcase في JavaScript ، ونمط Kebab-Case يتوافق مع HTML. على سبيل المثال ، لنفترض أن هناك معلمة "تعطيل التأثير" في القالب ، يمكنك الوصول إليها في JavaScript مع "DisableFect".
عميق
إذا تم استخدام توجيه مخصص على كائن ما وتم تحديثه عند تغيير الخصائص الداخلية لتغيير الكائن ، حدد عميقًا: صحيح في كائن تعريف التوجيه.
<div v-my-directive = "obj"> </viv>
vue.directive ('my-directive' ، {deep: true ، update: function (obj) {// inting in in in en obj`}})Twoway
إذا أراد التوجيه كتابة البيانات مرة أخرى إلى مثيل VUE ، فحدد twoway: صحيح في كائن تعريف التوجيه. يسمح هذا الخيار باستخدام (القيمة) في التوجيهات:
vue.directive ('example' ، {twoWay: true ، bind: function () {this.handler = function () {// اكتب البيانات مرة أخرى إلى vm // إذا كان التوجيه يربط v-example = "abc" مثل هذا // هذا سيعين `vm.abc` مع القيمة المعطاة this.els (this.el.value)}. this.handler)} ، undind: function () {this.el.RemoveEventListener ('input' ، this.handler)}})قبول
تمرير القبول: يسمح TRUE بتوجيهات مخصصة بقبول البيانات المضمنة ، تمامًا مثل V-ON:
<div v-my-directive = "a ++"> </viv>
vue.directive ('my-directive' ، {قبول: صواب ، تحديث: الدالة (fn) {// القيمة الواردة هي دالة // سيتم حساب عبارة "A ++" في نطاق مثيل الانتماء عندما يسمى}})استخدم بحكمة لأنك عادة ما تريد تجنب الآثار الجانبية في القالب الخاص بك.
صالة
1.0.19+
يجمع VUE الوحدات النمطية عن طريق اجتياز شجرة DOM بشكل متكرر. ولكن عندما يواجه توجيهًا نهائيًا ، فإنه يتوقف عن عبور عناصر سليل هذا العنصر. سيتولى هذا التوجيه مهمة تجميع هذا العنصر وأحفاده. V-If و V-for هي التوجيهات الطرفية.
تعد كتابة التوجيهات الطرفية المخصصة موضوعًا رفيع المستوى ويتطلب فهمًا أفضل لعملية تجميع Vue ، لكن هذا لا يعني أنه من المستحيل كتابة توجيهات طرفية مخصصة. استخدم Terminal: صحيح لتحديد توجيه طرفي مخصص ، وقد يحتاج أيضًا إلى استخدام vue.fragmentFactory لتجميع جزئي. فيما يلي توجيه طرفي مخصص يجمع قالب المحتوى الخاص به ويحقق النتائج في مكان آخر على الصفحة:
var fragmentfactory = vue.fragmentfactoryvar remove = vue.util.removevar createAnchor = vue.util.createanchorvue.directive ('enject' ، {terminal: true ، bind: function () {var container. container.appendchild (this.anchor) إزالة (this.el) var factory = new fragmentFactory (this.vm ، this.el) this.frag = factory.create (this._host ، this._scope ، this._frag) this.frag.before (this.anchor)} ، inflind:<div id = "modal"> </viv> ... <div v inject: modal> <h1> header </h1> <p> body </p> volute </p> </viv>
إذا كنت ترغب في كتابة توجيهات طرفية مخصصة ، فمن المستحسن أن تقرأ من خلال الكود المصدري للتوجيهات الطرفية المدمجة ، مثل V-IF و V-For ، وذلك لفهم آليات Vue الداخلية بشكل أفضل.
أولوية
يمكنك تعيين أولوية للتعليم. إذا لم يتم تحديده ، فإن الافتراضي للأمر العادي هو 1000 ، وسيتم معالجة الإرشادات الافتراضية للأمر الطرفي 2000. وسيتم معالجة الإرشادات ذات الأولوية الأعلى على نفس العنصر في وقت مبكر عن الإرشادات الأخرى. تتم معالجة التوجيهات ذات نفس الأولوية بالترتيب الذي تظهر به في قائمة خاصية العناصر ، ولكن لا يمكن ضمان أن يكون هذا الطلب متسقًا في متصفحات مختلفة.
يمكن عرض أولوية التوجيهات المدمجة في API. بالإضافة إلى ذلك ، فإن تعليمات التحكم في العملية V-IF و V-For لها دائمًا أولوية أعلى أثناء عملية التجميع.
ما سبق هو كل محتوى هذه المقالة. آمل أن يكون ذلك مفيدًا لتعلم الجميع وآمل أن يدعم الجميع wulin.com أكثر.