在页面中直接嵌入vue-sfc的方法

我们知道，Vue推荐使用单文件组件（Single File Component，简称SFC)，可以说SFC是Vue框架的特色。

但是，我们在学习和练习的时候，如果想要用非常简单的方式在一个常规的HTML文件，或者简单的Playground（比如JSBin或者CodePen）里面使用Vue的SFC方式，是不太容易的。

因此Vue官方提供了专门的SFC Playground来方便大家学习Vue。

不过，有没有办法不用SFC Playground，在本地单个HTML文件或者CodePen和JSBin这样的平台使用Vue-SFC呢？

办法是有的，我先放一个例子：

这是一个在CodePen中写的Vue组件

这是怎么做到的呢？

其实要分成三个步骤。

第一步 嵌入SFC内容
首先是要在普通的HTML文件中内联嵌入Vue-SFC组件。这里的麻烦之处在于，SFC中包含有HTML标签，而且还有<script>标签，因此，将它放在页面中内联，浏览器就会解析这些标签。尽管我们可以通过给<script>设置type来避免浏览器执行脚本，但是依然不能阻止浏览器解析这些标签本身。

那有同学就动脑筋想了，我们是否可以把SFC的内容放到一个不解析HTML内容