本地编译与运行时编译
用户想通过编写template + js + css的方式实现运行时渲染页面，那肯定是不能本地编译的（此处的编译指将vue文件编译为js资源文件），即不能把用户写的代码像编译源码一样打包成静态资源文件。
这些代码只能原样持久化到数据库，每次打开页面再恢复回来，实时编译。毕竟不是纯js文件，是不能直接运行的，它需要一个运行时环境，运行时编译，这个环境就是 vue的运行时 + 编译器。
技术干货
按官方的介绍，通过script标签引入vue就可以渐进式开发了，也就具备了运行时+编译器, 如下:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
| <!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="app">{{message}}</div>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})
</script>
</body>
</html>
|
但通过vue单文件+webpack编译的方式，再引入一个vue就多余了，通过CLI也是可以的，只需要在vue.config.js中打开runtimeCompiler开关就行了，详细看文档。
1
2
3
4
|
module.exports = {
runtimeCompiler: true
}
|
此时我们就有了一个运行时编译环境。
动态HTML模板渲染示例:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
| <template>
<component v-bind:is="processedHtml" @clickMe="clickMe"></component>
</template>
<script>
export default {
name: 'ShowHtml',
components: {
},
data: () => ({
html: '<p>我是段落</p> [BuyHere]'
}),
methods: {
clickMe() {
console.log('ok');
alert('clickMe ok')
}
},
computed: {
processedHtml() {
const html = this.html.replace('[BuyHere]','<el-button type="primary" plain @click="clickMe">点我</el-button>');
return {
template: '<div>' + html + '</div>',
props: {
label: {
type: null,
default: () => { return this.label }
}
},
methods: {
clickMe() {
this.$emit( 'clickMe')
}
}
}
}
}
}
</script>
|
完结。