一、认识Vue-单文本组件

        在大多数启用了构建工具的 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 的标志性功能。

posted @ 2022-10-27 11:37  ywwzhy  阅读(158)  评论(0)  编辑  收藏  举报