VueJS - बंधन

इस अध्याय में सीखेंगे कि HTML विशेषताओं में मानों को कैसे हेर-फेर या असाइन किया जाए, स्टाइल को बदला जाए, और कहा जाता है बाध्यकारी बाध्यकारी की मदद से कक्षाएं असाइन करें v-bind VueJS के साथ उपलब्ध है।

आइए एक उदाहरण पर विचार करें कि हमें यह समझने की आवश्यकता है कि डेटा बाइंडिंग के लिए v-bind निर्देश का उपयोग कब और क्यों करना है।

उदाहरण

<html>
   <head>
      <title>VueJs Instance</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <div id = "databinding">
         {{title}}<br/>
         <a href = "hreflink" target = "_blank"> Click Me </a> <br/>
         <a href = "{{hreflink}}" target = "_blank">Click Me </a>  <br/>
         <a v-bind:href = "hreflink" target = "_blank">Click Me </a>   <br/>
      </div>
      <script type = "text/javascript">
         var vm = new Vue({
            el: '#databinding',
            data: {
               title : "DATA BINDING",
               hreflink : "http://www.google.com"
            }
         });
      </script>
   </body>
</html>

उपरोक्त उदाहरण में, हमने एक शीर्षक चर और तीन लंगर लिंक प्रदर्शित किए हैं। हमने डेटा ऑब्जेक्ट से href पर एक मान भी असाइन किया है।

अब, यदि हम ब्राउज़र में आउटपुट की जांच करते हैं और निरीक्षण करते हैं, तो हम देखेंगे कि पहले दो एंकर लिंक में href ठीक से नहीं है जैसा कि निम्नलिखित स्क्रीनशॉट में दिखाया गया है।

पहला क्लिकमे href को hreflink के रूप में दिखाता है, और दूसरा इसे {{hreflink}} में दिखाता है, जबकि अंतिम एक को सही url के रूप में दिखाता है, जैसा कि हमें आवश्यक है।

इसलिए, एचटीएमएल विशेषताओं को मान प्रदान करने के लिए, हमें इसे निम्न रूप से निर्देश वी-बाइंड के साथ बांधने की आवश्यकता है।

<a v-bind:href = "hreflink" target = "_blank">Click Me </a>

VueJS भी v- बाँध के लिए एक आशुलिपि निम्नानुसार प्रदान करता है।

<a :href = "hreflink" target = "_blank">Click Me </a>

यदि हम ब्राउज़र में निरीक्षण तत्व देखते हैं, तो एंकर टैग v-bind विशेषता नहीं दिखाता है, हालाँकि, यह सादे HTML को प्रदर्शित करता है। जब हम DOM में सबसे ऊपर आते हैं तो कोई भी VueJS गुण नहीं देखा जाता है।

HTML क्लासेस बाइंडिंग

HTML वर्ग को बांधने के लिए, हमें उपयोग करने की आवश्यकता है v-bind: class। आइए एक उदाहरण पर विचार करें और इसमें वर्गों को बांधें।

उदाहरण

<html>
   <head>
      <title>VueJs Instance</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <style>
         .active {
            background: red;
         }
      </style>
      <div id = "classbinding">
         <div v-bind:class = "{active:isactive}"><b>{{title}}</b></div>
      </div>
      <script type = "text/javascript">
         var vm = new Vue({
            el: '#classbinding',
            data: {
               title : "CLASS BINDING",
               isactive : true
            }
         });
      </script>
   </body>
</html>

V-bind के साथ बनाया गया एक div है: class = ”{active: isactive}”।

यहाँ, isactiveएक चर है जो सत्य या असत्य पर आधारित है। यह div पर सक्रिय वर्ग को लागू करेगा। डेटा ऑब्जेक्ट में, हमने isactive वैरिएबल को सही के रूप में असाइन किया है। शैली में परिभाषित एक वर्ग है.active लाल रंग की पृष्ठभूमि रंग के साथ।

यदि चर सत्य है, तो रंग लागू किया जाएगा अन्यथा नहीं। निम्नलिखित ब्राउज़र में आउटपुट होगा।

उपरोक्त प्रदर्शन में, हम देख सकते हैं कि पृष्ठभूमि का रंग लाल है। वर्ग = "सक्रिय" div पर लागू होता है।

अब, चर के मान को असत्य में बदल दें और आउटपुट देखें। निम्न कोड में दिखाए अनुसार परिवर्तनशील को असत्य में बदल दिया जाता है।

<html>
   <head>
      <title>VueJs Instance</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <style>
         .active {
            background: red;
         }
      </style>
      <div id = "classbinding">
         <div v-bind:class = "{active:isactive}"><b>{{title}}</b></div>
      </div>
      <script type = "text/javascript">
         var vm = new Vue({
            el: '#classbinding',
            data: {
               title : "CLASS BINDING",
               isactive : false
            }
         });
      </script>
   </body>
</html>

उपरोक्त प्रदर्शन में, हम देख सकते हैं कि सक्रिय वर्ग div पर लागू नहीं है।

हम v-bind विशेषता का उपयोग करके HTML टैग में कई कक्षाएं भी दे सकते हैं।

उदाहरण

<html>
   <head>
      <title>VueJs Instance</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <style>
         .info {
            color: #00529B;
            background-color: #BDE5F8;
         }
         div {
            margin: 10px 0;
            padding: 12px;
         }
         .active {
            color: #4F8A10;
            background-color: #DFF2BF;
         }
         .displayError{
            color: #D8000C;
            background-color: #FFBABA;
         }
      </style>
      <div id = "classbinding">
         <div class = "info"  v-bind:class = "{ active: isActive, 'displayError': hasError }">
            {{title}}
         </div>
      </div>
      <script type = "text/javascript">
         var vm = new Vue({
            el: '#classbinding',
            data: {
               title : "This is class binding example",
               isActive : false,
               hasError : false
            }
         });
      </script>
   </body>
</html>

उपरोक्त कोड में div के लिए, हमने एक सामान्य वर्ग, उदाहरण वर्ग = "जानकारी" लागू किया है। IsActive और hasError चर के आधार पर, अन्य वर्गों को div पर लागू किया जाएगा।

उत्पादन

यह एक सामान्य कक्षा है। दोनों चर अभी झूठे हैं। चलो बनाएंisActive सत्य को चर और आउटपुट देखें।

उपरोक्त प्रदर्शन में, DOM में हम div, info और active दो वर्गों को देख सकते हैं। आइये हैशटैग वैरिएबल को सही बनाते हैं और असत्य को असत्य मानते हैं।

अब, जब हम उपरोक्त प्रदर्शन में देखते हैं, तो div पर जानकारी और डिस्प्लेर वर्ग लागू होता है। इस तरह हम शर्तों के आधार पर कई वर्गों को लागू कर सकते हैं।

हम एक सरणी के रूप में भी कक्षा पास कर सकते हैं। इसे समझने के लिए एक उदाहरण लेते हैं।

उदाहरण

<html>
   <head>
      <title>VueJs Instance</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <style>
         .info {
            color: #00529B;
            background-color: #BDE5F8;
         }
         div {
            margin: 10px 0;
            padding: 12px;
            font-size : 25px;
         }
         .active {
            color: #4F8A10;
            background-color: #DFF2BF;
         }
         .displayError{
            color: #D8000C;
            background-color: #FFBABA;
         }
      </style>
      <div id = "classbinding">
         <div v-bind:class = "[infoclass, errorclass]">{{title}}</div>
      </div>
      <script type = "text/javascript">
         var vm = new Vue({
            el: '#classbinding',
            data: {
               title : "This is class binding example",
               infoclass : 'info',
               errorclass : 'displayError'
            }
         });
      </script>
   </body>
</html>

उत्पादन

जैसा कि हम ऊपर देख सकते हैं, दोनों वर्गों को div पर लागू किया जाता है। चलो एक चर का उपयोग करते हैं और चर के मूल्य के आधार पर, वर्ग असाइन करते हैं।

<html>
   <head>
      <title>VueJs Instance</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <style>
         .info {
            color: #00529B;
            background-color: #BDE5F8;
         }
         div {
            margin: 10px 0;
            padding: 12px;
            font-size : 25px;
         }
         .active {
            color: #4F8A10;
            background-color: #DFF2BF;
         }
         .displayError{
            color: #D8000C;
            background-color: #FFBABA;
         }
      </style>
      <div id = "classbinding">
         <div v-bind:class = "[isActive ? infoclass : '', haserror ? errorclass : '']">{{title}}</div>
      </div>
      <script type = "text/javascript">
         var vm = new Vue({
            el: '#classbinding',
            data: {
               title : "This is class binding example",
               infoclass : 'info',
               errorclass : 'displayError',
               isActive : true,
               haserror : false
            }
         });
      </script>
   </body>
</html>

हमने दो चर का उपयोग किया है isActive तथा haserror और उसी का उपयोग div के लिए किया जाता है जबकि क्लास बाइंडिंग निम्न div टैग में दिखाया गया है।

<div v-bind:class = "[isActive ? infoclass : '', haserror ? errorclass : '']">{{title}}</div>

यदि निष्क्रिय सत्य है, तो infoclass इसे सौंपा जाएगा। वही हैसर के लिए चला जाता है, अगर यह सच है, तो उस पर केवल एररक्लास लागू किया जाएगा।

अब, हम haserror वैरिएबल को सही और isActive वैरिएबल को असत्य बनाते हैं।

अब हम घटकों में कक्षाओं के लिए v-bind जोड़ेंगे। निम्नलिखित उदाहरण में, हमने घटक टेम्पलेट में एक वर्ग जोड़ा है और घटक को भी।

उदाहरण

<html>
   <head>
      <title>VueJs Instance</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <style>
         .info {
            color: #00529B;
            background-color: #BDE5F8;
         }
         div {
            margin: 10px 0;
            padding: 12px;
            font-size : 25px;
         }
         .active {
            color: #4F8A10;
            background-color: #DFF2BF;
         }
         .displayError{
            color: #D8000C;
            background-color: #FFBABA;
         }
      </style>
      <div id = "classbinding">
         <new_component class = "active"></new_component>
      </div>
      <script type = "text/javascript">
         var vm = new Vue({
            el: '#classbinding',
            data: {
               title : "This is class binding example",
               infoclass : 'info',
               errorclass : 'displayError',
               isActive : false,
               haserror : true
            },
            components:{
               'new_component' : {
                  template : '<div class = "info">Class Binding for component</div>'
               }
            }
         });
      </script>
   </body>
</html>

ब्राउज़र में आउटपुट निम्न है। यह दोनों वर्गों को अंतिम div पर लागू करता है।

<div class = ”info active”></div>

सही / गलत के आधार पर प्रदर्शित करने के लिए घटक अनुभाग में एक चर जोड़ें।

<html>
   <head>
      <title>VueJs Instance</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <style>
         .info {
            color: #00529B;
            background-color: #BDE5F8;
         }
         div {
            margin: 10px 0;
            padding: 12px;
            font-size : 25px;
         }
         .active {
            color: #4F8A10;
            background-color: #DFF2BF;
         }
         .displayError{
            color: #D8000C;
            background-color: #FFBABA;
         }
      </style>
      <div id = "classbinding">
         <new_component v-bind:class = "{active:isActive}"></new_component>
      </div>
      <script type = "text/javascript">
         var vm = new Vue({
            el: '#classbinding',
            data: {
               title : "This is class binding example",
               infoclass : 'info',
               errorclass : 'displayError',
               isActive : false,
               haserror : true
            },
            components:{
               'new_component' : {
                  template : '<div class = "info">Class Binding for component</div>'
               }
            }
         });
      </script>
   </body>
</html>

चूंकि चर गलत है, इसलिए सक्रिय वर्ग लागू नहीं किया गया है और जानकारी वर्ग को निम्न स्क्रीनशॉट में दिखाया गया है।

बाइंडिंग इनलाइन शैलियाँ

ऑब्जेक्ट सिंटैक्स

Example

<html>
   <head>
      <title>VueJs Instance</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <div id = "databinding">
         <div v-bind:style = "{ color: activeColor, fontSize: fontSize + 'px' }">{{title}}</div>
      </div>
      <script type = "text/javascript">
         var vm = new Vue({
            el: '#databinding',
            data: {
               title : "Inline style Binding",
               activeColor: 'red',
               fontSize :'30'
            }
         });
      </script>
   </body>
</html>

Output

उपरोक्त उदाहरण में, डिव के लिए, शैली को लागू किया जाता है और डेटा ऑब्जेक्ट से प्राप्त होता है।

<div v-bind:style = "{ color: activeColor, fontSize: fontSize + 'px' }">{{title}}</div>
data: {
   title : "Inline style Binding",
   activeColor: 'red',
   fontSize :'30'
}

हम एक वैरिएबल को सभी मान निर्दिष्ट करके और फिर वैरिएबल को वैरिएबल असाइन करके भी यही काम कर सकते हैं।

Example

<html>
   <head>
      <title>VueJs Instance</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <div id = "databinding">
         <div v-bind:style = "styleobj">{{title}}</div>
      </div>
      <script type = "text/javascript">
         var vm = new Vue({
            el: '#databinding',
            data: {
               title : "Inline style Binding",
               styleobj : {
                  color: 'red',
                  fontSize :'40px'
               }
            }
         });
      </script>
   </body>
</html>

रंग और फॉन्टसाइज़ को स्टाइलोबज नामक ऑब्जेक्ट को सौंपा गया है और उसी को डिव को सौंपा गया है।

<div v-bind:style = "styleobj">{{title}}</div>

Output

फॉर्म इनपुट बाइंडिंग

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

उदाहरण

<html>
   <head>
      <title>VueJs Instance</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <div id = "databinding">
         <h3>TEXTBOX</h3>
         <input  v-model = "name" placeholder = "Enter Name" />
         <h3>Name entered is : {{name}}</h3>
         <hr/>
         <h3>Textarea</h3>
         <textarea v-model = "textmessage" placeholder = "Add Details"></textarea>
         <h1><p>{{textmessage}}</p></h1>
         <hr/>
         <h3>Checkbox</h3>
         <input type = "checkbox" id = "checkbox" v-model = "checked"> {{checked}}
      </div>
      <script type = "text/javascript">
         var vm = new Vue({
            el: '#databinding',
            data: {
               name:'',
               textmessage:'',
               checked : false
            }
         });
      </script>
   </body>
</html>

टेक्सबॉक्स में हम जो भी टाइप करते हैं वह नीचे प्रदर्शित होता है। v- मॉडल को मान नाम दिया गया है और नाम {{name}} में प्रदर्शित किया गया है, जो टेक्स्टबॉक्स में टाइप किए गए सभी को प्रदर्शित करता है।

उत्पादन

आइए कुछ और उदाहरण देखें और इसका उपयोग कैसे करें।

रेडियो और चुनें

Example

<html>
   <head>
      <title>VueJs Instance</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <div id = "databinding">
         <h3>Radio</h3>
         <input type = "radio" id = "black" value = "Black" v-model = "picked">Black
         <input type = "radio" id = "white" value = "White" v-model = "picked">White
         <h3>Radio element clicked : {{picked}} </h3>
         <hr/>
         <h3>Select</h3>
         <select v-model = "languages">
            <option disabled value = "">Please select one</option>
            <option>Java</option>
            <option>Javascript</option>
            <option>Php</option>
            <option>C</option>
            <option>C++</option>
         </select>
         <h3>Languages Selected is : {{ languages }}</h3>
         <hr/>
      </div>
      <script type = "text/javascript">
         var vm = new Vue({
            el: '#databinding',
            data: {
               picked : 'White',
               languages : "Java"
            }
         });
      </script>
   </body>
</html>

Output

संशोधक

हमने उदाहरण में तीन संशोधक का उपयोग किया है - ट्रिम, संख्या और आलसी।

Example

<html>
   <head>
      <title>VueJs Instance</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <div id = "databinding">
         <span style = "font-size:25px;">Enter Age:</span> <input v-model.number = "age" type = "number">
         <br/>
         <span style = "font-size:25px;">Enter Message:</span> <input v-model.lazy = "msg">
         <h3>Display Message : {{msg}}</h3>
         <br/>
         <span style = "font-size:25px;">Enter Message : </span><input v-model.trim = "message">
         <h3>Display Message : {{message}}</h3>
      </div>
      <script type = "text/javascript">
         var vm = new Vue({
            el: '#databinding',
            data: {
               age : 0,
               msg: '',
               message : ''
            }
         });
      </script>
   </body>
</html>

Output

Number modifierकेवल संख्या दर्ज करने की अनुमति देता है। यह संख्याओं के अलावा कोई अन्य इनपुट नहीं लेगा।

<span style = "font-size:25px;">Enter Age:</span> <input v-model.number = "age" type = "number">

Lazy modifier पूरी तरह से दर्ज होने के बाद टेक्स्टबॉक्स में मौजूद सामग्री को प्रदर्शित करेगा और उपयोगकर्ता टेक्स्टबॉक्स को छोड़ देता है।

<span style = "font-size:25px;">Enter Message:</span> <input v-model.lazy = "msg">

Trim modifier शुरू और अंत में दर्ज किए गए किसी भी स्थान को हटा देगा।

<span style = "font-size:25px;">Enter Message : </span><input v-model.trim = "message">
ja/tutorial
es/tutorial
de/tutorial
fr/tutorial
th/tutorial
pt/tutorial
ru/tutorial
vi/tutorial
it/tutorial
ko/tutorial
tr/tutorial
id/tutorial
pl/tutorial
hi/tutorial
japost
espost
depost
frpost
thpost
ptpost
rupost
vipost
itpost
kopost
trpost
idpost
plpost
hipost

© Copyright 2021 - 2024 | All Rights Reserved