课程分类

例如对时间做格式化处理，可以使用过滤器 安装moment sh yarn add moment 自定义过滤器格式化时间 html template div p{{ date }}/p p{{ date…

mixin可以将重复的js代码拆分出去，在需要使用的文件中引用即可。 简单实例 新建src/mixins/myMixin.js文件 js const myMixin…

什么是自定义指令 除了默认设置的核心指令( vmodel 和 vshow ), Vue 也允许注册自定义指令。我们看到的 v 开头的行内属性，都是…

例如有如下代码 html template div h1My title/h1 Some text content TODO: Add tagline /div /template 对应的DOM树为： 每个元素…

安装axios sh yarn add axios 读取接口 html template ul li vfor="course in courses" :key="course.id"{{ course.name }}/li /ul /template script…

封装 新建src/utils/request.js文件 js import axios from "axios"; // 创建axios实例 const service = axios.create({ baseURL: process.env.VUEAPPBASEAPI, // withCredentials: true, // 当跨…

请求文件 新建 src/api目录，里面添加存放所有请求的各个文件，例如 articles.js、users.js等 js import request from '@/utils/request' // 查询列表…

路由文件 新建的Vue项目，都包含如下路由文件 src/router/index.js js import Vue from 'vue' import VueRouter from 'vuerouter' import Home from '../views…

总结 方法 | 说明 | routerlink to="/about" | HTML中，链接到/about routerlink :to="{ path: '/about'}" | HTML中，链接到/about routerlink :to="{ name…

未开启history模式，About组件的路径为 http://localhost:8080//about 开启history模式后，About组件路径为 http://localhost:8080/about 没有了奇怪…

src/router/index.js js import Vue from 'vue' import VueRouter from 'vuerouter' import Home from '../views/Home.vue' import ArticlesHome from '../views/articles/Home.vue' import ArticlesList…

什么是导航守卫 导航守卫，也可以叫路由守卫，“导航”表示路由正在发生改变。vuerouter提供的导航守卫主要用来通过跳转或取消…

说明 在路由中增加了meta: { requiresAuth: true }，这表示这个路由需要认证用户登录了才能访问。 通过遍历 $route.matched 来检查路由…

创建项目 sh vue ui 或 vue create demo 启动服务 用法： sh yarn serve 选项： sh open 在服务器启动时打开浏览器 copy 在服务器启动…

配置方法 项目根目录下新建 vue.config.js文件 js const { defineConfig } = require("@vue/cliservice"); module.exports = defineConfig({ transpileDependencies: true, devServer: { proxy: { "/api": { target: process…

定义 修改vue.config.js js const path = require('path') function resolve(dir) { return path.join(dirname, dir) } module.exports = { // 其他配置... configureWebpack: { resolve: { alias: { '@': resolve…

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证…

最简单的store 修改src/store/index.js文件 js import Vue from "vue"; import Vuex from "vuex"; Vue.use(Vuex); export default new Vuex.Store({ state…

单一状态树 Vuex 使用单一状态树，它作为一个“唯一数据源 (SSOT (opens new window))”而存在。这也意味着，每个应用将仅仅包含一个…

Getter可以认为是store的计算属性 使用方法 修改src/store/index.js js import Vue from 'vue'; import Vuex from 'vuex'; Vue.use(Vuex); export…