VueJS - परिचय

Vueउपयोगकर्ता इंटरफेस के निर्माण के लिए एक जावास्क्रिप्ट ढांचा है। इसका मुख्य भाग मुख्य रूप से दृश्य परत पर केंद्रित है और इसे समझना बहुत आसान है। Vue का संस्करण जिसे हम इस ट्यूटोरियल में उपयोग करने जा रहे हैं, वह 2.0 है।

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

इस उदाहरण में, हम vuejs के विकास का उपयोग करने जा रहे हैं।

उदाहरण

<html>
   <head>
      <title>VueJs Introduction</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <div id = "intro" style = "text-align:center;">
         <h1>{{ message }}</h1>
      </div>
      <script type = "text/javascript">
         var vue_det = new Vue({
            el: '#intro',
            data: {
               message: 'My first VueJS Task'
            }
         });
      </script>
   </body>
</html>

उत्पादन

यह पहला ऐप है जिसे हमने VueJS का उपयोग करके बनाया है। जैसा कि उपरोक्त कोड में देखा गया है, हमने .html फ़ाइल के प्रारंभ में vue.js को शामिल किया है।

<script type = "text/javascript" src = "js/vue.js"></script>

एक div है जो शरीर में जोड़ा जाता है जो प्रिंट करता है “My first VueJS Task” ब्राउज़र में।

<div id = "intro" style = "text-align:center;">
   <h1>{{ message }}</h1>
</div>

हमने एक प्रक्षेप में एक संदेश भी जोड़ा है, अर्थात {{}}। यह VueJS के साथ सहभागिता करता है और ब्राउज़र में डेटा प्रिंट करता है। DOM में संदेश का मूल्य पाने के लिए, हम निम्नानुसार vuejs का एक उदाहरण बना रहे हैं -

var vue_det = new Vue({
   el: '#intro',
   data: {
      message: 'My first VueJS Task'
   }
})

उपरोक्त कोड स्निपेट में, हम Vue उदाहरण कह रहे हैं, जो DOM तत्व अर्थात e1: '# intro' की आईडी लेता है, यह div की आईडी है। उस संदेश के साथ डेटा है जिसे मान असाइन किया गया है‘My first VueJS Task’। VueJS DOM के साथ इंटरैक्ट करता है और DOM {{message}} में वैल्यू को बदल देता है’My first VueJS Task’

यदि हम कंसोल में संदेश के मूल्य को बदलने के लिए होते हैं, तो वही ब्राउज़र में परिलक्षित होगा। उदाहरण के लिए -

कंसोल विवरण

उपरोक्त कंसोल में, हमने vue_det ऑब्जेक्ट प्रिंट किया है, जो Vue का एक उदाहरण है। हम संदेश को अपडेट कर रहे हैं“VueJs is interesting” और जैसा कि ऊपर दिए गए स्क्रीनशॉट में देखा गया है, तुरंत ही ब्राउज़र में बदल दिया जाता है।

यह केवल एक मूल उदाहरण है जिसमें VueJS को DOM के साथ जोड़ा जा रहा है, और हम इसे कैसे जोड़ सकते हैं। अगले कुछ अध्यायों में, हम निर्देशों, घटकों, सशर्त छोरों आदि के बारे में जानेंगे।