1.本章摘要
在數據庫的某個字段中保存了一些布局樣式的信息，并且在某些標簽中還含有click事件，動態clss，style以及v-if，v-show等，如果我們直接只用v-html來展示數據的話，是能夠呈現給用戶的，但是缺少交互，添加的事件，變量都被當做html元素的屬性處理了，故不能單純的使用v-html來完成帶有交互的后端字符排版文件。
那么具體怎么做呢？
>>> 積極嘗試一
1.官方文檔中有說到，渲染函數render，創建虛擬dom節點，用一個組件去包裹，比如
Vue.component("anchored-heading", {
render(createElement, context){
// 完全透傳任何特性、事件監聽器、子節點等。
return createElement('button', context.data, context.children)
},
props: {
msg: {
type: String,
default: "世界那么大"
}
},
methods: {
test() {
console.log("歡迎，你成功了");
}
}
});
但是像這種比較費勁復雜，可以通過模板的形式做，如下
Vue.component("anchored-heading", {
template: `<div><span>{{ msg }}</span><button @click="test">測試用例</button</div>`,
props: {
msg: {
type: String,
default: "世界那么大"
}
},
methods: {
test() {
console.log("歡迎，你成功了");
}
}
});
還可以使用模板編譯，Vue.compile，使用該函數的前提是vuejs包含了該部分的代碼，為了縮小vuejs的體積，線上vuejs是不包含編譯的，如果要使用，就得使用包含編譯的代碼
import Vue from "vue";
let res = Vue.compile(
`<div><span>{{ msg }}</span><button @click="test">測試用例</button</div>`
);
Vue.component("anchored-heading", {
render: res.render,
props: {
msg: {
type: String,
default: "世界那么大"
}
},
methods: {
test() {
console.log("歡迎，你成功了");
}
}
});
Vue.compile返回的是一個對象，包含了staticRenderFns（數組），render（函數）兩個值，render就是那個渲染函數
image.png
>>> 積極嘗試二
使用Vue.extend擴展函數，基于基礎Vue構造器，創建一個"子類"，參數一個包含組件選項的對象，要注意data選項是特例，必須是一個函數，不是一個對象
<div id="mount-point"></div>
// 創建構造器
var Profile = Vue.extend({
template: '<p>{{firstName}} {{lastName}} aka {{alias}}</p>',
data: function () {
return {
firstName: 'Walter',
lastName: 'White',
alias: 'Heisenberg'
}
}
})
// 創建 Profile 實例，并掛載到一個元素上。
new Profile().$mount('#mount-point')
// 或者
let component = new Profile().$mount()
let dom = document.querySelector("#mount-point");
while (dom.hasChildNodes()) {
dom.removeChild(dom.firstChild);
}
dom.appendChild(component.$el);
結果如下
Walter White aka Heisenberg
如上就能夠解決v-html不能完全解決的問題啦！
