VueJS - टेम्पलेट

हमने पहले के अध्यायों में सीखा है, कि स्क्रीन पर टेक्स्ट कंटेंट के रूप में आउटपुट कैसे प्राप्त करें। इस अध्याय में, हम सीखेंगे कि स्क्रीन पर HTML टेम्पलेट के रूप में आउटपुट कैसे प्राप्त किया जाए।

इसे समझने के लिए, आइए एक उदाहरण पर विचार करें और ब्राउज़र में आउटपुट देखें।

<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>
         <div>{{htmlcontent}}</div>
      </div>
      <script type = "text/javascript" src = "js/vue_template.js"></script>
   </body>
</html>

vue_template.js

var vm = new Vue({
   el: '#vue_det',
   data: {
      firstname : "Ria",
      lastname  : "Singh",
      htmlcontent : "<div><h1>Vue Js Template</h1></div>"
   }
})

अब, मान लें कि हम पृष्ठ पर HTML सामग्री दिखाना चाहते हैं। यदि हम इसका उपयोग इंटरपोलेशन के साथ करते हैं, अर्थात डबल घुंघराले कोष्ठक के साथ, यह वही है जो हमें ब्राउज़र में मिलेगा।

यदि हम देखते हैं कि html सामग्री उसी तरह प्रदर्शित की जाती है जैसा हमने चर htmlcontent में दिया है, तो यह वह नहीं है जो हम चाहते हैं, हम चाहते हैं कि यह ब्राउज़र पर उचित HTML सामग्री में प्रदर्शित हो।

इसके लिए हमें उपयोग करना पड़ेगा v-htmlनिर्देश। जिस क्षण हम HTML तत्व को v-html निर्देश देते हैं, VueJS जानता है कि इसे HTML सामग्री के रूप में आउटपुट करना है। में v-html निर्देश जोड़ें.html फ़ाइल और अंतर देखें।

<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>
         <div v-html = "htmlcontent"></div>
      </div>
      <script type = "text/javascript" src = "js/vue_template.js"></script>
   </body>
</html>

अब, HTML सामग्री को दिखाने के लिए हमें डबल घुंघराले कोष्ठक की आवश्यकता नहीं है, इसके बजाय हमने v-html = "htmlcontent" का उपयोग किया है जहाँ htmlcontent को अंदर परिभाषित किया गया है js फाइल इस प्रकार है -

var vm = new Vue({
   el: '#vue_det',
   data: {
      firstname : "Ria",
      lastname  : "Singh",
      htmlcontent : "<div><h1>Vue Js Template</h1></div>"
   }
})

ब्राउज़र में आउटपुट निम्नानुसार है -

यदि हम ब्राउज़र का निरीक्षण करते हैं, तो हम देखेंगे कि सामग्री उसी तरह से जोड़ी गई है जिस तरह से इसे परिभाषित किया गया है .js चर के लिए फ़ाइल htmlcontent : "<div><h1>Vue Js Template</h1></div>"।

आइए ब्राउज़र में निरीक्षण तत्व पर एक नज़र डालें।

हमने देखा है कि DOM में HTML टेम्पलेट कैसे जोड़ा जाता है। अब, हम देखेंगे कि बाहर निकलने वाले एचटीएमएल तत्वों को कैसे जोड़ना है।

विचार करें, हमारे पास HTML फ़ाइल में एक छवि टैग है और हम src असाइन करना चाहते हैं, जो Vue का एक हिस्सा है।

उदाहरण

<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>
         <div v-html = "htmlcontent"></div>
         <img src = "" width = "300" height = "250" />
      </div>
      <script type = "text/javascript" src = "js/vue_template1.js"></script>
   </body>
</html>

ऊपर दिए गए img टैग को देखें, src खाली है। हमें इसे vue js से src में जोड़ना होगा। आइए हम इसे कैसे करें, इस पर एक नज़र डालते हैं। हम डेटा ऑब्जेक्ट में img src को स्टोर करेंगे.js फाइल इस प्रकार है -

var vm = new Vue({
   el: '#vue_det',
   data: {
      firstname : "Ria",
      lastname  : "Singh",
      htmlcontent : "<div><h1>Vue Js Template</h1></div>",
      imgsrc : "images/img.jpg"
   }
})

यदि हम src को निम्नानुसार असाइन करते हैं, तो ब्राउज़र में आउटपुट निम्न स्क्रीनशॉट में दिखाया जाएगा।

<img src = "{{imgsrc}}" width = "300" height = "250" />

हमें एक टूटी हुई छवि मिलती है। एचएमटीएल टैग को किसी भी विशेषता को असाइन करने के लिए, हमें उपयोग करने की आवश्यकता हैv-bindनिर्देश। आइए src को v-bind डायरेक्टिव के साथ इमेज में जोड़ें।

इस तरह इसे सौंपा गया है .html फ़ाइल।

<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>
         <div v-html = "htmlcontent"></div>
         <img v-bind:src = "imgsrc" width = "300" height = "250" />
      </div>
      <script type = "text/javascript" src = "js/vue_template1.js"></script>
   </body>
</html>

हमें src के साथ उपसर्ग करने की आवश्यकता है v-bind:src = ”imgsrc” और src के साथ चर का नाम।

ब्राउज़र में आउटपुट निम्न है।