当前位置: 首页 > Web前端 > vue.js

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

时间:2023-04-01 11:43:08 vue.js

button{font-weight:bold;}我们知道Vue推荐使用单文件组件(SingleFileComponent,简称SFC)。可以说SFC是Vue框架的一个特性。但是,我们在学习和练习的时候,想要在一个普通的HTML文件或者一个简单的Playground(比如JSBin或者CodePen)中非常简单的使用Vue的SFC方法并不容易。因此,Vue官方提供了专门的SFCPlayground,方便大家学习Vue。但是,有没有办法在没有SFCPlayground的情况下在单个本地HTML文件或CodePen和JSBin等平台中使用Vue-SFC?方法是有的,我先举个例子:这是一个用CodePen写的Vue组件,它是如何工作的?其实分为三个步骤。嵌入SFC内容的第一步是将Vue-SFC组件内联嵌入到一个普通的HTML文件中。这里的问题是SFC包含HTML标签,但也包含来阻止浏览器执行脚本,但是我们仍然无法阻止浏览器自己解析标签。然后有同学动脑筋想,能不能把SFC的内容放在一个不解析HTML内容的元素里,比如