实现:动态编译js的方式有eval和new function
简单例子:
eval:
new function:
显然后者更利于扩展,详细了解区别可以参考链接内容:
https://www.zhihu.com/question/29743491
https://imys.net/20151222/eval-with-new-function.html
要注意使用new Function,在vue环境中直接赋值的方式函数作用域与赋值vue结构对象不同: https://jsfiddle.net/5neLzn1x/
1. 可以通过el.__vfrag__.scope 获取到当前节点上绑定的Vue对象。例如:
const clipboard = new Clipboard('.anticons-list li')
clipboard.on('success', (e) =>{
const item = e.trigger.__vfrag__.scope.item
item.justCopied = true
setTimeout(() =>{
item.justCopied = false
}, 1000)
})
2. 通过vm.$compile 动态编译模板
例如:
const template = `
<animation
:show="visible"
:on-leave="_onAnimateLeave"
:transition-name="popupTransitionName">
<div>(*^__^*)</div>
</animation>
`
compiled () {
const div = document.createElement('div')
div.innerHTML = template
this.$compile(div)
document.body.appendChild(div)
},