VueJS - घटक
Vue Components कस्टम तत्वों को बनाने वाले VueJS की महत्वपूर्ण विशेषताओं में से एक है, जिसे HTML में पुन: उपयोग किया जा सकता है।
आइए एक उदाहरण के साथ काम करते हैं और एक घटक बनाते हैं, जो इस बात की बेहतर समझ देगा कि घटक VueJS के साथ कैसे काम करते हैं।
उदाहरण
<html>
<head>
<title>VueJs Instance</title>
<script type = "text/javascript" src = "js/vue.js"></script>
</head>
<body>
<div id = "component_test">
<testcomponent></testcomponent>
</div>
<div id = "component_test1">
<testcomponent></testcomponent>
</div>
<script type = "text/javascript" src = "js/vue_component.js"></script>
</body>
</html>vue_component.js
Vue.component('testcomponent',{
template : '<div><h1>This is coming from component</h1></div>'
});
var vm = new Vue({
el: '#component_test'
});
var vm1 = new Vue({
el: '#component_test1'
});.Html फ़ाइल में, हमने id के साथ दो div बनाया है component_test तथा component_test1। में.jsऊपर दिखाई गई फाइलें, दो आईडी उदाहरण div आईडी के साथ बनाई गई हैं। हमने दोनों दृष्टांतों के साथ उपयोग किए जाने के लिए एक सामान्य घटक बनाया है।
एक घटक बनाने के लिए, निम्नलिखित सिंटैक्स है।
Vue.component('nameofthecomponent',{ // options});एक कंपोनेंट बनने के बाद, कंपोनेंट का नाम कस्टम एलिमेंट हो जाता है और उसी का उपयोग Vue इंस्टेंस एलिमेंट में किया जा सकता है, यानी आईडी के साथ div के अंदर। component_test तथा component_test1।
में .js फ़ाइल, हमने एक घटक के नाम के रूप में एक परीक्षण घटक का उपयोग किया है और उसी नाम का उपयोग divs के अंदर कस्टम तत्व के रूप में किया जाता है।
उदाहरण
<div id = "component_test">
<testcomponent></testcomponent>
</div>
<div id = "component_test1">
<testcomponent></testcomponent>
</div>में बनाए गए घटक में .jsफ़ाइल, हमने एक टेम्प्लेट जोड़ा है जिसमें हमने एक HTML कोड असाइन किया है। यह एक तरीका हैregistering a global component, जिसे निम्न लिपि में दिखाए गए अनुसार किसी भी प्रतिज्ञा उदाहरण का हिस्सा बनाया जा सकता है।
Vue.component('testcomponent',{
template : '<div><h1>This is coming from component</h1></div>'
});निष्पादन पर, वही ब्राउज़र में परिलक्षित होगा।
घटकों को कस्टम तत्व टैग दिया जाता है, अर्थात <testcomponent></testcomponent>। हालाँकि, जब हम ब्राउज़र में उसी का निरीक्षण करते हैं, तो हम टेम्पलेट में मौजूद सादे HTML में कस्टम टैग को नोटिस नहीं करेंगे जैसा कि निम्नलिखित स्क्रीनशॉट में दिखाया गया है।
हमने निम्नलिखित घटकों को सीधे vue उदाहरण का हिस्सा बनाया है जैसा कि निम्नलिखित स्क्रिप्ट में दिखाया गया है।
var vm = new Vue({
el: '#component_test',
components:{
'testcomponent': {
template : '<div><h1>This is coming from component</h1></div>'
}
}
});यह कहा जाता है local registration और घटक केवल बनाए गए vue उदाहरण का हिस्सा होंगे।
अब तक, हमने मूल घटक को मूल विकल्पों के साथ देखा है। अब, आइए कुछ और विकल्प जैसे कि डेटा और इसे करने के तरीके जोड़ें। जैसे Vue के उदाहरण में डेटा और विधियाँ हैं, घटक भी उसी तरह साझा करता है। इसलिए, हम उस कोड का विस्तार करेंगे, जिसे हमने पहले ही डेटा और विधियों के साथ देखा है।
उदाहरण
<html>
<head>
<title>VueJs Instance</title>
<script type = "text/javascript" src = "js/vue.js"></script>
</head>
<body>
<div id = "component_test">
<testcomponent></testcomponent>
</div>
<div id = "component_test1">
<testcomponent></testcomponent>
</div>
<script type = "text/javascript" src = "js/vue_component.js"></script>
</body>
</html>vue_component.js
Vue.component('testcomponent',{
template : '<div v-on:mouseover = "changename()" v-on:mouseout = "originalname();"><h1>Custom Component created by <span id = "name">{{name}}</span></h1></div>',
data: function() {
return {
name : "Ria"
}
},
methods:{
changename : function() {
this.name = "Ben";
},
originalname: function() {
this.name = "Ria";
}
}
});
var vm = new Vue({
el: '#component_test'
});
var vm1 = new Vue({
el: '#component_test1'
});में .jsऊपर फ़ाइल, हमने एक फ़ंक्शन है जो एक वस्तु लौटाता है, डेटा जोड़ा है। ऑब्जेक्ट में एक नाम गुण होता है, जिसे 'रिया' मान दिया जाता है। इसका उपयोग निम्नलिखित टेम्पलेट में किया जाता है।
template : '<div v-on:mouseover = "changename()" v-on:mouseout = "originalname();"><h1>Custom Component created by <span id = "name">{{name}}</span></h1></div>',घटकों में एक फ़ंक्शन के रूप में डेटा होने के बावजूद, हम इसके गुणों का उसी तरह उपयोग कर सकते हैं जैसे हम सीधे Vue उदाहरण के साथ उपयोग करते हैं। इसके अलावा, दो तरीके जोड़े गए हैं, changename और originalname। परिवर्तन में, हम नाम की संपत्ति बदल रहे हैं, और मूलनाम में हम इसे मूल नाम पर वापस सेट कर रहे हैं।
हमने div, mouseover और mouseout पर दो ईवेंट भी जोड़े हैं। इवेंट्स चैप्टर में घटनाओं के विवरण पर चर्चा की जाएगी। तो अभी के लिए, माउसओवर कॉलchangename विधि और माउसआउट कॉल originalname तरीका।
उसी का प्रदर्शन निम्नलिखित ब्राउज़र में दिखाया गया है।
जैसा कि उपरोक्त ब्राउज़र में देखा गया है, यह डेटा प्रॉपर्टी में निर्दिष्ट नाम को प्रदर्शित करता है, जो समान नाम है। हमने div पर माउसओवर इवेंट भी दिया है और माउसआउट भी। आइए देखें कि जब हम माउसओवर और माउसआउट करते हैं तो क्या होता है।
माउसओवर पर, हम देखते हैं कि पहला घटक का नाम बदलकर बेन कर दिया गया है, हालांकि, दूसरा भी ऐसा ही है। ऐसा इसलिए है क्योंकि डेटा घटक एक फ़ंक्शन है और यह एक ऑब्जेक्ट लौटाता है। इस प्रकार, जब इसे एक स्थान पर बदला जाता है, तो अन्य मामलों में इसे अधिलेखित नहीं किया जाता है।
गतिशील घटक
कीवर्ड का उपयोग करके डायनामिक घटक बनाए जाते हैं <component></component> और यह एक संपत्ति का उपयोग करने के लिए बाध्य है जैसा कि निम्नलिखित उदाहरण में दिखाया गया है।
उदाहरण
<html>
<head>
<title>VueJs Instance</title>
<script type = "text/javascript" src = "js/vue.js"></script>
</head>
<body>
<div id = "databinding">
<component v-bind:is = "view"></component>
</div>
<script type = "text/javascript">
var vm = new Vue({
el: '#databinding',
data: {
view: 'component1'
},
components: {
'component1': {
template: '<div><span style = "font-size:25;color:red;">Dynamic Component</span></div>'
}
}
});
</script>
</body>
</html>उत्पादन
निम्नलिखित सिंटैक्स का उपयोग करके डायनामिक घटक बनाया जाता है।
<component v-bind:is = "view"></component>इसमें v-bind है: = "view" है, और एक वैल्यू व्यू इसे सौंपा गया है। दृश्य Vue उदाहरण में निम्नानुसार परिभाषित किया गया है।
var vm = new Vue({
el: '#databinding',
data: {
view: 'component1'
},
components: {
'component1': {
template: '<div><span style = "font-size:25;color:red;">Dynamic Component</span></div>'
}
}
});जब निष्पादित किया जाता है, तो टेम्पलेट Dynamic Component ब्राउज़र में प्रदर्शित होता है।