![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
vue
教练我真的想敲代码
这个作者很懒,什么都没留下…
展开
-
vue 解决两次访问相同路由地址报错
在路由的index.js里添加const originalPush = VueRouter.prototype.pushVueRouter.prototype.push = function push(location) { return originalPush.call(this, location).catch(err => err)}原创 2020-09-21 23:13:47 · 398 阅读 · 0 评论 -
利用Vue中keep-alive,快速实现页面缓存 一郭鲜 一郭鲜
https://zhuanlan.zhihu.com/p/96740001<div id="app" class='wrapper'> <keep-alive> <!-- 需要缓存的视图组件 --> <router-view v-if="$route.meta.keepAlive"></router-view> </keep-alive> <!-- 不需要缓存的视图原创 2020-09-21 21:16:09 · 189 阅读 · 0 评论 -
180Vue中vue.config的配置
module.exports = { // 部署生产环境和开发环境下的URL:可对当前环境进行区分,baseUrl 从 Vue CLI 3.3 起已弃用,要使用publicPath // baseUrl: process.env.NODE_ENV === 'production' ? './' : '/' publicPath: process.env.NODE_ENV === 'production' ? '/public/' : './', // 输出文件目录:在npm原创 2020-08-25 21:14:24 · 113 阅读 · 0 评论 -
vue router 一个路由对应多个组件+【子路由带/就是代表当前这个路由访问。不带/表示拼接上父路由的路径】
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document&.原创 2020-08-22 23:16:53 · 591 阅读 · 0 评论 -
178Vue生命周期含义介绍
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document&.原创 2020-08-20 13:37:21 · 134 阅读 · 0 评论 -
176-vue 使用video标签总结
https://www.jianshu.com/p/d79aadef36e4原创 2020-08-18 15:40:39 · 355 阅读 · 0 评论 -
172Vue-node.js 的express服务器报 413 payload too large
修改后可以正常上传图片原创 2020-08-15 20:12:18 · 297 阅读 · 0 评论 -
169Vue-毫秒时间数据处理、filters过滤器(全局、局部)date
根目录下main.js// 全局过滤器Vue.filter('dateFormat', function (originVal) { // originVal要处理的时间数据 // 得到要处理的时间对象 const dt = new Date(originVal) // 年月日 const y = dt.getFullYear() const m = (dt.getMonth() + 1 + '').padStart(2, '0') const d = (dt.getDate原创 2020-08-14 22:38:14 · 200 阅读 · 0 评论 -
168Vue-vue-table-with-tree-grid全局注册=141
main.js文件全局注册原创 2020-08-13 14:45:06 · 117 阅读 · 0 评论 -
167Vue-展开运算符(...)合并数组 、 合并对象
1、展开运算符(…)合并数组 、 合并对象// concat let a1 = [1,2,3]; let a2 = [4,5,6,1,2,3]; console.log([...a1,...a2]);//[1, 2, 3, 4, 5,6, 1, 2, 3]原文链接原创 2020-08-13 13:11:24 · 515 阅读 · 0 评论 -
166Vue-scope.row+正则验证
<template> <div> <!-- 面包屑导航区域 --> <el-breadcrumb separator-class="el-icon-arrow-right"> <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item> <el-breadcrumb-item>用户管理</el-brea原创 2020-08-12 20:56:06 · 543 阅读 · 0 评论 -
165Vue工程化2-eslint编译警告冲突、空格分号引号问题【待补全】、()调用问题
vscode格式化工具和eslint产生了冲突1、在项目根目录下创建.prettierrc{ "semi": false, 不会额外加分号 "singleQuote": true 单引号替换双引号}module.exports = { root: true, env: { node: true }, 'extends': [ 'plugin:vue/essential', '@vue/standard' ], rules: { '原创 2020-08-11 23:50:52 · 246 阅读 · 0 评论 -
164Vue工程化2-挂载路由导航守卫+退出清除token+axios请求拦截器添加携带token
router文件夹的index.js// 挂载路由导航守卫router.beforeEach((to, from, next) => { // to 将要访问的路径 // from 代表从哪个路径跳转而来 // next 是一个函数,表示放行 // next() 放行 next('/login') 强制跳转 if (to.path === '/login') return next() // 获取token const tokenStr = win原创 2020-08-11 23:19:23 · 245 阅读 · 0 评论 -
163Vue工程化2-axios导入$http
第二步// 设置请求根路径axios.defaults.baseURL = 'http://127.0.0.1:8888/api/private/v1/'// 使用 Vue.prototype.$http = axios; 进行配置于vue项目中,在页面中可使用this.$http.get('xxxx').then().catch()。Vue.prototype.$http = axios...原创 2020-08-11 23:02:25 · 240 阅读 · 0 评论 -
162Vue工程化2-element表单验证使用规则自定义+$ref+resetFields表单重置+$refs.ref名字可以获取到dom
:rules 对应表单验证规则原创 2020-08-11 18:36:20 · 408 阅读 · 0 评论 -
161Vue工程化2-Element-ui按需导入+使用 export 向外暴露的成员,只能使用 { } 的形式来接收,这种形式,叫做 【按需导出】
import Vue from 'vue'import { Button, Form, FormItem, Input, Message, Container, Header, Aside, Main, Menu, Submenu, MenuItem, Breadcrumb, BreadcrumbItem, Card, Select, Option, Row, Col, Table, TableColumn, Switch, Tooltip, Pagination, Dialog, Tag, Messag原创 2020-08-11 16:04:02 · 158 阅读 · 0 评论 -
160Vue工程化2-全局样式表global.css
原创 2020-08-11 15:01:09 · 278 阅读 · 0 评论 -
159Vue工程化2-vue项目导入less-loader【在开发依赖中安装】+scoped原理
安装less,less-loader处理less文件其他的loader需要安装的东西可以参照154传送门原创 2020-08-11 14:35:03 · 405 阅读 · 0 评论 -
158Vue工程化2-cookie、session和token使用环境【待补全实现代码】
5.实现登录功能A.登录状态保持如果服务器和客户端同源,建议可以使用cookie或者session来保持登录状态如果客户端和服务器跨域了,建议使用token进行维持登录状态。B.登录逻辑:在登录页面输入账号和密码进行登录,将数据发送给服务器服务器返回登录的结果,登录成功则返回数据中带有token客户端得到token并进行保存,后续的请求都需要将此token发送给服务器,服务器会验证token以保证用户身份。...原创 2020-08-11 14:09:55 · 198 阅读 · 0 评论 -
157Vue工程化2-配置后台项目
安装phpStudy并导入mysql数据库数据验证导入是否完成B.安装nodeJS,配置后台项目,从终端打开后台项目vue_api_server然后在终端中输入命令安装项目依赖包:npm install安装nodejs见084C.使用postman测试api接口...原创 2020-08-11 13:09:51 · 129 阅读 · 0 评论 -
156Vue工程化2-前端项目初始化步骤【git公钥私钥】
添加链接描述2.项目初始化A.安装Vue脚手架B.通过脚手架创建项目C.配置路由D.配置Element-UI:在插件中安装,搜索vue-cli-plugin-element【abcd见155添加链接描述】E.配置Axios:在依赖中安装,搜索axios(运行依赖)F.初始化git仓库G.将本地项目托管到github或者码云中E 配置Axios:在依赖中安装,搜索axios(运行依赖)F.初始化git仓库...原创 2020-08-10 22:49:01 · 181 阅读 · 0 评论 -
155Vue工程化-webpack、Vue单文件组件+代码高亮+在webpack中使用vue+打包发布+脚手架vueui+opentrue自动打开浏览器+elementui+端口设置vue.confi
12.Vue单文件组件传统Vue组件的缺陷:全局定义的组件不能重名,字符串模板缺乏语法高亮,不支持css(当html和js组件化时,css没有参与其中)没有构建步骤限制,只能使用H5和ES5,不能使用预处理器(babel)解决方案:使用Vue单文件组件,每个单文件组件的后缀名都是.vue每一个Vue单文件组件都由三部分组成1).template组件组成的模板区域2).script组成的业务逻辑区域3).style样式区域代码如下:<template> 组件代码区域原创 2020-08-10 17:17:05 · 204 阅读 · 0 评论 -
154Vue工程化-webpack概念模块化支持,代码压缩混淆+基本使用+安装+打包入口出口+自动打包
6.webpack的概念webpack是一个流行的前端项目构建工具,可以解决目前web开发的困境。webpack提供了模块化支持,代码压缩混淆,解决js兼容问题,性能优化等特性,提高了开发效率和项目的可维护性7.webpack的基本使用A.创建项目目录并初始化创建项目,并打开项目所在目录的终端,输入命令: npm init -yB.创建首页及js文件在项目目录中创建index.html页面,并初始化页面结构:在页面中摆放一个ul,ul里面放置几个li在项目目录中创建js文件夹,并在原创 2020-08-09 23:57:53 · 631 阅读 · 0 评论 -
153Vue工程化-ES6模块化规范+npx在NodeJS中安装babel+设置默认导入/导出export default,import
1.模块化的分类A.浏览器端的模块化 1).AMD(Asynchronous Module Definition,异步模块定义) 代表产品为:Require.js 2).CMD(Common Module Definition,通用模块定义) 代表产品为:Sea.jsB.服务器端的模块化 服务器端的模块化规范是使用CommonJS规范: 1).使用require引入其他模块或者包 2).使用exports或者module.exports导出模块成原创 2020-08-09 18:11:24 · 559 阅读 · 0 评论 -
152Vue-编程式导航$router.push\$router.go+back()
Vue-Router中常见的导航方式:this.$router.push("hash地址");this.$router.push("/login");this.$router.push({ name:'user' , params: {id:123} });this.$router.push({ path:"/login" });this.$router.push({ path:"/login",query:{username:"jack"} });this.$router.go( n );.原创 2020-08-09 14:29:38 · 289 阅读 · 0 评论 -
151Vue-router路由嵌套children+动态匹配路由$route.params+传参数props:true+命名路由
children<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> .原创 2020-08-09 13:39:14 · 512 阅读 · 0 评论 -
150Vue-Router路由概述+基本使用router-view占位符+重定向redirect
Vue Router简介它是一个Vue.js官方提供的路由管理器。是一个功能更加强大的前端路由器,推荐使用。Vue Router和Vue.js非常契合,可以一起方便的实现SPA斜体样式(single page web application,单页应用程序)应用程序的开发。Vue Router依赖于Vue,所以需要先引入Vue,再引入Vue RouterVue Router的特性:支持H5历史模式或者hash模式支持嵌套路由支持路由参数支持编程式路由支持命名路由支持路由导航守卫支持路由过原创 2020-08-09 12:37:37 · 4314 阅读 · 0 评论 -
149Vue-模拟router路由component占位符onhashchange监控哈希值变化
1.路由的概念路由的本质就是一种对应关系,比如说我们在url地址中输入我们要访问的url地址之后,浏览器要去请求这个url地址对应的资源。那么url地址和真实的资源之间就有一种对应的关系,就是路由。路由分为前端路由和后端路由1).后端路由是由服务器端进行实现,并完成资源的分发2).前端路由是依靠hash值(锚链接)的变化进行实现后端路由性能相对前端路由来说较低,所以,我们接下来主要学习的是前端路由前端路由的基本概念:根据不同的事件来显示不同的页面内容,即事件与事件处理函数之间的对应关系前端路原创 2020-08-09 11:22:36 · 500 阅读 · 0 评论 -
148Vue-axios、async、await
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><body> <script type="text/javascript" src="js/axios.js"></script> <script type="text/j.原创 2020-08-08 23:17:24 · 146 阅读 · 0 评论 -
147Vue-axios设置请求根路径+axios超时、token+use请求拦截器
axios设置请求根路径import axios from 'axios'// 设置请求根路径axios.defaults.baseURL = 'http://127.0.0.1:8888/api/private/v1/'<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head>原创 2020-08-08 18:23:42 · 661 阅读 · 0 评论 -
146Vue-axios第三方库使用+getpostputdelete参数传递
专门的一个第三方的库使用需要导入对应js库文件 <script type="text/javascript" src="js/axios.js"></script>基本使用参数传递get的params<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></he原创 2020-08-08 15:00:03 · 159 阅读 · 0 评论 -
145Vue-fetchAPI基于Promise来实现的+getpostputdelete参数传递+响应式json
基本用法<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><body> <script type="text/javascript"> /* Fetch API 基本用法 */ fetch('http://.原创 2020-08-08 13:59:18 · 276 阅读 · 0 评论 -
144Vue-异步编程Promise解决回调地狱+对象方法+实例方法
vue省掉了dom操作、所以原生ajax和jquery的ajax不适用与vue原创 2020-08-07 17:19:33 · 500 阅读 · 0 评论 -
143Vue-slot具名插槽
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><body> <div id="app"> <base-layout> <p slot='header'>标题信息</p> <p原创 2020-08-06 23:44:36 · 135 阅读 · 0 评论 -
142Vue-props父子兄弟组件之间传递值【蒙蒙蒙】
props 可以是数组或对象,用于接收来自父组件的数据。props 可以是简单的数组,或者使用对象作为替代,对象允许配置高级选项,如类型检测、自定义验证和设置默认值。你可以基于对象的语法使用以下选项:type:可以是下列原生构造函数中的一种:String、Number、Boolean、Array、Object、Date、Function、Symbol、任何自定义构造函数、或上述内容组成的数组。会检查一个 prop 是否是给定的类型,否则抛出警告。Prop 类型的更多信息在此。default:any为原创 2020-08-06 23:14:39 · 253 阅读 · 0 评论 -
141Vue-组件模板+组件命名方式、全局局部components
全局组件每一个组件都是独立的实例互不影响data是一个函数不同于对象函数相当于闭包,保证都有自己独立的环境组件注册注意事项1、组件参数的data值必须是函数2、组件模板必须是单个根元素【要有一个大的标签包裹所有的内容】3、组件模板的内容可以是模板字符串<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</tit原创 2020-08-06 20:50:23 · 322 阅读 · 0 评论 -
140Vue-vue中created与mounted的区别
添加链接描述原创 2020-08-06 17:06:37 · 112 阅读 · 0 评论 -
139Vue-数组动态处理响应式数据
数组的值通过vm.list[1] = ‘lemon’;修改不管用,不是响应式的,值不会体现在页面上<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><body> <div id="app"> <ul> <li原创 2020-08-06 14:19:46 · 169 阅读 · 0 评论 -
138Vue-带参数自定义指令directive、v-foucs
不带参数的参考api链接<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><body> <div id="app"> <input type="text" v-color='msg'> </div> &l原创 2020-08-05 22:38:47 · 232 阅读 · 0 评论 -
137Vue-表单
通过value和v-model结合<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> form div { height: 40px; line-height: 40px; } form di原创 2020-08-05 21:36:14 · 150 阅读 · 0 评论