VueJS - निर्देश

VueJS के लिए निर्देश एक निश्चित तरीके से काम करने के लिए निर्देश हैं। हम पहले से ही v- if, v-show, v-else, v-for, v-bind, v-model, v-on, आदि जैसे निर्देश देख चुके हैं।

इस अध्याय में, हम कस्टम निर्देशों पर एक नज़र डालेंगे। हम घटकों के लिए हमने जैसा किया वैसा ही वैश्विक निर्देश बनाएंगे।

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

Vue.directive('nameofthedirective', {
   bind(e1, binding, vnode) {
   }
})

हमें Vue.directive का उपयोग करके एक निर्देश बनाने की आवश्यकता है। यह निर्देश का नाम लेता है जैसा कि ऊपर दिखाया गया है। आइए निर्देशों के काम के विवरण को दिखाने के लिए एक उदाहरण पर विचार करें।

उदाहरण

<html>
   <head>
      <title>VueJs Instance</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <div id = "databinding">
         <div v-changestyle>VueJS Directive</div>
      </div>
      <script type = "text/javascript">
         Vue.directive("changestyle",{
            bind(e1,binding, vnode) {
               console.log(e1);
               e1.style.color = "red";
               e1.style.fontSize = "30px";
            }
         });
         var vm = new Vue({
            el: '#databinding',
            data: {
            },
            methods : {
            },
         });
      </script>
   </body>
</html>

इस उदाहरण में, हमने एक कस्टम निर्देशन बनाया है changestyle जैसा कि निम्नलिखित कोड कोड में दिखाया गया है।

Vue.directive("changestyle",{
   bind(e1,binding, vnode) {
      console.log(e1);
      e1.style.color = "red";
      e1.style.fontSize = "30px";
   }
});

हम निम्नलिखित चानस्टाइल को एक डिव को सौंप रहे हैं।

<div v-changestyle>VueJS Directive</div>

अगर हम ब्राउज़र में देखते हैं, तो यह VueJs डायरेक्टिव को लाल रंग में प्रदर्शित करेगा और फोंटसाइज़ को 30px तक बढ़ाया जाएगा।

उत्पादन

हमने बाइंड पद्धति का उपयोग किया है, जो निर्देशन का एक हिस्सा है। इसमें तीन तर्क दिए गए हैंe1, वह तत्व जिसके लिए कस्टम निर्देश को लागू करने की आवश्यकता है। बाइंडिंग कस्टम निर्देश के लिए दिए गए तर्कों की तरह है, जैसे v-chanestyle = "{color: 'green'}", जहां बाइंडिंग तर्क में हरे रंग को पढ़ा जाएगा और vnode तत्व है, अर्थात नोडनैम।

अगले उदाहरण में, हमने सभी तर्कों को और इसके शो को सांत्वना दी है कि उनमें से प्रत्येक क्या विवरण देता है।

निम्नलिखित एक उदाहरण है, जो कस्टम निर्देश के लिए दिए गए मान के साथ है।

<html>
   <head>
      <title>VueJs Instance</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <div id = "databinding">
         <div v-changestyle = "{color:'green'}">VueJS Directive</div>
      </div>
      <script type = "text/javascript">
         Vue.directive("changestyle",{
            bind(e1,binding, vnode) {
               console.log(e1);
               console.log(binding.value.color);
               console.log(vnode);
               e1.style.color=binding.value.color;
               e1.style.fontSize = "30px";
            }
         });
         var vm = new Vue({
            el: '#databinding',
            data: {
            },
            methods : {
            },
         });
      </script>
   </body>
</html>

उत्पादन

पाठ का रंग बदलकर हरा कर दिया गया है। कोड के निम्नलिखित टुकड़े का उपयोग करके मूल्य पारित किया जाता है।

<div v-changestyle = "{color:'green'}">VueJS Directive</div>
And it is accessed using the following piece of code.
Vue.directive("changestyle",{
   bind(e1,binding, vnode) {
      console.log(e1);
      console.log(binding.value.color);
      console.log(vnode);
      e1.style.color=binding.value.color;
      e1.style.fontSize = "30px";
   }
});

फिल्टर

VueJS उन फ़िल्टर का समर्थन करता है जो पाठ स्वरूपण में मदद करते हैं। इसका उपयोग v-bind और interpolations ({{}}) के साथ किया जाता है। हमें फ़िल्टर के लिए जावास्क्रिप्ट अभिव्यक्ति के अंत में एक पाइप प्रतीक की आवश्यकता है।

उदाहरण

<html>
   <head>
      <title>VueJs Instance</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <div id = "databinding">
         <input  v-model = "name" placeholder = "Enter Name" /><br/>
         <span style = "font-size:25px;"><b>Letter count is : {{name | countletters}}</b></span>
      </div>
      <script type = "text/javascript">
         var vm = new Vue({
            el: '#databinding',
            data: {
               name : ""
            },
            filters : {
               countletters : function(value) {
                  return value.length;
               }
            }
         });
      </script>
   </body>
</html>

उपरोक्त उदाहरण में, हमने एक साधारण फ़िल्टर काउंटलेट बनाया है। काउंटलेटर्स टेक्स्टबॉक्स में दर्ज वर्णों की संख्या को फ़िल्टर करता है। फ़िल्टर का उपयोग करने के लिए, हमें फ़िल्टर संपत्ति का उपयोग करने और उपयोग किए जाने वाले फ़िल्टर को परिभाषित करने की आवश्यकता है, निम्नलिखित कोड के द्वारा।

filters : {
   countletters : function(value) {
      return value.length;
   }
}

हम विधि को परिभाषित कर रहे हैं countletters और दर्ज की गई लंबाई की वापसी।

प्रदर्शन में फ़िल्टर का उपयोग करने के लिए, हमने पाइप ऑपरेटर और फ़िल्टर के नाम का उपयोग किया है, अर्थात countletters

<span style = "font-size:25px;"><b>Letter count is : {{name | countletters}}</b></span>

ब्राउज़र में निम्न प्रदर्शन है।

हम निम्नलिखित कोड के कोड का उपयोग करके फ़िल्टर को भी तर्क दे सकते हैं।

<span style = "font-size:25px;"><b>Letter count is : {{name | countletters('a1', 'a2')}}</b></span>

अब countletters तीन पारम होंगे, अर्थात message, a1, and a2

हम कोड के निम्नलिखित टुकड़े का उपयोग करके प्रक्षेप को कई फिल्टर पास कर सकते हैं।

<span style = "font-size:25px;"><b>Letter count is : {{name | countlettersA, countlettersB}}</b></span>

फ़िल्टर संपत्ति में countlettersA तथा countlettersB दो तरीके होंगे और countlettersA करने के लिए विवरण पारित करेंगे countlettersB