使用VueJs保存模板

我的項目目前使用VueJS。現在，我們需要使用輸入數據處理特定模板，然後存儲結果並使用它發送電子郵件（例如）。使用VueJs保存模板

我可以使用用戶數據呈現模板並保存它嗎？怎麼樣？

我不想使用另一個庫用於此目的，除非我們能不能用VueJS

做我看了一下SSR。但我不想使用服務器端渲染。這個想法只是呈現某些信息。以下這樣的行爲：

save: function(){ 
    userNote.user = ... 
    userNote.message = document.getElementById('message').innerHtml; 
    saveToServer(userNote); 
}

消息模板：

<div id="message"> Dear {{user.name}}, please confirm that {{notes}} before {{date}}</div>

我希望我讓我明白了。在此先感謝。

來源

2017-08-25 David Gard

[是否可以將Vue.js模板編譯爲靜態HTML和CSS文件？]（https://stackoverflow.com/questions/42857376/is-it-possible-to-compile-vue-js -templates-to-static-html-and-css-files） – thanksd

@thanksd謝謝，你提到的問題非常相似，但它不是我想要的。我會添加更多細節。 –

假設你的模板存儲在一個組件，您可以添加一個導出方法，

var templateComponent = Vue.component("template-component", { 
 
    template: "<p>Hello {{name}}</p>", 
 
    props: ["name"], 
 
    methods: { 
 
    exportHTML: function() { 
 
     return this.$el.outerHTML; 
 
    } 
 
    } 
 
}); 
 

 
var app = new Vue({ 
 
    el: '#app', 
 
    data: { 
 
    name: "David", 
 
    html: undefined 
 
    }, 
 
    methods: { 
 
    getHTML: function() { 
 
     this.html = this.$refs.template.exportHTML(); 
 
    } 
 
    } 
 
});

<script src="https://unpkg.com/[email protected]/dist/vue.min.js"></script> 
 
<div id="app"> 
 
    <div style="display: none"> 
 
     <template-component :name="name" ref="template"></template-component> 
 
    </div> 
 

 
    <label>Name 
 
     <input v-model="name"> 
 
    </label> 
 

 
    <button @click="getHTML">Get html</button> 
 

 
    <pre>{{ html }}</pre> 
 
</div>

然後你只需要調用模板組件上的exportHTML方法來檢索HTML 。

來源

2017-08-25 16:09:40

這個工程，在這個例子中。我需要了解兒童元素的位置。如果我添加其他孩子，我可能會小心地把它放在哪裏。 –

我已經稍微編輯了我的答案，以更好的方式訪問模板。 –

使用VueJs保存模板

回答

相關問題