实战 3：动态渲染 .vue 文件的组件—— Display
你可能用过 jsfiddle 或 jsbin 之类的网站，在里面你可以用 CDN 的形式引入 Vue.js，然后在线写示例，实时运行，比如下面这个例子：
https://jsfiddle.net/c87yh92v/
不过，这类网站主要是一个 html，里面包含 js、css 部分，渲染侧是用 iframe 嵌入你编写的 html，并实时更新。在这些网站写示例，是不能直接写 .vue 文件的，因为没法进行编译。
再来看另一个网站 iView Run（之前小节也有提到），它是能够在线编写一个标准的 .vue 文件，并及时渲染的，它也预置了 iView 环境，你可以使用 iView 组件库全部的组件。本小节，我们就来实现这样一个能够动态渲染 .vue 文件的 Display 组件，当然，用到的核心技术就是上一节的 extend 和 $mount。
接口设计
一个常规的 .vue 文件一般都会包含 3 个部分：
-
：组件的模板； -
父级传递
code后，将其分割，并保存在 data 的 html、js、css 中，后续使用。我们使用正则，基于
<>和的特性进行分割：// display.vue，部分代码省略 export default { methods: { 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(``)); }, 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：.vue 文件代码，即 props: code；
- type：分割的部分，也就是 template、script、style。
分割后，返回的内容不再包含
等标签，直接是对应的内容，在 splitCode 方法中，把分割好的代码分别赋值给 data 中声明的 html、js、css。有两个细节需要注意：- .vue 的
extend 构造的实例通过 $mount 渲染后，挂载到了组件唯一的一个节点
上。现在 html 和 js 都有了，还剩下 css。加载 css 没有什么奇技淫巧，就是创建一个