Vue(四)——单文件组件

最新推荐文章于 2025-03-18 15:04:00 发布

Jyann~

最新推荐文章于 2025-03-18 15:04:00 发布

阅读量1.3k

点赞数

分类专栏： Vue 前端文章标签： vue vue单文件组件

本文链接：https://blog.csdn.net/qq_34569497/article/details/113184827

版权

前端同时被 2 个专栏收录

173 篇文章

订阅专栏

Vue

92 篇文章

订阅专栏

本文介绍了Vue中的单文件组件概念及使用方式，包括组件的基本结构、lang属性的应用、src属性的作用、有作用域的CSS使用方法以及资源路径处理技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

单文件组件

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

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

一、组成

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

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

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

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

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

二、lang属性

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

可通过template中的lang属性加载jade；script使用lang属性加载其他非js语言如ts等；style中使用lang属性加载一些其他CSS框架

<template lang="jade">
  div.example
		p {{ msg }}
</template>

<script lang="ts">
import Vue from 'vue'
export default Vue.extend({
  data () {
    return {
      msg: 'Hello world'
    }
  }
})
</script>

<style lang="stylus">
.example
  color red
</style>

三、src属性

我们还可以通过 src 属性把文件分离到单独的文件中

<template src="./template.html"></template>
<style src="./style.css"></style>
<script src="./script.js"></script>

这里的 src 同样遵循模块化的导入规则，./ 开头的表示相对路径，/ 开头表示 NPM 包中的资源 (定位到node_module下)，主要是根据webpack中配置决定的，可进行更改。

四、有作用域的CSS— `scoped` 属性

当 style 标签有 scoped 属性时，它的 CSS 只作用于当前组件中的元素。这类似于 Shadow DOM 中的样式封装。解析后自动给template和style中加上data-v-XXXX特殊的属性选择器

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

<template>
  <div class="example">hi</div>
</template>

解析后：

<style>
.example[data-v-f3f3eg9] {
  color: red;
}
</style>

<template>
  <div class="example" data-v-f3f3eg9>hi</div>
</template>

4.1混用本地和全局样式

<style>
/* 全局样式 */
</style>

<style scoped>
/* 本地样式 */
</style>

五、资源路径处理

在项目开发中，我们经常会碰到要引入外部资源的需求，vue 单文件系统中，对资源引入路径有一定的特殊处理

绝对路径前缀
相对路径前缀
特殊前缀

5.1绝对路径前缀

就是以 /、https://kaikeba.com/ 等这样的绝对路径开头的，不做任何处理，直到被浏览器解析

5.2相对路径前缀

就是以 ./、../ 这样的相对路径开头的，将会被看作相对的模块依赖，并按照你的本地文件系统上的目录结构进行解析，如：<img src="../a.png"> 解析后：<img src="require('../a.png')">，类似的还包括 background: url(...) 和 @import

5.3特殊前缀

如果路径以 ~ 开头，其后的部分将会被看作模块依赖。这意味着你可以用该特性来引用一个 node（NPM 包）依赖中的资源，如：<img src="~some-npm-package/a.png">
如果路径以 @ 开头，也会被看作模块依赖。如果你的 webpack 配置中给 @ 配置了 alias，这就很有用了。所有 vue-cli 创建的项目都默认配置了将 @ 指向 /src