在大多数启用了构建工具的 Vue 项目中,我们可以使用一种类似 HTML 格式的文件来书写 Vue 组件。
它被称为单文件组件 (也被称为 *.vue
文件,英文 Single-File Components,缩写为 SFC)。
顾名思义,Vue 的单文件组件会将一个组件的逻辑 (JavaScript),模板 (HTML) 和样式 (CSS) 封装在同一个文件里。
下面我们将用单文件组件的格式重写上面的计数器示例:
1 <script> 2 export default { 3 data() { 4 return { 5 count: 0 6 } 7 } 8 } 9 </script> 10 11 <template> 12 <button @click="count++">Count is: {{ count }}</button> 13 </template> 14 15 <style scoped> 16 button { 17 font-weight: bold; 18 } 19 </style>
总结:单文件组件是 Vue 的标志性功能。
标签:count,文件,Vue,HTML,组件,文本 From: https://www.cnblogs.com/kjitboy/p/16831664.html