Vue3学习-第二章 单文件组件(SFC)

什么是单文件组件？

简言之，单文件组件就是一个文件扩展名为.vue的single-file-components(SFC)。是Vue.js自定义的一种文件格式，一个.vue文件，就是一个单独的组件，在文件内封装了组件的相关代码：HTML，CSS，JS。

浏览器本身并不支持.vue文件，所以必须对.vue文件进行加载解析，此时需要vue-loader，类似的loader还有许多，如：html-loader、css-loader、style-loader、babel-loader等。
所以我们开发项目时，通常需要依赖webpack，vite等构建工具；

为什么要用单文件组件？

在最早的Vue项目中，我们使用Vue.componnet来直接定义全局组件，使用new Vue(el: '#container')在每个页面内指定一个容器元素，因为后缀为.js，可以直接被浏览器支持；

这种方式通常运作在很多小规模的项目中，只用来加持特定的视图（把Vue当成插件来使用）；

Vue.component("counter",{    //1.组件名为"conter"; 2.data 写函数; 3.template 写组件的内容（元素和触发的事件）
    el:"#container",
    data:function(){
            return {count:0}
    },
    //template 是模板的意思，在 html 里面是一个可以同时控制多个子元素的父元素。在这里定义了组件的内容
    template:'点击计算点击次数：{{count}}次'
})

如上所示，这种写法在稍大型的项目中，这种方式的弊端也很明显：

• 全局定义（Global definitions）强制要求每个component中的命名不能重复；

• 字符串模板（String templates）缺乏语法高亮，在HTML中有多行的时候，需要用到丑陋的\;

• 不支持CSS（No CSS Suport）CSS明显被遗漏；

• 没有构建步骤（No build step）限制只能使用HTML和ES5 Javascript，而不能使用预处理器，如 Pug (formerly Jade) 和 Babel (with ES2015 modules)，和 Stylus。；

   

单文件组件（SFC）长啥样？

<template>
  <div class="example">{{ msg }}div>
template>
<script>
export default {
  data() {
    return {
      msg: 'Hello world!'
    }
  }
}
script>
<style>
.example {
  color: red;
}
style>
<custom1>
  这里可以是，例如：组件的文档
custom1>

语言块