做门户网站代码质量方面具体需要注意什么纹绣培训班一般价格多少
1 、在vue2中怎么能成功渲染字符串中存在自定义组件
比如，前端样式定义后由接口返回想渲染的样式，如果此时直接使用v-html，那么vue的自定义组件或者ui框架的组件是会被直接引用不能编译成功
解决方案：
此时想到vue官网使用render函数和动态组件实现
动态组件
<template><div v-html="compiledContent"></div>
</template><script>
import Vue from 'vue'const compileTemplate = (templateString, propsData)=>{const Ctor = Vue.extend({template: `<div id="temporary">${templateString}</div>`,data() { return propsData; }});let vm;document.body.insertAdjacentHTML('beforeend', '<div id="temp"></div>');try {vm = new Ctor().$mount('#temp');return vm.$el.innerHTML;} finally {if(vm){vm.$destroy();}document.getElementById('temporary')?.remove();// document.getElementById('temp')?.remove();}
}
export default {name: 'DynamicHtmlRenderer',props: ['content'],computed: {compiledContent(){console.log(this.content)return this.content ? compileTemplate(this.content,{}) : '';}},
}
</script>vue文件中使用
<template><component :is="dynamicComponentName" :content="item"></component>
</template>
<script>
import renderHtml from '@/components/renderHtml.vue';
export default {components: {renderHtml},data(){return {//此时red是全局组件templateString: `<div>关注点：<br/>部分地市资源申请后使用不足。119个集团申请成员储备活动，54个集团有效开展（拓展<red>7525</red>户）。忻州、晋城、临汾请提升使用效率。</div>`}},computed: {dynamicComponentName() {return 'renderHtml';}}
}
</script>这里我遇到一个问题就是Vue.extend、Vue.compile 不存在，此时也引入了vue-template-compiler 插件，发现因为Vue.extend、Vue.compile 这2个方法在vue的完整的版本里面才有，如果想在运行中存在的话 要在vue.config.js 中设置，如下：
第一种如果报错限制了resolve 就使用第二种
2、insertAdjacentHTML()
将文本解析为 element 元素，并将结果节点插入到DOM树中的指定位置。它不会重新解析它正在使用的元素，因此它不会破坏元素内的现有元素。这避免了额外的序列化步骤，使其比直接使用innerHTML操作更快
使用
element.insertAdjacentHTML(position,text)