v-html 及vue-append插件

前言

先说一下，使用v-html要达到什么效果。

故事是这样的：
我们系统需要一个“代码组件”,即用户可以插入html/css/js代码来修改他的网站。所以，我就想到了用v-html指令来渲染用户提交的代码。
PS : innerHTML是不会执行script代码的。

v-html:

更新元素的 innerHTML
v-html也不会执行script代码。

解决方案

百度and google一番，给出的方案大致如下：
1.在渲染完成后，过滤掉script代码，动态插入script标签
2.过滤下script代码，使用elval执行
3.自己写一个可以执行script的指令

最终：我使用了一个现成的插件vue-append。

vue-append: like v-html directive, but it can call javascript function

使用插件的时候，有一点小问题就是，该插件不支持script外链的形式。
看了它的github的issues，发现里面就有其解决方案。
方案链接如下：
https://github.com/hacke2/vue-append/issues/3

总结

看了一下vue-append的源码，其实现的原理分析如下：
匹配script代码，将里面的代码使用eval执行。

image.png