vue模版字符串解析成vue模版对象

模版字符串

this.code= `
<template>
    <div style="width:100% ; height: 100% ;">
        {{resultData[0].name}}
    </div>
</template>
<script>
export default {
    data() {
        return {
            resultData: [
                { name: '图幅', value: 20 },
            ]

        }
    },
    mounted(){
    },
    methods: {
        chartClick(params){
            console.log(params);
        }
    }
}
<\/script>`

上述模版字符串自定义

多说一嘴：如果要根据某个vue去拿模版字符串可通过raw-loader实现

解析

    data(){
        return {
            html: '',
            js: '',
            css: '',
        }
    }
    methods:{
         buildDom() {
            this.splitCode()
            if (this.html === '' || this.js === '') {
                return;
            }
            const common = new Function(this.js)()
            common.template = this.html
            //此时common就是vue模版对象了
            console.log(common);
            if (this.css !== '') {
                const styles = document.createElement('style')
                styles.type = 'text/css'
                styles.innerHTML = this.css
                document.getElementsByTagName('head')[0].appendChild(styles)
            }
        },
        splitCode() {
            const script = this.getSource(this.code, 'script').replace(
                /export default/,
                'return '
            )
            const style = this.getSource(this.code, 'style')
            const template =this.getSource(this.code, 'template')  
            this.js = script
            this.css = style
            this.html = template
        },
        getSource(source, type) {
            const regex = new RegExp(`<${type}[^>]*>`)
            let openingTag = source.match(regex)
            if (!openingTag) return ''
            else openingTag = openingTag[0]

            return source.slice(
                source.indexOf(openingTag) + openingTag.length,
                source.lastIndexOf(`</${type}>`)
            )
        },
        
    }