一杆老狙
一杆老狙

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 组件

插槽

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

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