m0_59878114的博客

vue中路由缓存问题产生的原因是什么？解决方式有哪些？

页面中引入外网的链接资源，会产生一个新的 http 请求。为了安全（URL里面可能包含用户信息），浏览器一般都会给这写请求头加上表示来源的 referrer 字段。 所以，此时我们需要隐藏外部连接中的 referrer ，在 head 标签中加入 meta ，代码如下： <meta name="referrer" content="no-referrer">...

1 、 安装npm install vue-video-player --save2、可以全局引入插件，也可以在需要用到该插件的组件内单独引入（二选一）【1】全局引用， 在main.js里面导入并引用import VideoPlayer from 'vue-video-player'import 'vue-video-player/src/custom-theme.css'import 'video.js/dist/video-js.css' Vue.use(VideoPlay

1 首先安转多语言的依赖包npm i vue-i18n@8.22.22 进行多语言设置// 导入 Vueimport Vue from 'vue'// 导入 vue-i18n 插件import VueI18n from 'vue-i18n'import locale from 'element-ui/lib/locale' // 导入 Element 语言配置插件import enLocale from 'element-ui/lib/locale/lang/en'...

1、下载 dayjs 并导入到当前组件中npm install dayjs --saveimport dayjs from 'dayjs'2、创建格式化入职日期的过滤器filters: { // 格式化入职日期的方法 formatTime(time) { return dayjs(time).format('YYYY-MM-DD') }}3、改造页面结构<el-table-column sortable label="入职时间"> &lt

1、创建一个js文件，将组件引入，操作如下// 引入组件import PageTools from '@/components/PageTools'// 创建数组，数组中是导入的组件模块const components = [ PageTools]export default { // 当我们在 Vue.use 方法中创建了一个 install 方法 // 方法会被自动调用，在调用的过程中，会将 Vue 作为参数传递给 install 方法 install(Vue) {.

1、创建一个js文件，将组件引入，操作如下//将组件引入到当前js文件中，进行注册import PageTools from '@/components/PageTools'export default { install(Vue) { Vue.component('PageTools', PageTools) }}2、将js文件引入到main.js中，在模块中使用Vue.use 注册import component from '@/components'..

方式一：路由传参 { path: '/search/:keywords', component: () => import('@/views/SearchResult') },获取方式：this.$route.params.keywords //李晨飞方式二：组件传参// 文章点击事件 articleListClickFn (artId) { this.$router.push({ path: ..

思路：搜索列表添加v-html="lightFn(str)"，将列表的内容传到lightFn方法中 this.kw是输入框里输入的内容 ig是匹配规则 lightFn (str) { const reg = new RegExp(this.kw, 'ig') return str.replace(reg, (substring) => { return `<span style="color:re...

情况1：对象+install方法const directiveObj = { install(Vue){ //vue函数相当于import Vue from 'vue' console.log(Vue) // 全局指令的方法 Vue.direvtive('fofo',{ inserter(el){ //el是原生的div标签 //往里获取到in

<!-- 搜索组件 --> <van-search placeholder="请输入搜索关键词" background="#007BFF" shape="round" @input="inputFn" v-model="kw" />// 输入框防抖 inputFn () { clearTimeout(this.timer) this.time.

方式一const newArr = [],this.Arr.forEach(str =>{ const index = newArr.findIndex(samllStr => smallStr === str) if(index === -1){ //搜素历史在newArr里没找到 newArr.push(str) }})console.log(newArr)方式二this.arr= Array.from(new .

语法：component: () => import('路由地址')路由懒加载 - 查看文档: 路由懒加载 | Vue Routerhttps://router.vuejs.org/zh/guide/advanced/lazy-loading.htmlimport Vue from 'vue'import VueRouter from 'vue-router'Vue.use(VueRouter)const routes = [ // redirect重定向 { path..

// 封装网络请求模块// 好处：寻找和调用方法// 好处2：易于未来替换 和 扩展import axios from 'axios'import { getToken, removeToken } from '../utils/token'import router from '../router/index'import { baseURL } from './global'// axios.create() 创建一个自定义的axios请求方法(填入相关的配置)const instan.

将代码补充到router路由文件里// 路由守卫router.beforeEach((to, from, next) => { // 判断本地有没有token const token = getToken() if (to.path !== '/login' && token === null) { next('/login')// 终端路由跳转，强制修改成/login 意思：强制切换页面到登录页 } else { next() }}).

适配步骤1、下载amfe-flexiblenpm iamfe-flexible2.到main.js引入import "amfe-flexible"3.下载postcss和postcss-pxtorem@5.1.1postcss: 后处理css, 编译翻译css代码postcss-pxtorem: 把css代码里所有px计算转换成renpm ipostcss postcss-pxtorem@5.1.14.根目录下创建po...

1.下载vant组件库npm ivant2.根据文档指引, 配置按需引入 Vant - Mobile UI Components built on Vuehttps://vant-contrib.gitee.io/vant/#/zh-CN/quickstart#yin-ru-zu-jian3.下载插件npm ibabel-plugin-import -D4.在babel.config.js-添加如下配置module.exports = { // ...省略了其...

1、下载这个插件到vscode中2、非常非常非常重要一定要把脚手架工程, 作为vscode根目录, 因为eslint要使用配置文件.eslintrc3、一定要配置插件监测的时机, 修改ESLint插件配置"eslint.run": "onType","editor.codeActionsOnSave": { "source.fixAll.eslint": true}...

import axios from 'axios'// axios.create() 创建一个自动以的axios请求方法（填入相关的配置）const instance = axios.create({ baseURL: 'http://geek.itheima.net', timeout: 5000 // 超过5秒判定超时})export default instance

目标: 组件基础使用场景: 组件底座(基本)样式不变, 插入的标签不同 传入数据用props, 传入标签用插槽术语: 对组件分发不同标签的一种技术(重要)口诀:1. 组件内, 使用slot占位2. 父组件上, 使用子组件, 标签夹着的地方传入具体标签替换到slot上目标: 插槽默认内容...

开发环境： vue2.6.11 + vue-cli4.5.13使用工具：vscode,vue脚手架使用技术：vue基础，axios案例描述：使用axios渲染数据，实现计算勾选商品的金额，勾选的数量，全选控制小选，小选控制全选，商品数量加减，手动输入商品数量步骤如下：项目初始化：创建项目名称，安装第三方模块 npm ibootstrapless less-loader@5.0.0 -D 按照需求, 把项目页面拆分成几个组...

<template> <div> <p>1. 获取原生DOM元素</p> <h1 id="h" ref="myH">我是一个孤独可怜又能吃的h1</h1> <p>2. 获取组件对象 - 可调用组件内一切</p> <Demo ref="de"></Demo> <p>3. vue更新DOM是异步的</p>.

<template> <div> <p>1. 获取原生DOM元素</p> <h1 id="h" ref="myH">我是一个孤独可怜又能吃的h1</h1> </div></template><script>// 目标: 获取组件对象// 1. 创建组件/引入组件/注册组件/使用组件// 2. 组件起别名ref// 3. 恰当时机, 获取组件对象expo.

首先需要下载axios（这里下载的是axios@5.0.0）npm iaxios@5.0.0axios({ method: '请求方式', // get post url: '请求地址', data: { // 拼接到请求体的参数, post请求的参数 xxx: xxx, }, params: { // 拼接到请求行的参数, get请求的参数 xxx: xxx }}).then(res => { console.log(res..

目标Vue 框架内置函数，随着组件的生命周期阶段，自动执行讲解作用: 特定的时间点，执行特定的操作场景: 组件创建完毕后，可以在created 生命周期函数中发起Ajax 请求，从而初始化 data 数据分类: 4大阶段8个方法 初始化 挂载 更新 ...

开发环境： vue2.6.11 + vue-cli4.5.13使用工具：vscode使用技术：vue基础，css案例描述：发起待办任务，勾选完成任务，查看任务状态，清除已完成的任务css代码如下： base.csshr { margin: 20px 0; border: 0; border-top: 1px dashed #c5c5c5; border-bottom: 1px dashed #f7f7f7;}.learn a { font-weight...

使用vue-cli创建的vue框架，代码如下App.vue<template> <div id="app"> <div class="container"> <!-- 顶部框模块 --> <div class="form-group"> <div class="input-group"> <h4>品牌管理</h4>

听普通侦语法:watch: { "被侦听的属性名" (newVal, oldVal){ }} 举例：<template> <div> <input type="text" v-model="name"> </div></template><script>export default { data(){ return ...

目标小选框都选中(手选), 全选自动选中分析:① 先静态后动态,② 循环生成复选框和文字, 对象的c属性和小选框的选中状态, 用v-model双向绑定③ 定义isAll计算属性, 值通过小选框们统计c属性状态得来代码如下：（使用vue-cli生成的框架结构）<template> <div> <span>全选:</span> <input type="checkbox" v-model=...

<template> <div> <p>{{ num }}</p> </div></template><script>export default { data(){ return { a: 10, b: 20 } }, // 计算属性: // 场景: 一个变量的值, 需要用另外变量计算而得来 /* 语法: computed.

口诀:数组变更方法, 就会导致v-for更新, 页面更新数组非变更方法, 返回新数组, 就不会导致v-for更新, 可采用覆盖数组或this.$set()这些方法会触发数组改变, v-for会监测到并更新页面 push() pop() shift() unshift() splice() sort() reverse() 这些方法不会触发v-for更新 sl...

安装@vue/cli全局模块包, 得到Vue命令, 以后创建Vue脚手架项目安装步骤1.全局安装@vue/cli模块包npm install -g @vue/cli2.查看Vue命令版本vue -V总结: 如果出现版本号就安装成功, 否则失败 创建项目1、创建项目# vue和create是命令, vuecli-demo是自己的文件夹名vue create vuecli-demo 2、...