वहाँ एक Vue वस्तु प्रारंभिक एचटीएमएल

Question

मैं Vue.js उपयोग करने के लिए और अधिक आसानी से डोम में हेरफेर करने लेकिन चाहते संरक्षण प्रारंभ करने में एक तरह से जब मैं एक Vue प्रारंभ आपत्ति यह प्रारंभिक डेटा कि जोड़ तोड़ से पहले पहली बार में बैकएंड के साथ उत्पन्न होता है पुनर्लेखन है।

उदाहरण के लिए मैं इस मार्कअप है:

<ul id="list"> 
    <li v-repeat="elements" v-text="content">a</li> 
    <li v-repeat="elements" v-text="content">b</li> 
    <li v-repeat="elements" v-text="content">c</li> 
</ul> 

और फिर मैं new Vue({ el: '#list' }) उपयोग करने के लिए इतना है कि यह किसी भी तरह पहले से ही विद्यमान मार्कअप पढ़ सकते हैं और संपादन $data के माध्यम से जोड़ तोड़ से पहले ही रक्षा करेगा चाहते हैं। क्या यह किसी भी तरह से प्राप्त करने योग्य है?

Answer 1

मुझे लगता है कि यह संभव नहीं है कि आप इसे करना चाहते हैं। Vue.JS सीधे डोम पर काम नहीं करता है। यह डीओएम तत्वों को पढ़ता है, उन्हें एक रेंडर फ़ंक्शन में परिवर्तित करता है और रेंडर-फ़ंक्शन के परिणामस्वरूप संपूर्ण तत्व को प्रतिस्थापित करता है।

आप शायद अपने डोम स्कैन और अपने $ डेटा ऑब्जेक्ट (और संभवतः Vue के लिए अपने टेम्पलेट-स्ट्रिंग) को भरने के लिए JQuery का उपयोग करना चाहिए और उसके बाद initialie डेटा उत्पन्न इस के साथ अपने Vue उदाहरण।

लेकिन कुल मिलाकर - आप अपने आवेदन तर्क पर पुनर्विचार करना चाहिए, क्योंकि आप कुछ बहुत जटिल है, जो संभवतः बहुत आसान हल किया जा सकता कर कर रहे हैं। जो कुछ भी आपके डोम-टेम्पलेट को उत्पन्न करता है, वह शायद जेएस-वेरिएबल में सीधे प्रस्तुत कर सकता है, या यहां तक ​​कि एजेक्स कॉल के साथ भी पहुंचा जा सकता है ...

यदि आप जेएस या सीडीएन का समर्थन नहीं करते हैं तो आप फ़ॉलबैक दृष्टिकोण प्रस्तुत करना चाहते हैं वू उपलब्ध नहीं है आप स्क्रिप्ट-टेम्पलेट दृष्टिकोण का उपयोग कर सकते हैं। अपनी Vue.JS सामग्री को एक स्क्रिप्ट-टैग में परिभाषित करें, जो मूल DOM को प्रतिस्थापित करेगा, जब Vue तैयार हो।

उदाहरण:

function loadVue() { 
 
    new Vue({ 
 
    data: { values: [ 'aaa','bbb','ccc' ] }, 
 
    template: '#list-template', 
 
    el: '#list' 
 
    }) 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.4/vue.js"></script> 
 

 
<ul id="list"> 
 
    <li>a</li> 
 
    <li>b</li> 
 
    <li>c</li> 
 
    <button onclick="loadVue()">Load Vue.JS</button> 
 
</ul> 
 

 
<script type="text/x-template" id="list-template"> 
 
<ul id="list"> 
 
    <li v-for="v in values">{{v}}</li> 
 
</ul> 
 
</script>

Answer 2

कोई कारण नहीं है कि आप पहले से ही विद्यमान तत्वों के संयोजन का उपयोग नहीं कर सकते हैं और एक v-repeat इस

new Vue({ 
 
    el: '#list', 
 
    data: { 
 
     elements: [{ 
 
      content: "d (v-repeat)" 
 
     }, { 
 
      content: "e (v-repeat)" 
 
     }, { 
 
      content: "f (v-repeat)" 
 
     }] 
 
    } 
 
});

<script src="http://cdnjs.cloudflare.com/ajax/libs/vue/0.11.4/vue.min.js"></script> 
 
<ul id="list"> 
 
    <li>a</li> 
 
    <li>b</li> 
 
    <li>c</li> 
 
    <li v-repeat="elements" v-text="content">c</li> 
 
</ul>

की तरह तुम बस तत्वों कि पहले से ही मौजूद हैं पर एक v-repeat डाल नहीं नहीं है।