单文件组件
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
属性
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