html渲染组件出错,vue组件渲染过程
最近在学习vue，今天正好发现个问题，本文介绍了虚拟超文本标记语言渲染组件问题，整理了问题的解决方法，有需要的小伙伴可以参考下
由于前面对超文本标记语言进行过解析，今天想用某视频剪辑软件拖拽，实现一手类似快站那种自动生成代码，结果就遇到了拖拽组件过去怎么无法解析的问题，因为某视频剪辑软件的虚拟超文本标记语言为了防止跨站脚本攻击只能解析超文本标记语言
思路
先实现简单页面分三块左中右，左边是需要拖动的组件，中间是用于组件排列显示，右边是解析出的代码
左边组件列表代码
div ref=test
一个组件：title= title[0] element= El-radio v-model= radio label= 1 备选项/el-radio
埃尔-无线电插槽=组件五-型号=无线电标签=1 备选项/el-radio
/单组分
/div
/模板
脚本
从导入一个组件./components/oneComponent
导出默认值{
名称： ,
data() {
返回{
收音机："2",
标题：[收音机单选框]
}
},
组件：{
一个组件
},
}
/脚本
style lang=stylus 范围
/风格
中间组件显示代码
div class=all
El-form label-width= 80px label-position= left :model= rule form :rules= rules
El-表单-项目标签=模拟宽prop=inputW
El-input v-model=规则形式。inputw placeholder=请输入宽/el-input
/El-表单-项目
El-表单-项目标签=模拟高prop=inputH
El-input v-model=规则形式。输入“placeholder=”请输入高/el-input
/El-表单-项目
/el格式
变量盒
class=box
:width=ruleForm.inputW
:height=ruleForm.inputH
/变量框
/div
/模板
脚本
从导入变量框./组件/变量框；
导出默认值{
名称： ,
data() {
var checkSize=(规则，值，回调)={
console.log(值);
如果(值500 值1000) {
回调（新错误(建议500 ~ 1000内的数字));
} else if(！号码。is integer(Number(value))){
回调（新错误(请输入数字值));
}否则{
回调();
}
};
返回{
规则形式：{
输入：500,
输入：500
},
规则：{
inputW: [{ validator: checkSize，trigger: blur }]，
输入：[{ validator: checkSize，trigger: blur }]
}
};
},
方法：{
},
组件：{
变量盒
}
};
/脚本
style lang=stylus 范围。全部
填充：0 20像素
显示器：flex
伸缩方向：列
/风格
接下来实现组件的拖拽使用拖和滴将组件显示在变量盒页面上，使用虚拟超文本标记语言无效后，百度了一下，发现基本上叫使用vue .Vue.compile(模板)和提出但是没给例子
编制是将一个模板字符串编译成提出函数，就是最后
都是提出调用createElement，转化成html，但是我们我们是直接渲染
/El-radio slot= component v-model= radio label= 1 /
所以个人
感觉行不通，最后只能尝试新建组件然后挂载上去
新Vue({
//El:"# app "
模板：this.ele，
数据：{
收音机："2"
},
}).$ mount( # apps )；
这样算是暂时决解掉这个问题吧
vue中运用v-html渲染标签
获取后台数据带标签内容，需要渲染到页面展示。最终效果如下：图文排版
1.首先拿到数据，单独处理
2.接着在超文本标记语言中输出即可
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。