Vue06：单文件组件、异步请求

单文件组件

1 单文件组件

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

官网

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 属性来指定它们所使用的语言

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

4 src 属性

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

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

这里的 src 同样遵循模块化的导入规则，./ 开头的表示相对路径，/ 开头表示 NPM 包中的资源

5 有作用域的 CSS

• 当 style 标签有 scoped 属性时，它的 CSS 只作用于当前组件中的元素。
• 这类似于 Shadow DOM 中的样式封装

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

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

解析后
给css样式加上了唯一属性

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

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

混用本地和全局样式

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

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

6 资源路径处理

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

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

6-1 绝对路径前缀

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

6-2 相对路径前缀

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

6-3 特殊前缀

如果路径以 @ 开头，也会被看作模块依赖。
如果你的 webpack 配置中给 @ 配置了 alias，这就很有用了。所有 vue-cli 创建的项目都默认配置了将 @ 指向 /src

2 vue-router 异步请求

跨域

vue-cli 提供了一个内置基于 node 的 webserver ，我们可以使用它提供的 proxy 服务来进行跨域请求代理

vue.config.js

在项目的根目录下创建一个 vue.config.js 的文件，通过 npm run serve 启动服务的时候，会读取该文件

跨域请求代理配置

以 axios为例

请求

...

<script>
import HelloWorld from "./components/HelloWorld.vue";
import axios from "axios";

export default {
  name: "App",
  components: {
    HelloWorld
  },
  async created() {
    const rs = await axios({
      url: "/api",
    });
    console.log("rs", rs);
  },
};
</script>
...

配置vue.config.js文件

module.exports = {
    devServer: {
        proxy: {
            '/api': {
                target: 'http://localhost:9999',
                pathRewrite: {
                    '^/api': ''
                }
            }
        }
    }

}

后端服务器响应

const Koa = require('koa');
const KoaRouter = require('koa-router');


const app = new Koa();
const router = new KoaRouter();

router.get('/', async ctx => {
    ctx.body = 'Hello Koa';
});

app.use(router.routes());


app.listen(9999);