根据 B 站黑马程序员视频所撰写的笔记

Vue 基础

JavaScript 框架
简化 Dom 操作
响应式数据驱动

提示：以下代码都要导入 Vue.js 文件

1 2	<!-- 开发环境版本，包含了有帮助的命令行警告 --> <script src="https://npm.elemecdn.com/vue/dist/vue.js"></script>

el: 挂载点

Vue 会管理 el 选项命中的元素及其内部的后代元素，建议使 id 选择器，可以使用其他双标签，但不能使用 html 和 body

data: 数据对象

<div id="app">{{message}}</div>
<script>
  var app = new Vue({
    el: "#app",
    data: {
      message: "Tsuki",
    },
  });
</script>

methods: 方法

<div id="app">
  <button @click="sub">-</button>
  <span> {{num}} </span>
  <button @click="add">+</button>
</div>
<script>
  var app = new Vue({
    el: "#app",
    data: {
      num: 1,
    },
    methods: {
      sub() {
        if (this.num <= 0) {
          alert("不能再减了嗷！");
        } else {
          this.num--;
        }
      },
      add() {
        if (this.num >= 6) {
          alert("我的好大，要忍一下！");
        } else {
          this.num++;
        }
      },
    },
  });
</script>

v-text

绑定显示文字，直接覆盖

<div id="app">
  <h2 v-text="name">Wong</h2>
  <h2 v-text="girlfriend+'!'">blabla</h2>
  <h2>{{ name +'+'}} Wong</h2>
</div>
<script>
  var app = new Vue({
    el: "#app",
    data: {
      name: "Tsuki",
      girlfriend: "Wendy",
    },
  });
</script>

v-html

绑定显示文字/渲染代码。

用途：将字符串String里的HTML代码渲染成网页

<div id="app">
  <p v-text="content"></p>
  <p v-html="content"></p>
</div>
<script>
  var app = new Vue({
    el: "#app",
    data: {
      content: '<a href="https://blog.tsuki.icu">Tsuki\'s Blog</a>',
    },
  });
</script>

注意：在网站上动态渲染任意 HTML 是非常危险的，因为容易导致 XSS 攻击。只在可信内容上使用 v-html，永远不要用在用户提交的内容上。

v-on | @

为元素绑定事件，指令可去掉v-on简写为@

语法：@事件="方法([参数])"

文档传送门：https://cn.vuejs.org/v2/api/#v-on

<div id="app">
  <input type="button" value="v-on指令" @click="doIt" />
  <input type="button" value="v-on简写" @click="doIt" />
  <input type="button" value="双击事件" @dblclick="doIt" />
</div>
<script>
  var app = new Vue({
    el: "#app",
    methods: {
      doIt() {
        alert("RNM，退钱！！！");
      },
    },
  });
</script>

v-show

组件的显隐效果，其原理是修改元素的样式 display，指令后的内容最终都会被解析为布尔值

用法：v-show内可写true、false，也可以写表达式

场景：频繁切换的元素用 v-show

<div id="app">
  <input type="button" value="切换显示状态" @click="changeIsShow" /><br />
  <img v-show="isShow" src="./img/monkey.gif" alt="" /><br />
  <input type="button" value="增龄" @click="addAge" />
  {{age}}
  <input type="button" value="减龄" @click="subAge" />（18🈲）<br />
  <img v-show="age>=18" src="https://www.baidu.com/favicon.ico" alt="" />
</div>
<script>
  var app = new Vue({
    el: "#app",
    data: {
      isShow: false,
      age: 16,
    },
    methods: {
      changeIsShow() {
        this.isShow = !this.isShow;
      },
      addAge() {
        this.age++;
      },
      subAge() {
        this.age--;
      },
    },
  });
</script>

v-if

根据表达式的真假，切换元素有无效果，其原理是操纵 dom 元素

用法：和v-show一毛一样

场景：不频繁切换的元素用v-if

频繁操作 dom 对性能消耗比较大

<div id="app">
  <input type="button" value="切换显示" @click="toggleIsShow" />
  <p v-if="isShow">Tsuki - v-if修饰</p>
  <p v-show="isShow">Tsuki - v-show修饰</p>
  <h2 v-if="want>=80">不会吧，不会吧，不会真的有人在看俺滴Vue笔记吧？</h2>
</div>
<script>
  var app = new Vue({
    el: "#app",
    data: {
      isShow: false,
      want: 100,
    },
    methods: {
      toggleIsShow: function () {
        this.isShow = !this.isShow;
      },
    },
  });
</script>

v-bind | :

为元素绑定属性（比如 :src，:title，:class），指令可去掉v-bind简写为:

语法：v-bind:属性名=表达式👉:属性名=表达式

<style>
  .active {
    border: 1px solid red;
  }
</style>
<div id="app">
  <img v-bind:src="imgSrc" alt="" />
  <br />
  <img
    :src="imgSrc"
    alt=""
    :title="imgTitle+'!!!'"
    :class="isActive?'active':''"
    @click="toggleActive"
  />
  <br />
  <img
    :src="imgSrc"
    alt=""
    :title="imgTitle+'!!!'"
    :class="{active:isActive}"
    @click="toggleActive"
  />
</div>
<script>
  var app = new Vue({
    el: "#app",
    data: {
      imgSrc: "http://www.itheima.com/images/logo.png",
      imgTitle: "Tsuki",
      isActive: false,
    },
    methods: {
      toggleActive: function () {
        this.isActive = !this.isActive;
      },
    },
  });
</script>

v-for

根据数据生成列表结构

语法：(item,index) in 数组

场景：数组经常和v-for结合使用

<div id="app">
  <input type="button" value="添加数据" @click="add" />
  <input type="button" value="移除数据" @click="remove" />
  <ul>
    <li v-for="(it,index) in people">{{ index+1 }}派对成员: {{ it }}</li>
  </ul>
  <h2 v-for="item in art" v-bind:title="item.name">{{ item.name }}</h2>
</div>
<script>
  var app = new Vue({
    el: "#app",
    data: {
      people: ["Tsuki", "Wendy", "Sharon"],
      art: [{ name: "krump" }, { name: "rap" }],
    },
    methods: {
      add: function () {
        this.art.push({ name: "rap" });
      },
      remove: function () {
        this.art.shift();
      },
    },
  });
</script>

v-model

获取和设置表单元素的值（双向数据绑定），绑定的数据会和表单元素值相关联

双向数据绑定可以实现数据双向更改，而不是只能 data 里数据改{{}}的

<div id="app">
  <input type="button" value="修改name" @click="setN" />
  <input type="text" v-model="name" @keyup.enter="getN" />
  <h2>{{ name }}</h2>
</div>
<script>
  var app = new Vue({
    el: "#app",
    data: {
      name: "Tsuki",
    },
    methods: {
      getN() {
        alert(this.name);
      },
      setN() {
        this.name = "Wendy";
      },
    },
  });
</script>

父组件传值给子组件

父传子主要通过在父组件 v-bind 绑定数据，在子组件进行用props进行数据的接收

父组件：

<template>
  <div id="container">
    <Child :msg="data"></Child>
  </div>
</template>
<script>
import Child from "@/components/Child";
export default {
  data() {
    return {
      data: "父组件的值",
    };
  },
  methods: {},
  components: {
    Child,
  },
};
</script>

子组件：

<template>
  <div id="container">
    <h1>{{ msg }}</h1>
  </div>
</template>
<script>
export default {
  data() {
    return {};
  },
  props: ["msg"],
};
</script>

网络应用

axios

功能强大的网络请求库

导入 html：写入<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

导入 vue3.x：运行npm i axios -S，在<script>里写入import axios from 'axios';

语法：

get 请求：axios.get(网址?key=value&key2=value1).then(function(response){},function(err){})
post 请求：axios.post(网址,{key:value,key2:value1}).then(function(response){},function(err){})

Get和Post的区别是什么?

Get 是不安全的，因为在传输过程，数据被放在请求的 URL 中；Post 的所有操作对用户来说都是不可见的。
Get 传送的数据量较小，这主要是因为受 URL 长度限制；Post 传送的数据量较大，一般被默认为不受限制。
Get 限制 Form 表单的数据集的值必须为 ASCII 字符；而 Post 支持整个 ISO10646 字符集。
Get 执行效率却比 Post 方法好。Get 是 form 提交的默认方法。

文档传送门：https://github.com/axios/axios

<input type="button" value="get请求" class="get" />
<input type="button" value="post请求" class="post" />
<script>
  /*
            接口1:随机笑话
            请求地址:https://autumnfish.cn/api/joke/list
            请求方法:get
            请求参数:num(笑话条数,数字)
            响应内容:随机笑话
        */
  document.querySelector(".get").onclick = function () {
    axios
      .get("https://autumnfish.cn/api/joke/list?num=6")
      // axios.get("https://autumnfish.cn/api/joke/list1234?num=6")
      .then(
        function (response) {
          console.log(response);
        },
        function (err) {
          console.log(err);
        }
      );
  };
  /*
            接口2:用户注册
            请求地址:https://autumnfish.cn/api/user/reg
            请求方法:post
            请求参数:username(用户名,字符串)
            响应内容:注册成功或失败
         */
  document.querySelector(".post").onclick = function () {
    axios
      .post("https://autumnfish.cn/api/user/reg", { username: "盐焗西兰花" })
      .then(
        function (response) {
          console.log(response);
          console.log(this.skill);
        },
        function (err) {
          console.log(err);
        }
      );
  };
</script>

ES6

什么是 ES6？

ECMAScript 6（以下简称 ES6）是 JavaScript 语言的下一代标准，已经在 2015 年 6 月正式发布了。Mozilla 公司将在这个标准的基础上，推出 JavaScript 2.0。ECMA Script,JavaScript 的语言标准。

优点：

提升 JS 编写大型的复杂应用程序的能力（这次升级加入了模块化的概念、细化和优化语法、封装了一些方法）

缺点：

对浏览器存在兼容性问题，可以使用 Bable：ES6->ES5（转换器）

let

和 var 关键字的用法基本一致，没有变量提升，建议用 let

变量提升就好比你先使用变量后定义，编译时会自动将变量定义那段代码上移

模板字符串

使用``包裹文本，在需要替换的位置使用${}占位，并填入内容即可

对象简化赋值

如果属性名和变量名相同，可以简写，方法可以省略 function 关键字

1	// 简写前 params:{ id:id } // 简写后 params:{ id }

箭头函数

function 省略掉，替换为 =>

参数只有一个时，可以省略 ()

函数体只有一行时，可以省略 {}

函数体只有一行，并且有返回值时，如果省略了{}，必须省略 return

箭头函数的 this

创建时的 this 是谁，运行的时候 this 就是谁

单文件组件

后缀名是 .vue ,可以同时编写结构，逻辑和样式

template 标签中写结构，例如div

script 标签中写逻辑

style 标签中写样式

快速原型开发

环境配置

安装 Node.js 全部使用默认的设置，一路下一步即可

打开命令行工具，输入命令 node –v 以及 npm -v 检查是否安装成功

通过命令 npm install -g @vue/cli-service-global 安装一个小工具

基本使用

保证环境配置成功之后，在 .vue 文件所在的路径下打开终端输入 vue serve <FileName>，等待解析，然后在浏览器访问出现的地址即可

注意：

template 中必须有一个根节点，比如div
script 中的 data 写成函数，内部返回一个对象
如果要使用写好的样式，直接 import 即可

vue-cli（脚手架）

帮你创建项目基本结构的工具，帮你整合了很多东西，我们不在需要自己一步一步的搭建这些了。

环境配置

保证 Node.js 安装成功的情况下，通过命令npm install -g @vue/cli安装一个小工具

如果失败了：

先输入npm install -g cnpm安装一个镜像下载工具（cnpm）

成功之后再输入cnpm install -g @vue/cli通过刚刚安装的工具来安装 vue-cli

项目创建及运行

在想要创建项目的文件夹下输入 vue create 项目名，调整一下设置，然后回车。如果成功了，依次输入最后出现的提示代码，稍等片刻，在浏览器中输入出现的地址即可访问。

如果有写好的项目，然后输入npm run serve命令运行即可

文件结构

public：内含网站 icon 图标，页面模板 index

src：用来放网站绝大多数资源

assets：静态资源，如：图片，CSS 文件
componets：页面组件
App.vue：顶级页面组件

vue-router

管理多个组件切换关系，用它可以做 SPA（Single Page Application 单页面应用）

安装

在项目的根目录打开终端，通过命令npm install vue-router下载

用法：在main.js中

导入
use 一下
创建路由
挂载到 Vue 实例上

import VueRouter from 'vue-router' Vue.use(VueRouter) import XXX from
'./XXX/XXX.vue' const router = new VueRouter({ routes: [ { path: '/XXX',
component: XXX }, ] }) new Vue({ render: h => h(App), // 挂载到Vue示例上 router
}).$mount('#app')

配置规则

通过routes属性配置地址和路由管理的组件关系

导入组件
routes 属性中进行配置关系
path：设置地址
component：设置组件
可以配置多个

路由出口

希望匹配到的组件显示在哪里，就在哪里设置一个router-view标签

形如：<router-view></router-view>

声明式导航

通过 router-link 标签设置to属性为地址可以实现点击切换

形如：<router-link to="/XXX"></router-link>

编程式导航

组件中通过this.$router.push(地址)可以通过代码实现切换，还可以this.$router.replace(地址)表示页面不可返回

也可以直接@click="$router.push('/XXX')"

路由传参

在地址的后面写上?分隔

通过key=val1&key2=val2的方式添加参数

组件中通过 this.$route.query 访问对应的 key 即可获取数据

Element-UI (Vue 3.x)

饿了么前端推出的 Vue 组件库，很多常用的功能已经写好了，可直接用。Element-UI 官方文档

安装

在项目的根目录打开终端，通过命令下载npm install element-plus --save

更改main.js文件：

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

// Element-UI
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

createApp(App).use(store).use(router).use(ElementPlus).mount('#app')

其它命令，自行尝试，一般以上配置即可
vue add element-plus
cnpm install vue-cli-plugin-element-plus

介绍

el-container：构建整个⻚⾯框架。
el-aside：构建左侧菜单。
el-menu：左侧菜单内容，常⽤属性：
:default-openeds：默认展开的菜单，通过菜单的 index 值来关联。
:default-active：默认选中的菜单，通过菜单的 index 值来关联。
el-submenu：可展开的菜单，常⽤属性：
index：菜单的下标，⽂本类型，不能是数值类型。
template：对应 el-submenu 的菜单名。
i：设置菜单图标，通过 class 属性实则。
- el-icon-message
- el-icon-menu
- el-icon-setting
el-menu-item：菜单的⼦节点，不可再展开，常⽤属性：
index：菜单的下标，⽂本类型，不能是数值类型。

表单数据校验

定义 rules 对象，在 rules 对象中设置表单各个选项的校验规则

1 2	rules: { name: [ { required: true, message: 'error', trigger: 'blur' }, { min: 3, max: 5, message: '⻓度在 3 到 5 个字符', trigger: 'blur' } ] }

required：'true', 是否为必填项

message：'error', 提示信息

trigger：'blur'，触发事件

部署网站

GitHub

在<Root>下运行 cmd 并输入以下命令

git init  #初始化
git add .  #上传所有文件
git commit -m "<Custom>"  #提交时的注释，例如："update"
git remote add origin <RepoGit>  #连接你仓库的Git地址，使Git Bash知道代码要上传至哪个仓库
git branch -M <BranchName>  #将默认master分支名改为你自己设置的
#若第一次提交要加上"-u"，如下，这里推荐分支名为"Source"
git push -u origin <BranchName>
#若提交失败，显示：error: failed to push some refs to，则加上"-f"来强制提交
git push [-u] origin <BranchName> -f

再输入npm run build打包 Vue 项目，此时项目目录下会多出一个dist目录
Git 三连将 dist 推送到远程仓库（默认为 master 分支）
输入git subtree push --prefix dist origin gh-pages将dist目录推送到远程的gh-pages分支。（若远程没有gh-pagse分支则会新建gh-pagse分支然后再推送）
备注：此处只能是gh-pages分支，才能使用GitHub pages功能
登录远程 GitHub 仓库，通过setting -> github pages -> source 将gh-pages设置为GitHub pages 的source
可以直接访问链接看网站了

注意：网站每次更新后，需要执行npm run build命令，再上传到仓库

Vercel

使用背景：
静态站点完成以后，需要部署到线上，如果使用传统的部署方式，每次代码更新都需要在本地重新打包构建，然后替换服务器上的代码包，这种方式对于更新不频繁的站点是可取的。一旦站点更新的频繁，这种方式就很繁琐，很费人力。这里采用Vercel + Github方式部署。
优势：
Vercel + Github部署，一旦Github上的代码更新了，会自动触发Vercel重新打包构建，从而保证线上线下功能同步，大大地简化部署流程。
缺陷：
Vercel适合静态应用的构建部署，不适合需要从外部获取动态数据的网站，那需要用到服务器

确保已将本地代码上传到github仓库。
登录 Vercel 账号 👉 导入 GitHub 仓库 👉 点击部署等等一系列无脑操作，即可访问了

问题合集

记录了一些报错等等五花八门的问题

更改端口号（3.x）

在项目根目录新建文件vue.config.js

输入以下代码：

module.exports = {
    devServer: {
        port:8080, // 启动端口号
  },
};

其中port为端口号，可自定义改

Vue 版本更新
先卸载 vue：npm uninstall vue-cli -g
如果卸载不了就：where vue，通过文件路径将其手动删除
再安装：cnpm install -g @vue/cli

img标签动态绑定src不显示本地图片

用将图片路径放入require()中。

export default {
    data() {
        return {
            avatar: require(<Custom>),
        };
    },
}

报错合集

Module not found: Error: Can't resolve 'sass-loader'
1
2
npm install sass-loader -D
npm install node-sass -D
sass-loader的作用
加载 SASS / SCSS 文件并将其编译为 CSS。
使用 css-loader 或 raw-loader 将其转换为JS模块，然后使用 ExtractTextPlugin 将其提取到单独的文件中。
node-sass的作用
用于 webpack 的节点加载项
sass-loader及node-sass的详细介绍情查看官方的中文文档，如下是其对应的官网地址。
访问图片403报错
在HTML代码的head中添加一句<meta name="referrer" content="no-referrer" />即可
原理分析：

http请求体的header中有一个referrer字段，用来表示发起http请求的源地址信息，这个referrer信息是可以省略但是不可修改的，就是说你只能设置是否带上这个referrer信息，不能定制referrer里面的值。

服务器端在拿到这个referrer值后就可以进行相关的处理，比如图片资源，可以通过referrer值判断请求是否来自本站，若不是则返回403或者重定向返回其他信息，从而实现图片的防盗链。上面出现403就是因为，请求的是别人服务器上的资源，但把自己的referrer信息带过去了，被对方服务器拦截返回了403。

在前端可以通过meta来设置referrer policy(来源策略)，具体可以设置哪些值以及对应的结果参考这里。所以针对上面的403情况的解决方法，就是把referrer设置成no-referrer，这样发送请求不会带上referrer信息，对方服务器也就无法拦截了。

浏览器中referrer默认的值是no-referrer-when-downgrade，就是除了降级请求的情况以外都会带上referrer信息。降级请求是指https协议的地址去请求http协议，所以上面403的情况还有另一种解决方法就是，请求的图片地址换成http协议，自己的地址使用http协议，这样降级请求也不会带上referrer。

技巧合集

可参考以下代码

html,
body {
    margin: 0;
    padding: 0;
}
#content {
    margin: 100px auto;
    padding: 25px;
    width: 1330px;
    min-height: calc(100vh - 300px);
}
#footer {
    width: 100%;
    height: 100px; /*脚部的高度*/
    background: #eee;
    clear: both; /*清除浮动*/
}

router-link to 动态赋值

大概可以参考以下代码

<template>
    <div v-for="link in links">
        <router-link :to="link.address"> {{link.name}} </router-link>
    </div>
</template>

<script>
  export default {
    data: () => ({
      links: [
        {
          name: "首页",
          address: "/",
        },
        {
          name: "关于我们",
          address: "/about",
        },
      ],
    }),
  };
</script>

配置 404 页面

打开index.js文件，也就是配置路由的 JS 文件

import Vue from "vue";
import Router from "vue-router";
import notfount from "@/components/404";
Vue.use(Router);

export default new Router({
  routes: [
    {
      path: "*",
      name: "404页面",
      component: notfount,
    },
  ],
});

或者（推荐）

import Vue from "vue";
import Router from "vue-router";
Vue.use(Router);

const routes = [
  {
    path: "*",
    name: "404页面丢失",
    component: () => import("@/components/404"),
  },
];

const router = new VueRouter({
  routes,
});

如果是Vue3.x版本，则将path: "*"写成path: "/:pathMatch(.*)*"

解决跨域问题

更改/新建vue.config.js文件：

module.exports = {
  devServer: {
    port: 8060, // 启动端口号
    proxy: {                 //设置代理，必须填
      '/api': {              //设置拦截器  拦截器格式   斜杠+拦截器名字，名字可以自己定
        target: 'http://localhost:8888',     //代理的目标地址
        changeOrigin: true,              //是否设置同源，输入是的
        pathRewrite: {                   //路径重写
          '/api': ''                     //选择忽略拦截器里面的单词
        }
      }
    }
  }
}

新建<Root>/src/utils/request.js文件：

import axios from 'axios'

const request = axios.create({
	baseURL: '/api',  // 注意！！ 这里是全局统一加上了 '/api' 前缀，也就是说所有接口都会加上'/api'前缀在，页面里面写接口的时候就不要加 '/api'了，否则会出现2个'/api'，类似 '/api/api/user'这样的报错，切记！！！
    timeout: 5000
})

// request 拦截器
// 可以自请求发送前对请求做一些处理
// 比如统一加token，对请求参数统一加密
request.interceptors.request.use(config => {
    config.headers['Content-Type'] = 'application/json;charset=utf-8';
  
 // config.headers['token'] = user.token;  // 设置请求头
    return config
}, error => {
    return Promise.reject(error)
});

// response 拦截器
// 可以在接口响应后统一处理结果
request.interceptors.response.use(
    response => {
        let res = response.data;
        // 如果是返回的文件
        if (response.config.responseType === 'blob') {
            return res
        }
        // 兼容服务端返回的字符串数据
        if (typeof res === 'string') {
            res = res ? JSON.parse(res) : res
        }
        return res;
    },
    error => {
        console.log('err' + error) // for debug
        return Promise.reject(error)
    }
)

export default request

设置每个页面的Title

在src\router\index.js文件中添加：

const routes = [
    {
        path: '/login',
        name: '登录',
        component: () => import("../views/Login.vue"),
    }
]

在src\main.js文件中添加：

router.beforeEach((to, from, next) => {
  /* 路由发生变化修改页面title */
  if (to.name) {
    document.title = to.name + " | <Custom>"
  }
  next()
})

Swiper轮播图

鉴于Element-Plus里的走马灯Carousel组件渲染图片速度太慢，于是我选择用Swiper

可参考如下代码：

<template>
  <!-- 导航栏 -->
  <Header />
  <div class="home">
    <!-- 首页轮播图 Swiper -->
    <div class="swiper">
      <div class="swiper-wrapper">
        <div class="swiper-slide" v-for="img in imgs">
          <img :src="img.imgsrc" alt />
        </div>
      </div>
    </div>
    <!-- 分页器 Pagination -->
    <div class="swiper-pagination"></div>
</template>

<script>
import request from "@/utils/request";
import Swiper from "../static/js/swiper-bundle.min.js"
export default {
  name: "Home",
  data() {
    return {
      imgs: {},
    }
  },
  methods: {
    showRotationMap() {
      request.get('/rm').then(res => {
        this.imgs = res.data
      })
    },
    // 首页轮播图 Swiper
    showSwiper() {
      var swiper = new Swiper('.swiper', {
        autoplay: true,
        delay: 3000,
        width: window.innerWidth,
        direction: 'vertical',
        grabCursor: true,
        pagination: {
          el: '.swiper-pagination',
        },
      });
    },
  },
  created() {
    this.showRotationMap()
  },
  mounted() {
    this.showSwiper()
  },
}
</script>

<style scoped>
/* 引入swipercss */
@import url("../../node_modules/swiper/swiper-bundle.css");
.swiper {
  height: 510px;
  overflow: hidden;
}
.swiper img {
  object-fit: cover;
}
</style>

Echarts插件

导入组件
cnpm install --save echarts

单文件导入：

<template>
  <!-- 默认宽高为0，故需要设置 -->
  <div ref="mychart" id="echarts"/>
</template>

<script>
// 1.引用echarts
import * as echarts from "echarts";
export default {
  mounted() {
    // 2.初始化
    let myEcharts = echarts.init(this.$refs.mychart);
    // 3.设置数据
    let xData = ["2021", "2022", "2023"];
    let yData = [400, 600, 500];
    // 4.设置配置项
    let option = {
      title: {
        //标题
        text: "主标题",
      },
      xAxis: {
        //横坐标
        data: xData,
      },
      yAxis: {
        //纵坐标
      },
      series: [
        //系列 配置图表类型
        {
          name: "销量",
          type: "bar", //系列类名
          data: yData,
        },
      ],
    };
    // 5.设置图表、绘制图表
    myEcharts.setOption(option);
  },
};
</script>

<style scoped>
#echarts {
  height: 400px;
  width: 600px;
}
</style>

返回上一页面 | 刷新页面

1 2	this.$router.go(-1); this.$router.go(0);

参考资料

文档：

视频：

☕欲知后事如何，

且听下回分解🍵

Vue 基础

el: 挂载点

data: 数据对象

methods: 方法

v-text

v-html

v-on | @

v-show

v-if

v-bind | :

v-for

v-model

父组件传值给子组件

网络应用

axios

ES6

let

模板字符串

对象简化赋值

箭头函数

箭头函数的 this

单文件组件

快速原型开发

环境配置

基本使用

vue-cli（脚手架）

环境配置

项目创建及运行

文件结构

vue-router

安装

配置规则

路由出口

声明式导航

编程式导航

路由传参

Element-UI (Vue 3.x)

安装

介绍

表单数据校验

部署网站

GitHub

Vercel

问题合集

报错合集

技巧合集

将页脚Footer固定在网页底部

router-link to 动态赋值

配置 404 页面

解决跨域问题

设置每个页面的Title

Swiper轮播图

Echarts插件

返回上一页面 | 刷新页面

参考资料