![](https://img-blog.csdnimg.cn/20200902103548946.jpg?x-oss-process=image/resize,m_fixed,h_224,w_224)
vue
vue的使用
星良辰寻
没什么好介绍的,咸鱼Id一样
展开
-
vue 使用 ref 获取组件内的元素 canvas
组件注册写上ref=“qjt” <Psv :angle="angle" :url="url" v-if="psvShow" ref="qjt" :boolOne="psvReset"></Psv>获取$ellet canvas = this.$refs.qjt.$el.getElementsByTagName("canvas")[0];原创 2021-09-14 15:39:17 · 1823 阅读 · 0 评论 -
自定义指令 禁止拖动+鼠标样式为默认箭头样式
import Vue from 'vue';const stopDrag = Vue.directive('stopDrag', { inserted: function (el, binding, vnode) { el.style.cursor = 'default' let element = el; element.onmousedown = function (e) { e.stopPropagation()原创 2021-07-06 15:59:37 · 247 阅读 · 0 评论 -
vue中el-form resetFields()使用注意 (置空失效原因查找)
重置操作注意事项1.prop和model必填,ref必填:示例:重置代码:this.$refs[formName].resetFields();需要注意的是:(有时候置空不了的情况)1.当el-form在v-if里面的时候,需要等v-if的dom加载好了才可以置空:解决办法:这里就需要用到:this.$nextTick(()=>{ //在这里置空})2.在dialog内,赋值了之后又清空的导致的失效,这里参考的别的大神的文章赋值过后再清空,请点击移步你编辑时,原创 2021-06-28 11:56:07 · 9371 阅读 · 0 评论 -
el-table 组件化 复用 操作栏不一样
组件:<!-- Table组件 带勾选框 --><template> <div class='table'> <el-table ref="multipleTable" :header-cell-style="{background:'#f0f1f5',color:'#000'}" :data="tableData" :max-height="height" tooltip-effect="dark" style="width: 100%" @sel原创 2021-06-17 10:08:41 · 315 阅读 · 0 评论 -
el-dialog 组件复用
组件<!-- dialog组件--><template> <el-dialog :title="title" :visible.sync="dialogVisible" :width="width" @close="handleClose"> <slot></slot> </el-dialog></template><script>export default { props:原创 2021-06-11 15:47:16 · 817 阅读 · 2 评论 -
el-pagenation 组件 删除时候的 页码减一
如果删除数量的等于当前页数量的时候 并且当前页大于1 则当前页减1 子组件内的currentpage也减1if ( arr.length == this.tableData1.length && this.fatherCurrentPage1 > 1){this.fatherCurrentPage1 = this.fatherCurrentPage1 - 1this.$refs.pagenation1.currentPage=this.fatherCurrentPage1原创 2021-06-11 13:43:23 · 287 阅读 · 1 评论 -
el-pagenation 重复使用 组件化
组件代码<!-- 分页组件化--><template> <div class="flex1 jc-c p-t40" :class="small?'pagenationSmall':''"> <!-- :pager-count="5" 页码按钮的数量 --> <el-pagination :small="small?small:false" @current-change="handleCurrentChange" :pager-c原创 2021-06-11 11:52:46 · 157 阅读 · 1 评论 -
vue 开发环境是才展示此ui
//当为开发环境的时候 展示此uiisDev() { return process.env.NODE_ENV === 'development';}原创 2021-02-05 09:32:39 · 91 阅读 · 0 评论 -
vue 前端登录获取token后添加到cookie,并使用token获取其他数据(添加到请求头中)
1.登录获取到token存到cookie中这里我的cookie设置为一天失效cookie.js代码如下// 设置cookieexport function setCookie(c_name, value, expiredays) { var exdate = new Date(); exdate.setDate(exdate.getDate() + expiredays); document.cookie = c_name + '=' + encodeURICo原创 2020-12-04 17:09:48 · 10610 阅读 · 7 评论 -
vue项目中 axios请求配置
request.js// 拦截器import Vue from 'vue'import axios from "axios";const service = axios.create({ baseURL: process.env.VUE_APP_BASE_API, timeout: 30000 // request timeout});// request interceptorservice.interceptors.request.use( res => {原创 2020-12-01 14:38:22 · 535 阅读 · 0 评论 -
store 模块化
目录结构index.jsimport Vue from "vue"import Vuex from "vuex"import getters from './getters'Vue.use(Vuex)import template from "./modules/template"export default new Vuex.Store({ modules: { template }, getters})某个模块 template.jscon原创 2020-11-30 11:05:41 · 428 阅读 · 0 评论 -
vur router ==》Error: Redirected from “/login” to “/index” via a navigation guard
Error: Redirected from “/login” to “/index” via a navigation guard.解决办法:const originalPush = VueRouter.prototype.pushVueRouter.prototype.push = function push(location, onResolve, onReject) { if (onResolve || onReject) return originalPush.call(this,原创 2020-11-20 17:51:07 · 412 阅读 · 0 评论 -
vue 路由
路由配置 index.jsimport Vue from "vue";import VueRouter from "vue-router";// 引入组件// import Index from "@/components/Index"// 要告诉 vue 使用 vueRouterVue.use(VueRouter);const routes = [{ path: "/", redirect: "/index", }, { p原创 2020-11-20 17:07:28 · 124 阅读 · 0 评论 -
导入对象数据并拿来使用
使用结果<script>export default { type:"类型", name:"地址",};</script>原创 2020-10-21 10:08:00 · 77 阅读 · 0 评论 -
前端接受后端 blob 文件流 并进行展示和下载
请求这里的 responseType看网上很多种,但是我的这里就是用这个才可以展示成功的,如果这种类型不行,就多试试。// 预览成果物文件export const PreviewFile=(data)=>{ return request({ url:"/FileHandle/PreviewFile", method:"post", responseType: 'arraybuffer', data })}我这里用了responseType: 'arr原创 2020-10-15 08:55:59 · 16081 阅读 · 3 评论 -
vue js 可随意拖动盒子 以及禁止拖拽
可拖动弹窗:1.新建一个js,放置如下js代码import Vue from 'vue';//使用Vue.directive()定义一个全局指令//1.参数一:指令的名称,定义时指令前面不需要写v-//2.参数二:是一个对象,该对象中有相关的操作函数//3.在调用的时候必须写v-const drag = Vue.directive('drag', { //1.指令绑定到元素上回立刻执行bind函数,只执行一次 //2.每个函数中第一个参数永远是el,表示绑定指令的元素,el参数原创 2020-09-29 15:37:52 · 1915 阅读 · 2 评论 -
Vue项目中实现token验证思路
在前后端完全分离的情况下,Vue项目中实现token验证大致思路如下:1、第一次登录的时候,前端调后端的登陆接口,发送用户名和密码2、后端收到请求,验证用户名和密码,验证成功,就给前端返回一个token3、前端拿到token,将token存储到localStorage和vuex中,并跳转路由页面4、前端每次跳转路由,就判断 localStroage 中有无 token ,没有就跳转到登录页面,有则跳转到对应路由页面5、每次调后端接口,都要在请求头中加token6、后端判断请求头中有无token,转载 2020-08-12 16:48:44 · 213 阅读 · 0 评论 -
vue.config.js 打包配置的一些东西
1、打包后的文件和路径在哪里看在控制台 element和sources里看我们自己公司是这样的控制台这个 sources 可以看到资源目录。如下图所示这些资源都相当于在线资源了,可通过右击在新标签页打开(如下图所示)。这里的liangwei相当于dist目录。然后再去找liangwei下的static等资源文件。在element可以发现,这个红框的就是自己写的js代码,因为有static目录。有static的就是自己的东西打包的,其他的则是在线的或者自带的css/js。打包的配置publ原创 2020-08-12 16:00:30 · 8837 阅读 · 0 评论 -
vue 展示本地图片三种方法
第一种:直接写两个都可以 如果@配置了的话<img src="../assets/img/mapchange/map1.png" alt=""><img src="@/assets/img/mapchange/map1.png" alt="">第二种:import 然后在data内定义后 src绑定第三种:data内 require(’ 地址路径’) src直接绑定...原创 2020-08-07 15:35:00 · 20305 阅读 · 0 评论 -
vue/cli 加载全局less变量
less内这样就可以重复使用很多次vue.config.js内const path = require("path");module.exports = { // 加载全局less pluginOptions: { "style-resources-loader": { preProcessor: "less", patterns: [path.resolve(__dirname, "./src/assets/style/common.less")]原创 2020-07-03 16:12:19 · 159 阅读 · 0 评论 -
this.$refs.XXX.$el.style 修改style样式
原创 2020-06-23 15:04:22 · 11459 阅读 · 0 评论 -
watch 监听
深度监听转载 2020-06-16 11:11:26 · 104 阅读 · 0 评论 -
vue 父子传参
子传父父传子原创 2020-06-05 11:01:27 · 113 阅读 · 0 评论 -
vue watch 监听对象或数组变化 或普通数值变化
对象或者数组的监听watch: { bufferInfoList: { handler(newValue, oldValue) { // console.log("newValue", newValue); }, immediate: true, deep: true } }, computed: { bufferInfoList() { // console.log(原创 2020-05-29 10:33:54 · 2553 阅读 · 0 评论 -
vue 对象 循环
原创 2020-05-15 15:07:10 · 2928 阅读 · 0 评论 -
vue中图片展示--vue 使用导入的图片
1.img 标签2.css 中 background-image原创 2020-05-15 08:51:30 · 765 阅读 · 0 评论 -
vue/cli快速搭建
vue-cli安装npm install vue-cli -gvue-cli的版本查看vue -Vvue-cli的3.0+以后使用的不是vue-cli了,如果用以上的安装命令安装的并不是最新版的3.0+的,而如果安装3.0的话就需要使用新的npm install @vue/cli -g(如果原来已经安装了vue-cli的话需要先卸载原来的安装 npm uninstall vue-cli -g)1.全局安装 @vue/cli2.安装成功后3.新建一个文件夹4.vue create.原创 2020-05-14 15:46:39 · 151 阅读 · 0 评论 -
vuex mapState mapMutations
<template> <div> 这是一个新的路由tubutton{{this.$store.state.name}} <div>这是index.js内的{{count}} {{name}}</div> <!-- <div>{{other}}</div> --> <div @click="changeUserName('123789')">{{other}}</div..原创 2020-05-14 11:12:51 · 117 阅读 · 0 评论 -
vuex 模块化
在这里插入代码片原创 2020-05-12 17:17:53 · 121 阅读 · 0 评论 -
解决input上传文件时,第二次上传同名文件不触发change事件
document.getElementById("inFile1").value = null;解决这个问题其实很简单,就是在最后不管上传成功还是失败都在input的change事件里面,将input的val修改为空就行了原创 2020-05-12 11:09:15 · 713 阅读 · 0 评论 -
Vue.prototype
如果需要设置全局变量,在main.js中,Vue实例化的代码里添加。不想污染全局作用域。这种情况下,你可以通过在原型上定义它们使其在每个 Vue 的实例中可用。Vue.prototype.$appName = ‘My App’new Vue({ beforeCreate: function () { console.log(this.$appName) }})控制台会打印出 My App。例如:...转载 2020-05-12 09:24:11 · 225 阅读 · 0 评论 -
拦截器内加时间戳
if (!!window.ActiveXObject || "ActiveXObject" in window) config.url = config.url+"?time="+ Date.parse(new Date()) / 1000 else { // console.log('no') }原创 2020-04-29 15:48:44 · 346 阅读 · 0 评论 -
vue 动态添加类名class
<template> <div> <h2>动态添加类名</h2> <!-- 第一种方式:对象的形式 --> <!-- 第一个参数 类名, 第二个参数:boolean值 --> <!-- 对象的形式: 用花括号包裹起来,类名用引号, --> <!-- 优点: ...转载 2020-04-28 09:25:22 · 1302 阅读 · 0 评论 -
vue路由跳转
1. router-link1. 不带参数<router-link :to="{name:'home'}"> <router-link :to="{path:'/home'}"> //name,path都行, 建议用name原创 2020-04-23 10:22:05 · 85 阅读 · 0 评论 -
vuex 基础整理
Vuex有五个核心概念:state, getters, mutations, actions, modules1. state:vuex的基本数据,用来存储变量2. geeter:从基本数据(state)派生的数据,相当于state的计算属性3. mutation:提交更新数据的方法,必须是同步的(如果需要异步使用action)。每个 mutation 都有一个字符串的 事件类型 (typ...原创 2020-04-23 10:15:43 · 174 阅读 · 0 评论 -
import的几种方式
import的几种方式1. 引入第三方插件import axios from 'axios2. 引入工具类或js文件第一种是引入单个方法//导出export function axiosfetch(options) {}//导入import {axiosfetch} from './util';下面是写法,需要export导出第二种 导入成组的方法内有多个 //导...转载 2020-04-20 15:30:28 · 3262 阅读 · 0 评论 -
vue中代码 () => import @代表src
// vue异步组件和webpack的【代码分块点】功能结合,实现了按需加载const App = () => import('../component/Login.vue');原创 2020-04-17 18:22:08 · 1171 阅读 · 0 评论