textarea元素是vue组件代码编写部分，button为按钮区域textarea{display:block;width:100%;min-height:100px;max-height:500px;padding:8px;resize:auto;}button{margin-top:8px;显示：内联块；填充：5px16px；字体大小：14px；字体粗细：500；行高：20px；空白：nowrap；垂直对齐：中间；光标：指针；-webkit-用户选择:none;-moz-user-select:none;-ms-user-select:none;user-select:none;border:1pxsolid;border-radius:6px;-webkit-appearance:none;-moz-appearance:none;appearance:none;}.btn-center{text-align:center;}思想在xxx.vue中被分解，我们编写组件通常遵循模板我们想到的是获取输入内容后，希望获取tempalte、script、style中的内容，然后通过Vue.extend(options)方法可以在页面元素上挂载解析标签。我们需要获取的内容包括下图中红圈外的部分。我们可以使用字符串的match方法获取每段开始标签的下标，开始标签的长度和End标签的下标，然后通过slice方法截取得到想要的内容。getSource(type){constreg=newRegExp(`<${type}[^>]*>`);letcontent=this.content;letmatches=content.match(reg);if(matches){letstart=content.indexOf(匹配[0])+匹配[0]。在官网上，data必须是一个函数，我们得到的是一个字符串}}如何将字符串转换成可执行函数，可以参考Howtomakeastringexecute?我们可以使用新的Function方法将字符串转换为可执行函数，我们需要的是data(){return{msg:'helloworld'}},methods:{run(){console.log("Hello")}}使用字符串的replace方法将exportdefault替换为return得到完成的代码运行：function(){lettemplate=this.getSource("template");if(!template)returnletscript=this.getSource("script");if(script){script=script.replace(/exportdefault/,"return");}letobj=newFunction(script)();obj.template=template;letProfile=Vue.extend(obj);newProfile().$mount("#result")}，处理style通过正则分析得到style样式后，在头部添加letstyleCss=this.getS来源（“样式”）；letstyle=document.createElement（“样式”）；style.innerHTML=styleCss；document.head.appendChild（样式）；综上所述，以上就是本文的全部内容，只是简单的使用Vue.extend()方法实现了一个简单的Vue组件在线编辑器运行代码清除