vue
相比原生JS
,确实方便很多。
出于本菜的特定使用场景,vue
引入模板的方式并不适用。无奈,只好出此下策,造轮子分离vue
模板中的template
和script
。
需要解析的模板(权当是字符串):
<template>
<h1>ooo</h1>
</template>
<script>
console.log("test");
</script>
分离vue中的template
var html = str.substring(str.indexOf("<template>") + 10, str.indexOf("</template>"));
将这一行封装为函数
get_inner(ele, str) {
var len = ele.length + 4; // <>\n
// console.log(len);
return str.substring(str.indexOf("<"+ele+">") + len, str.indexOf("</"+ele+">"));
},
使用示例
res.body = /** 模板内容 */;
var html = this.get_inner("template", res.body);
var js = this.get_inner("script", res.body);
methods中使用
console.log(html);
this.page = html;
this.$nextTick(() => {
var ele = document.createElement("script");
ele.innerHTML = js;
this.$refs.jscode.append(ele);
})
可以看到:
html内容<h1>ooo</h1>
JS代码的输出结果test
终于OK了~