Vue单文件组件

1、单文件组件

vue 的单文件组件是官方提供的一种用来组织组件代码的形式，该文件以 .vue 为后缀，该文件会被 vue-cli 内置的 webpack 解析生成对应的 javascript、html、css 文件

https://vue-loader-v14.vuejs.org/zh-cn/start/spec.html

2、结构组成

<template>
  <div class="example">{
  { msg }}</div>
</template>

<script>
export default {
  data () {
    return {
      msg: 'Hello world!'
    }
  }
}
</script>

<style>
.example {
  color: red;
}
</style>

单文件组件把一个组件所包含的 结构、样式、行为 分别通过 template、style、script 进行分离包含，然后统一组织在一个文件中

一个单文件组件最少必须包含 template，可以不需要 script 和 style

3、lang 属性

无论是 template、script 还是 style，都可以通过 lang 属性来指定它们所使用的语言