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不能完全解决的问题啦！
