Vue框架基础6-单文件组件（SFC）

single-file components（单个文件组件）

文件后缀（扩展）名为 .vue，解决的问题：

• 全局定义组件可能会出现命名冲突
• 字符串的 template 没有语法高亮
• 对 CSS 的支持不友好
• 没有明显的构建过程
• …
  单文件组件语法：

<template>
  模板语法
</template>

<script>
  // 定义并导出组件的选项对象模块
</script>

<style lang="scss" scoped>
  /* 样式 */
  div {  }
</style>

• template：视图结构
• script：交互逻辑
• style：样式
  lang：使用 css 预处理器，如：scss、less
  scoped：表示所书写的样式仅支持在当前组件中使用，其它组件不受影响

Vue Loader

Vue Loader 是一个 webpack 的 loader，它允许你以一种名为单文件组件 (SFCs)的格式撰写 Vue 组件

插槽

作用：内容分发
在组件定义时，可使用 内置组件来占位，定义插槽内容。

  //  标签定义在要替换的组件