Vue
文章平均质量分 53
易用、灵活、高效
半度℃温热
关注最新技术问题并持续维护更新
展开
-
vue3中keep-alive的使用及结合transition使用
# 正确用法1. 在组件中使用(这里结合了 transition 内置动画组件 )```javascript原创 2023-08-29 15:29:16 · 2153 阅读 · 1 评论 -
Vue导出当前页面为PDF文件
Vue导出当前页面为PDF文件。# 下载插件```javascriptnpm install html2canvas --savenpm install jspdf --save```# 创建导出函数文件htmlToPdf.js```javascript// 导出页面为PDF格式import html2Canvas from 'html2canvas'import JsPDF from 'jspdf'export default {}原创 2023-01-06 15:30:39 · 590 阅读 · 1 评论 -
vue中实现导出、下载文件
Api// 导出/下载import request from './request';export default { exportData(params) { return request.post('/export', params, { responseType: 'blob' }); },}注意:responseType: ‘blob’下载/导出函数export function downLoad(res, filename) { // res原创 2022-04-13 18:42:32 · 6591 阅读 · 4 评论 -
vue中使用mockjs模拟接口
效果图安装npm install mockjs --save // 三选一就可以了cnpm install mockjs --saveyarn add mockjs新建mock目录 mock目录下新建index.js和json文件 mock下的index文件,注意每改接口后都要重启才能生效// 引入外部资源const fs = require('fs')const path = require('path')const Mock = require('mockjs')原创 2021-07-22 19:54:28 · 1718 阅读 · 8 评论 -
vue中添加水印效果
效果图创建warterMark.js文件 在src 目录下创建utils文件,在utils里新建warterMark.js文件let watermark = (str) => { let id = '1.23452384164.123412415' if (document.getElementById(id) !== null) { document.body.removeChild(document.getElementById(id)) } let ca原创 2021-07-21 16:22:08 · 1169 阅读 · 1 评论 -
vue格式化时间
效果图简单实用,不需要下载插件,在项目中也可以这样用<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>格式化时间</title> <style>原创 2021-07-17 13:50:20 · 1151 阅读 · 0 评论 -
vue中两种history和hash模式的使用
vue2.0中的history和hash模式 1. history模式import Vue from 'vue';import Router from 'vue-router';Vue.use(Router);const router = new Router({ mode: 'history', routes: [ { path: '/', name: '', component: '' } ]}) 2. hash模式import Vue f原创 2020-11-26 19:37:36 · 5616 阅读 · 0 评论 -
vue3.0常用eslint配置详解 .eslintrc.js
规则值" off " 或者 0,关闭" warn " 或者 1,警告" error " 或者 2,报错.eslintrc.js配置module.exports = { root: true, // 此项是用来告诉eslint找当前配置文件不能往父级查找 env: { // 预定义的全局变量,这里是浏览器环境 amd: true, es6: true, commonjs: true, node: true, jquery: true, br原创 2020-10-28 16:02:56 · 7270 阅读 · 2 评论 -
vue3.0常用配置详解 vue.config.js
在项目文件下的根目录创建 vue.config.jsmodule.exports = { baseUrl: '', // 从 Vue CLI 3.3 起已弃用,请使用 publicPath publicPath: process.env.NODE_ENV === 'production' ? '/' : '/', // 输出文件目录 outputDir: 'dist', // 静态资源目录 (js, css, img, fonts) assetsDir: 'assets', /原创 2020-10-28 15:24:02 · 2302 阅读 · 0 评论 -
vue中后台管理系统的权限控制
效果图下载 这里是用到的一些插件npm install axios --savenpm install element-ui --savenpm install stylus --savenpm install stylus-loader --save引入 在 mian.js 中引入,并写入路由权限拦截import Vue from 'vue'import A...原创 2019-08-27 17:44:31 · 3292 阅读 · 1 评论 -
vue移动端的真机测试
Vue2.0 在 package.json 文件里加入 --host 0.0.0.0,需要重新运行 npm run dev{ "name": "", "version": "1.0.0", "description": "A Vue.js project", "author": "", "private": true, "scripts": {...原创 2019-07-17 15:05:36 · 1814 阅读 · 1 评论 -
vue2.0的生命周期和钩子函数深度解析
一、理清Vue的生命周期和钩子函数原创 2019-04-18 08:48:11 · 2336 阅读 · 3 评论 -
vue双向数据绑定的原理解析
简述 每当面试官问到Vue数据双向绑定原理的时候,我们都会简单的说:Vue 内部通过 Object.defineProperty 方法属性拦截的方式,把data 对象里每个数据的读写转化成 getter / setter,当数据变化时通知视图更新。虽然一句话把大概原理概括了,但是其内部的实现方式还是值得深究的,本文就以通俗易懂的方式剖析 Vue 内部双向数据绑定原理的实现过程思路 ...原创 2019-06-26 17:13:14 · 4138 阅读 · 2 评论 -
vue router中hash模式和history模式的区别
面试问答 hash 模式与 history 模式的区别,这个也是面试常问的问题,不要小看这道题其实问到这里的时候那个面试官应该是个大牛,开发经验丰富,这个题其实就是考验你的开发经验是否属实。 小白回答: hash 模式 url 带 # 号,history 模式不带 # 号。 大牛解答: hash 模式 url 里面永远带着 # 号,我们在开发当中默认使用这个模式。那么什么时...原创 2019-06-25 17:48:11 · 2916 阅读 · 1 评论 -
vue的自定义指令解析
概念 指令只是一种可以附加到DOM元素的微命令(tiny commands)。它们通常以 “v-” 作为前缀,以方便 Vue 知道你在使用一种特殊的标记,从而确保语法的一致性。 如果你需要对 HTML 元素的低级别 ( low-level ) 访问来控制一些行为,它们通常很有用钩子函数bind 只调用一次,指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置inse...原创 2019-05-25 17:20:14 · 2708 阅读 · 1 评论 -
vue中keep-alive的使用及详解
概念 keep-alive 是 Vue 的内置组件,当它包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们。和 transition 相似,keep-alive 是一个抽象组件:它自身不会渲染成一个 DOM 元素,也不会出现在父组件链中。作用 在组件切换过程中将状态保留在内存中,防止重复渲染DOM,减少加载时间及性能消耗,提高用户体验性原理 在 created 函数...原创 2019-05-19 09:03:35 · 120525 阅读 · 35 评论 -
Vue中的Filter过滤器
局部过滤器<template> <div class="home"> <div class="time">{{item.rateTime | formatDate}}</div> // 使用过滤器 </div></template><script>import Moment from ...原创 2019-05-18 17:02:21 · 1368 阅读 · 1 评论 -
vue项目中实现登录拦截
一、路由拦截如果开发的是后台管理项目,希望必须登录才能访问其他页面的话,就用下面的这种方式进行拦截import Vue from 'vue'import Router from 'vue-router'import Home from '@/components/Home/home'import Login from '@/components/Login/login'Vue.u...原创 2019-04-29 08:46:13 · 8800 阅读 · 8 评论 -
vue中vuex的详解
概念 Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。安装HTML 中使用 script 标签引入<script src="vue.js"></script><script src="vuex.js"></script>...原创 2019-04-26 12:09:41 · 46598 阅读 · 5 评论 -
vue中watch的详解
Watch概述 一个对象,键是需要观察的表达式,值是对应回调函数。值也可以是方法名,或者包含选项的对象。Vue 实例将会在实例化时调用 $watch(),遍历 watch 对象的每一个属性。简单的监听<body><div id="app"> <input type="text" v-model="num"></div><...原创 2019-04-23 12:02:11 · 99665 阅读 · 15 评论 -
vue混入的详解
简介 混入 (mixins) 是一种分发 Vue 组件中可复用功能的非常灵活的方式。混入对象可以包含任意组件选项。当组件使用混入对象时,所有混入对象的选项将被混入该组件本身的选项。局部混入1. 钩子函数合并 同名钩子函数将混合为一个数组,因此都将被调用。另外,混入对象的钩子函数将在组件自身钩子函数之前调用<body> <div id="app">...原创 2019-05-30 11:51:36 · 16828 阅读 · 0 评论