Vue.js
कस्टम निर्देश

वाक्य - विन्यास

• Vue.directive(id, definition);
• Vue.directive(id, update); //when you need only the update function.

पैरामीटर

मूल बातें

कोर में भेजे गए निर्देशों के डिफ़ॉल्ट सेट के अलावा, Vue.js आपको कस्टम निर्देशों को पंजीकृत करने की अनुमति भी देता है। कस्टम निर्देश मनमाने ढंग से DOM व्यवहार में डेटा परिवर्तन की मैपिंग के लिए एक तंत्र प्रदान करते हैं।

आप एक वैश्विक कस्टम निर्देश को Vue.directive(id, definition) विधि के साथ पंजीकृत कर सकते हैं, एक निर्देश आईडी में गुजर सकता है और उसके बाद परिभाषा वस्तु हो सकती है। आप इसे घटक के directives विकल्प में शामिल करके एक स्थानीय कस्टम निर्देश भी पंजीकृत कर सकते हैं।

हुक कार्य

• बाइंड : केवल एक बार बुलाया जाता है, जब निर्देश पहले तत्व से बंधा होता है।
• अद्यतन : शुरुआती मूल्य के साथ bind तुरंत बाद पहली बार कॉल किया जाता है, फिर जब भी बाध्यकारी मूल्य बदल जाता है। नए मान और पिछले मान को तर्क के रूप में प्रदान किया जाता है।
• unbind : केवल एक बार कहा जाता है, जब निर्देश तत्व से अनबाउंड है।

Vue.directive('my-directive', {
     bind: function () {
       // do preparation work
       // e.g. add event listeners or expensive stuff
       // that needs to be run only once
     },
     update: function (newValue, oldValue) {
       // do something based on the updated value
       // this will also be called for the initial value
     },
     unbind: function () {
       // do clean up work
       // e.g. remove event listeners added in bind()
     }    
})

एक बार पंजीकृत होने के बाद, आप इसे Vue.js टेम्प्लेट में इस तरह से उपयोग कर सकते हैं ( v- उपसर्ग जोड़ना याद रखें):

<div v-my-directive="someValue"></div>

जब आपको केवल update फ़ंक्शन की आवश्यकता होती है, तो आप परिभाषा ऑब्जेक्ट के बजाय एकल फ़ंक्शन में पास कर सकते हैं:

Vue.directive('my-directive', function (value) {
  // this function will be used as update()
})

डायरेक्टिव इंस्टेंस गुण

सभी हुक कार्यों वास्तविक निर्देश वस्तु, आप उनके रूप में इन कार्यों के अंदर उपयोग कर सकते हैं जो में कॉपी किया जायेगा this संदर्भ। निर्देश वस्तु कुछ उपयोगी गुणों को उजागर करती है:

• el : तत्व निर्देश के लिए बाध्य है।
• vm : संदर्भ ViewModel जो इस निर्देश का मालिक है।
• अभिव्यक्ति : बंधन और फिल्टर को छोड़कर, बंधन की अभिव्यक्ति।
• arg : तर्क, यदि मौजूद हो।
• नाम : निर्देश का नाम, उपसर्ग के बिना।
• संशोधक : यदि कोई हो, तो संशोधक युक्त वस्तु।
• डिस्क्रिप्टर : एक ऑब्जेक्ट जिसमें संपूर्ण निर्देश का पार्सिंग परिणाम होता है।
• params : परम गुण युक्त वस्तु। नीचे समझाया गया है।

आपको इन सभी गुणों को केवल-पढ़ने के लिए व्यवहार करना चाहिए और उन्हें कभी भी संशोधित नहीं करना चाहिए। आप कस्टम प्रॉपर्टीज़ को डायरेक्टिव ऑब्जेक्ट में भी अटैच कर सकते हैं, लेकिन सावधानीपूर्वक मौजूदा आंतरिक वाले को अधिलेखित न करें।

इन गुणों में से कुछ का उपयोग करते हुए एक कस्टम निर्देश का एक उदाहरण:

एचटीएमएल

<div id="demo" v-demo:hello.a.b="msg"></div>

जावास्क्रिप्ट

Vue.directive('demo', {
  bind: function () {
    console.log('demo bound!')
  },
  update: function (value) {
    this.el.innerHTML =
      'name - '       + this.name + '<br>' +
      'expression - ' + this.expression + '<br>' +
      'argument - '   + this.arg + '<br>' +
      'modifiers - '  + JSON.stringify(this.modifiers) + '<br>' +
      'value - '      + value
  }
})
var demo = new Vue({
  el: '#demo',
  data: {
    msg: 'hello!'
  }
})

परिणाम

name - demo
expression - msg
argument - hello
modifiers - {"b":true,"a":true}
value - hello!

वस्तु शाब्दिक

यदि आपके निर्देश को कई मूल्यों की आवश्यकता है, तो आप जावास्क्रिप्ट ऑब्जेक्ट शाब्दिक में भी पास कर सकते हैं। याद रखें, निर्देश किसी भी मान्य जावास्क्रिप्ट अभिव्यक्ति को ले सकते हैं:

एचटीएमएल

<div v-demo="{ color: 'white', text: 'hello!' }"></div>

जावास्क्रिप्ट

Vue.directive('demo', function (value) {
  console.log(value.color) // "white"
  console.log(value.text) // "hello!"
})

शाब्दिक संशोधक

जब एक निर्देश शाब्दिक संशोधक के साथ प्रयोग किया जाता है, तो इसका गुण मान एक सादे स्ट्रिंग के रूप में व्याख्या किया जाएगा और सीधे update विधि में पारित किया जाएगा। update विधि को भी केवल एक बार कहा जाएगा, क्योंकि एक सादे स्ट्रिंग प्रतिक्रियाशील नहीं हो सकता है।

एचटीएमएल

<div v-demo.literal="foo bar baz">

जावास्क्रिप्ट

Vue.directive('demo', function (value) {
  console.log(value) // "foo bar baz"
})