VueJS - उदाहरण

VueJS के साथ शुरू करने के लिए, हमें Vue का उदाहरण बनाने की आवश्यकता है, जिसे कहा जाता है root Vue Instance

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

var app = new Vue({
   // options
})

आइए हम यह समझने के लिए एक उदाहरण देखें कि वीयू कंस्ट्रक्टर का हिस्सा क्या होना चाहिए।

<html>
   <head>
      <title>VueJs Instance</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <div id = "vue_det">
         <h1>Firstname : {{firstname}}</h1>
         <h1>Lastname : {{lastname}}</h1>
         <h1>{{mydetails()}}</h1>
      </div>
      <script type = "text/javascript" src = "js/vue_instance.js"></script>
   </body>
</html>

vue_instance.js

var  vm = new Vue({
   el: '#vue_det',
   data: {
      firstname : "Ria",
      lastname  : "Singh",
      address    : "Mumbai"
   },
   methods: {
      mydetails : function() {
         return "I am "+this.firstname +" "+ this.lastname;
      }
   }
})

Vue के लिए, एक पैरामीटर कहा जाता है el। यह DOM एलिमेंट की id लेता है। उपरोक्त उदाहरण में, हमारे पास आई.डी.#vue_det। यह div तत्व की आईडी है, जो .html में मौजूद है।

<div id = "vue_det"></div>

अब, हम जो कुछ भी करने जा रहे हैं, वह ईश्वरीय तत्व को प्रभावित करेगा और इसके बाहर कुछ भी नहीं।

अगला, हमने डेटा ऑब्जेक्ट को परिभाषित किया है। इसका मूल्य firstname, lastname और पता है।

वही div के अंदर सौंपा गया है। उदाहरण के लिए,

<div id = "vue_det">
   <h1>Firstname : {{firstname}}</h1>
   <h1>Lastname : {{lastname}}</h1>
</div>

Firstname: {{firstname}} मान को इंटरपोलेशन के अंदर प्रतिस्थापित किया जाएगा, अर्थात {{}} डेटा ऑब्जेक्ट में निर्दिष्ट मान के साथ, अर्थात रिया। वही अंतिम नाम के लिए जाता है।

अगला, हमारे पास ऐसी विधियाँ हैं जहाँ हमने एक फ़ंक्शन माइडेटेट और एक रिटर्निंग वैल्यू परिभाषित किया है। इसे div के अंदर असाइन किया गया है

<h1>{{mydetails()}}</h1>

इसलिए, {{}} के अंदर फंक्शन mydetails कहा जाता है। Vue उदाहरण में दिए गए मान को {{}} के अंदर प्रिंट किया जाएगा। संदर्भ के लिए आउटपुट की जाँच करें।

उत्पादन

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

आइए हम Vue को पास किए जाने वाले विकल्पों पर एक नज़र डालें।

#data- इस प्रकार का डेटा ऑब्जेक्ट या फ़ंक्शन हो सकता है। Vue अपने गुणों को गेटर्स / सेटर में परिवर्तित करता है ताकि इसे प्रतिक्रियाशील बनाया जा सके।

आइए नज़र डालते हैं कि विकल्पों में डेटा कैसे पास किया जाता है।

उदाहरण

<html>
   <head>
      <title>VueJs Introduction</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <script type = "text/javascript">
         var _obj = { fname: "Raj", lname: "Singh"}
         
         // direct instance creation
         var vm = new Vue({
            data: _obj
         });
         console.log(vm.fname);
         console.log(vm.$data);
         console.log(vm.$data.fname);
      </script>
   </body>
</html>

उत्पादन

console.log(vm.fname); // प्रिंट्स राज

console.log(vm.$data); ऊपर दिखाए गए अनुसार पूरी वस्तु को प्रिंट करता है

console.log(vm.$data.fname); // प्रिंट्स राज

यदि कोई घटक है, तो डेटा ऑब्जेक्ट को एक फ़ंक्शन से संदर्भित किया जाना चाहिए जैसा कि निम्नलिखित कोड में दिखाया गया है।

<html>
   <head>
      <title>VueJs Introduction</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <script type = "text/javascript">
         var _obj = { fname: "Raj", lname: "Singh"};
         
         // direct instance creation
         var vm = new Vue({
            data: _obj
         });
         console.log(vm.fname);
         console.log(vm.$data);
         console.log(vm.$data.fname);
         
         // must use function when in Vue.extend()
         var Component = Vue.extend({
            data: function () {
               return _obj
            }
         });
         var myComponentInstance = new Component();
         console.log(myComponentInstance.lname);
         console.log(myComponentInstance.$data);
      </script>
   </body>
</html>

एक घटक के मामले में, डेटा एक फ़ंक्शन है, जिसका उपयोग ऊपर दिखाए गए अनुसार Vue.extend के साथ किया जाता है। डेटा एक फ़ंक्शन है। उदाहरण के लिए,

data: function () {
   return _obj
}

घटक से डेटा को संदर्भित करने के लिए, हमें इसका एक उदाहरण बनाने की आवश्यकता है। उदाहरण के लिए,

var myComponentInstance = new Component();

डेटा से विवरण प्राप्त करने के लिए, हमें वैसा ही करने की आवश्यकता है जैसा हमने उपरोक्त मूल घटक के साथ किया था। उदाहरण के लिए।

console.log(myComponentInstance.lname);
console.log(myComponentInstance.$data);

ब्राउज़र में प्रदर्शित विवरण निम्नलिखित हैं।

Props- प्रॉप्स के लिए टाइप स्ट्रिंग या ऑब्जेक्ट की एक सरणी है। यह एक सरणी-आधारित या ऑब्जेक्ट-आधारित सिंटैक्स लेता है। उन्हें मूल घटक से डेटा स्वीकार करने के लिए उपयोग की जाने वाली विशेषताएँ कहा जाता है।

उदाहरण 1

Vue.component('props-demo-simple', {
   props: ['size', 'myMessage']
})

उदाहरण 2

Vue.component('props-demo-advanced', {
   props: {
      // just type check
      height: Number,
      
      // type check plus other validations
      age: {
         type: Number,
         default: 0,
         required: true,
         validator: function (value) {
            return value >= 0
         }
      }
   }
})

propsData - इसका इस्तेमाल यूनिट टेस्टिंग के लिए किया जाता है।

Type- स्ट्रिंग की सरणी। उदाहरण के लिए, {[कुंजी: स्ट्रिंग]: कोई भी}। इसे Vue उदाहरण के निर्माण के दौरान पारित किया जाना चाहिए।

उदाहरण

var Comp = Vue.extend({
   props: ['msg'],
   template: '<div>{{ msg }}</div>'
})
var vm = new Comp({
   propsData: {
      msg: 'hello'
   }
})

Computed- प्रकार: {[key: string]: फंक्शन | {get: फंक्शन, सेट: फंक्शन}}

उदाहरण

<html>
   <head>
      <title>VueJs Introduction</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <script type = "text/javascript">
         var vm = new Vue({
            data: { a: 2 },
            computed: {
            
               // get only, just need a function
               aSum: function () {
                  return this.a + 2;
               },
               
               // both get and set
               aSquare: {
                  get: function () {
                     return this.a*this.a;
                  },
                  set: function (v) {
                     this.a = v*2;
                  }
               }
            }
         })
         console.log(vm.aSquare);  // -> 4
         vm.aSquare = 3;
         console.log(vm.a);       // -> 6
         console.log(vm.aSum); // -> 8
      </script>
   </body>
</html>

संगणित के दो कार्य हैं aSum तथा aSquare

फंक्शन aSum सिर्फ रिटर्न this.a+2। फ़ंक्शन दो बार फिर से काम करेंget तथा set

चर vm, Vue का एक उदाहरण है और इसे aSquare और aSum कहते हैं। Vm.aSquare = 3 सेट फ़ंक्शन को aSquare से और vm.aSquare कॉल फ़ंक्शन को कॉल करता है। हम ब्राउज़र में आउटपुट की जांच कर सकते हैं जो निम्न स्क्रीनशॉट की तरह दिखता है।

Methods- विधियाँ Vue उदाहरण के साथ शामिल की जानी चाहिए जैसा कि निम्नलिखित कोड में दिखाया गया है। हम Vue ऑब्जेक्ट का उपयोग करके फ़ंक्शन तक पहुंच सकते हैं।

<html>
   <head>
      <title>VueJs Introduction</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <script type = "text/javascript">
         var vm = new Vue({
            data: { a: 5 },
            methods: {
               asquare: function () {
                  this.a *= this.a;
               }
            }
         })
         vm.asquare();
         console.log(vm.a); // 25
      </script>
   </body>
</html>

विधियाँ Vue constructor का हिस्सा हैं। आइए हम व्यू ऑब्जेक्ट का उपयोग करके विधि को कॉल करेंvm.asquare ()संपत्ति का मूल्य a में अपडेट किया गया है asquareसमारोह। A का मान 1 से 25 तक बदला जाता है, और इसे निम्न ब्राउज़र कंसोल में परिलक्षित होता है।