मैं Vue का उपयोग करके एक वेब एप्लिकेशन में एक पेज बढ़ा रहा हूं। अतीत में मैंने एकल फ़ाइल घटकों को लिखा है और मैंने <template> टैग का उपयोग करके फ़ाइल के शीर्ष पर html टेम्पलेट को परिभाषित करना सुविधाजनक पाया है।

क्या Vue रूट इंस्टेंस को परिभाषित करते समय इस टैग का उपयोग करने का कोई तरीका है? या क्या मुझे Vue विकल्प ऑब्जेक्ट की टेम्प्लेट प्रॉपर्टी में एक स्ट्रिंग डालने की आवश्यकता है?

3
DatsunBing 7 मई 2018, 02:11

2 जवाब

सबसे बढ़िया उत्तर

आप एक्स-टेम्पलेट सिंटैक्स का उपयोग कर सकते हैं, जैसे कि

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>

  <script type="text/x-template" id="message-template">
        <div >
           {{message}}
        </div>
    </script>

  <div id="app"> </div>

 <script>
     var graphapp = new Vue({
            el: "#app",            
            data: {
                message: "hi there"
            },
            template: "#message-template"
     });   
  </script>

</body>
</html>

ध्यान देने योग्य बात यह है कि यदि आपका संपादक x-टेम्पलेट ब्लॉक के अंदर html को नहीं समझता है तो आप text/html का भी उपयोग कर सकते हैं।

आप पृष्ठ में भी कई घटकों को परिभाषित कर सकते हैं। यह तब बहुत उपयोगी होता है जब आप किसी पृष्ठ को सादे html/js से अपग्रेड कर रहे होते हैं लेकिन इसे पूरी तरह से बदल नहीं सकते हैं

देखें: https://vuejs.org/v2/guide /components-edge-cases.html#X-Templates

4
Keith Nicholas 7 मई 2018, 05:14

ऐसा लगता है कि 2020 तक, आप HTML5 टैग सीधे का बहुत अधिक उपयोग कर सकते हैं:

<template v-if="ok">
    <h1>Title</h1>
    <p>Paragraph 1</p>
    <p>Paragraph 2</p>
</template>

कुछ मामलों में आप <template> का उपयोग न करने का कारण अमान्य HTML5 सत्यापन और/या रेंडरिंग त्रुटियों से बचना है (देखें Vue.js DOM टेम्प्लेट पार्सिंग चेतावनियाँ)।

0
K3---rnc 1 अप्रैल 2020, 22:22