Vue
zuo_zuo_blog
这个作者很懒,什么都没留下…
展开
-
JS获取元素的高度
1.offsetHeightvar div = document.getElementById('demo');console.log(div.offsetHeight); // 244 注意这里返回的值不带有单位offsetHeight的值包括元素内容+内边距+边框offsetHeight = content + padding + border = 200 + 20 * 2 + 2 * 2 = 2442、clientHeightvar div = document.getElementBy原创 2021-11-16 14:08:53 · 8358 阅读 · 0 评论 -
Node.js安装及环境配置
1)下载安装包Node.js 官方网站下载:https://nodejs.org/en/(根据本机环境选择下载,选择操作系统对应的包)(2)下载完成后,开始安装勾选复选框,点击【Next】按钮修改好目录后,点击【Next】按钮安装完后点击【Finish】按钮完成安装安装成功,文件夹结构如下,并在上面安装过程中已自动配置了环境变量和安装好了npm包,此时可以执行 node...原创 2019-06-01 12:33:50 · 558 阅读 · 0 评论 -
vue获取前一个页面路由地址
可以使用:vue-router的beforeRouterEnter钩子其实也就是一个路由守卫<script>export default { data() { return { fromPath: "", }; }, beforeRouteEnter(to, from, next) { next((vm) => { // 通过 `vm` 访问组件实例,将值传入fromPath vm.fromPath = fro原创 2020-12-23 16:15:59 · 4859 阅读 · 1 评论 -
Vue中的axios请求设置base_url几种方式
方式1. 通过全局的vue组件实现(在main.js中定义全局变量) Vue.prototype.$base_url = 'http://172.17.10.109:7600'; let url=this.$base_url + '/version/list';方式2.在入口文件main.js中实现1.import axios from ‘axios’axios.defaults....原创 2019-10-12 23:56:03 · 28274 阅读 · 3 评论 -
axios请求设置header信息方法
传递的参数顺序应该是:第一个是路径Url,第二个是参数data,第三个是header(个人理解)post请求 getList(){ let url=''; let option4=[]; url=this.$base_url + '/version/list'; let criteria=JSON.stringify({id...原创 2019-10-12 23:31:34 · 11279 阅读 · 1 评论 -
vue中添加请求头配置解决Ie浏览器缓存未清除问题
vue配置请求头,设置请求拦截项目中要求兼容ie浏览器,但是当使用Ie浏览器的时候,会出现数据更新了,但是接口请求数据不刷新的情况,如下关键代码可以解决 if (config.method === 'get' || config.method === 'GET') { config.params = { _t: Date.parse(new Date()) / 1000, ...config.params } }import axios from 'a原创 2021-04-01 10:55:47 · 585 阅读 · 0 评论 -
vue中父子传值修改props传进来的值
vue是单向数据流,一般我们也不会在子组件里面修改父组件传进来的值,但总有需要修改的时候。如果传进来是个数组,属于引用类型,修改子组件相当于把父组件也同时修改了,所以没有报错,如果是个基本类型的数据直接修改那么vue会报错。在子组件修改props的方法:1. 子组件data中拷贝一份,注意引用类型需要深拷贝,根据需求可以watch监听data() { return { newList: this.list.slice() }},watch: { list(原创 2021-03-05 11:05:42 · 2611 阅读 · 1 评论 -
使用 vue-router 之导航守卫 + meta 实现不同的用户角色具有不同的页面访问权限的功能
个人感觉很完整的一篇https://blog.csdn.net/a378113472/article/details/106240663或者参考https://blog.csdn.net/m0_37727198/article/details/113885315原创 2021-03-04 09:28:19 · 988 阅读 · 1 评论 -
vue之watch 深度监听
今天做表单提交功能需求的时候接触到了Vue中的 watch监听方法,它可以用来监听vue实例上的数据变动。绑定按钮的disabled设定watch监听,deep:true 设置深度监听 当telphone值发生变化时触发handler方法注意:这里的function不能写成箭头函数,不然this将不在此组件内https://cn.vuejs.org/v2/api/#watchhandler函数中的意思就是每次telphone中数值发生变化时,都对其进行格式校验一次,当格式正确是,按钮.原创 2021-02-23 17:57:58 · 993 阅读 · 0 评论 -
vue之项目打包部署到服务器
第一步:这是很关键的一步。打开项目,找到config文件夹下的index.js。搜索 assetsPublicPath 默认值为 ‘/‘ 应改为你要挂在到服务器的那个文件下的路径 。第二步:因为在开发时 会有跨域问题 我们为了方便会配置跨域代理比如proxyTable 部署到服务器上所以到服务器上之后就不存在跨域了,注销掉。第三步:解决部署后图片图表路径404问题如xxxx/static/css/static/css/xxx这样的路径 在build/utils 中,找到这里添加 public原创 2021-01-05 16:26:08 · 1976 阅读 · 0 评论 -
Vue项目不兼容ie浏览器的解决办法
Vue项目兼容IE浏览器安装babel-polyfillnpm install babel-polyfill --save-dev 或者 cnpm install babel-polyfill --save-dev然后在入口main.js文件引入:import ‘babel-polyfill’我是用了官方脚手架vue-cli,还要修改配置文件,网上一般说的是修改webpack.config.js在module.exports里添加: entry:{ app:["babel-polyfi原创 2020-12-14 17:48:25 · 1337 阅读 · 2 评论 -
vue实现滑块滑动校验
1.子组件slider.vue<template> <div class="drag" ref="dragDiv"> <div class="drag_bg"></div> <div class="drag_text">{{confirmWords}}</div> <div ref="moveDiv" @mousedown="mouseDownFn($event)" :cl原创 2020-09-12 16:37:02 · 1854 阅读 · 0 评论 -
登录时候按下tab键即可跳转
方法一<div class="item-btn-cont"> <span class="login-btn" v-on:keyup.enter="login('loginForm')" @click="login('loginForm')" >登 录</span> <p style="m原创 2020-09-09 10:37:06 · 191 阅读 · 0 评论 -
axios请求拦截器
1.路由拦截在定义路由的时候就需要多添加一个自定义字段requireAuth,用于判断该路由的访问是否需要登录。如果用户已经登录,则顺利进入路由,否则就进入登录页面。const routes = [ { path: '/', name: '/', component: Index }, { path: ...原创 2020-04-03 16:54:13 · 614 阅读 · 0 评论 -
两种不同导出Excel的方式
1.通过后端接口导出 exportExcel() { if(this.total>60000){ this.$alert("导出数据超出Excel的限制,请缩小查询范围"); return; } this.$confirm('当前待导出的数据行数过多,导出需要耗时较长,请确认是否需要导出?...原创 2020-04-03 16:22:54 · 252 阅读 · 0 评论 -
前端导出excel
<el-button type="success" @click="exportExcel">导出</el-button> //确认导出 exportExcel() { if(this.total>60000){ this.$alert("导出数据超出Excel的限制,请缩小查询范围"); ...原创 2020-03-13 15:02:14 · 154 阅读 · 0 评论 -
vue选择框二级联动demo
<template> <!--一级菜单--> <div> <el-select v-model="registerStu.collegestu" @change="handleChange"> <el-option v-for="item in subject" :key="item....原创 2020-02-13 19:55:39 · 664 阅读 · 0 评论 -
vue中引入jquery
第一步,引入jQuery。在项目的根目录下,使用命令:npm install jquery -S2.打开项目下的文件夹build中的webpack.base.conf.js文件,在文件开头添加以下代码:var webpack = require('webpack')3.然后在webpack.base.conf.js文件中,找到 module.exports={},在其中插入以下代...原创 2019-12-31 13:11:30 · 114 阅读 · 0 评论 -
后台返回数字数据.前台变成对应得汉字 比如 1和0变为 男和女
1.第一个方法为:在 标签里直接写 <el-table-column label="性别" prop="gender"> <template slot-scope="scope"> <span v-if="scope.row.gender==1">男</span> <sp...原创 2019-12-02 16:18:19 · 5888 阅读 · 1 评论 -
vue跨域问题及post传参
方案一:在config.index.js中设置webpack最初的方案是前台传JSON格式的数据过去;设置’Content-Type’:'application/json;charset=UTF-8',大概:axios.post('/user',JSON.stringify(params),{ headers: { 'Content-Type': 'applicati...原创 2019-12-02 10:56:59 · 1247 阅读 · 0 评论 -
在vue+elementUI中的分页功能
<template> <!--分页功能--> <div class="deit"> <div class="crumbs"> <el-breadcrumb separator="/"> <el-breadcrumb-item> <i class="el-ic...原创 2019-11-27 18:53:19 · 238 阅读 · 0 评论 -
vue之父子组件间通信(props、$ref 、 $emit )
一、父子通信解释组件是 vue.js 最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互引用。那么组件间如何通信,也就成为了vue中重点知识了。这篇文章将会通过props、$ref和 $emit 这几个知识点,来讲解如何实现父子组件间通信。二、父组件导入子组件在说如何实现通信之前,我们先来建两个组件father.vue和child.vue作为示例的基础。...转载 2019-11-08 17:17:43 · 538 阅读 · 0 评论 -
Vue 生命周期钩子函数
从Vue实例创建、运行、到销毁期间,总是伴随着各种各样的事件,这些事件,统称为生命周期!生命周期执行过程(1) beforeCreate:实例刚在内存中被创建出来,此时,还没有初始化好 data 和 methods 属性(2) created:实例已经在内存中创建OK,此时 data 和 methods 已经创建OK,此时还没有开始 编译模板(3)beforeMount:此时已经完成了模...原创 2019-11-04 15:55:00 · 135 阅读 · 0 评论 -
Vue中使用websocket
HTML5 WebSocketWebSocket 使得客户端和服务器之间的数据交换变得更加简单,允许服务端主动向客户端推送数据。在 WebSocket API 中,浏览器和服务器只需要完成一次握手,两者之间就直接可以创建持久性的连接,并进行双向数据传输。在 WebSocket API 中,浏览器和服务器只需要做一个握手的动作,然后,浏览器和服务器之间就形成了一条快速通道。两者之间就直接可以数据...原创 2019-10-25 09:47:07 · 396 阅读 · 0 评论 -
表单校验之根据不同的选项校验不同的表单项
方法1:参考方法2:当点击切换按钮时引发一个change事件<el-form-item label="阈值分类" prop="kind"> <el-radio-group v-model="form.kind" @change="agreeChange"> <el-radio label="单阈值统计"></...原创 2019-10-25 09:40:08 · 1598 阅读 · 0 评论 -
当vue页面加载数据时显示加载loading
vue动画过渡转载<template> <div class="loading"></div></template> <script>export default { name: 'Loading' }</script> <style scoped>.loading { ...原创 2019-10-23 15:12:48 · 12207 阅读 · 0 评论 -
el-radio-button切换引起的校验问题
1.问题:切换按钮时,两个校验都需要进行此时用到了对象添加属性https://cn.vuejs.org/v2/api/#vm-set里面的Vue.set( target, propertyName/index, value )Vue.delete( target, propertyName/index, value )2.参数:{Object | Array} target{stri...原创 2019-10-23 11:16:11 · 3677 阅读 · 0 评论 -
el-checkbox删除功能遇见的问题
handleDelete() { let url = ""; url = this.$base_url + "/version/delete"; let criteria = parseInt(this.form.type); this.$confirm("确定要删除该版本吗?", "提示", { cancelButtonCla...原创 2019-10-23 10:59:50 · 657 阅读 · 0 评论 -
Duplicate keys detected: '0'. This may cause an update error.
错误原因<div class="info" v-for="(item, index) in currentFriend.content" :key="index"> <div class="d1"> <p v-text="item.time" class="timeBox"></p> </div>...转载 2019-10-15 17:36:10 · 312 阅读 · 0 评论 -
vue项目的插件引入
1.element ui 的引入 npm install --save element-ui2.安装js-cookie npm install --save js-cookie在mian.js里引入依赖 import Cookies from 'js-cookie';3.插件axios npm install axios --save import axios from 'axio...原创 2019-10-13 00:08:55 · 444 阅读 · 0 评论 -
将Echarts图表导出为图片
https://blog.csdn.net/MTonj/article/details/88094856转载 2019-10-12 10:06:45 · 1447 阅读 · 0 评论 -
vue基础
渐进式Javascript框架(较小的侵入性,较强的可伸缩性) 易用,灵活,高效(运行快体积小) Vue.js的引用<script src="http://cdn.jsdelivr.net/nmp/vue/dist/vue.js"></script>模块引入import Vue from ‘vue’;4.文本绑定双括号<div id="app...原创 2019-07-17 21:56:23 · 87 阅读 · 0 评论 -
element message box 确认消息,怎么改变确定和取消的位置?
1.学习fromhttps://segmentfault.com/q/10100000152232952.如题,element message box 确定在右面,取消在左面,要怎么做才能让确定在左面,取消在右面?代码:<template> <el-button type="text" @click="open">点击打开 Message Box</el...原创 2019-09-19 16:01:30 · 2883 阅读 · 0 评论 -
vue使用element-ui时监听登录界面全局键盘回车事件
1.from: https://blog.csdn.net/princek123/article/details/896707762.项目问题 <div class="item-btn-cont"> <span class="login-btn" v-on:keyup.enter.native="login('loginForm')" @c...原创 2019-09-19 19:04:43 · 859 阅读 · 0 评论 -
vue 详情页返回列表页,保留列表页之前的筛选条件
1.设置cookie缓存 //设置cookie Vue.prototype.setCookie = function (name, value, day) { if (day !== 0) { var expires = day * 24 * 60 * 60 * 1000; var...原创 2019-09-24 23:50:09 · 5153 阅读 · 0 评论 -
vue项目打包之后刷新页面空白解决办法
项目遇到个情况,npm run build打包之后上传到服务器后,正常进入,但是刷新页面就是出现空白页,然后百度找了原因,是路由问题1.路由模式将histroy改成hash模式,起初 mode:'history’const router = new Router({base: '/',mode: 'hash',routes: ROUTES})2.那么vue-router的hash...原创 2019-09-26 14:13:50 · 6038 阅读 · 1 评论 -
vue-router中的hash和history两种模式的区别
原文链接:https://www.jb51.net/article/143923.htm1.hash模式hash模式背后的原理是onhashchange事件,可以在window对象上监听这个事件:window.onhashchange = function(event){ console.log(event.oldURL, event.newURL); let hash = loca...转载 2019-09-26 14:27:20 · 742 阅读 · 0 评论 -
clearValidate()和resetFields()表单校验的用法和区别
1.整个表单的校验移除<Form ref="form" rule={this.rules}> <FormItem prop="name" label="姓名"> <Input/> </FormItem> <FormItem prop="age" label="年龄"> <Input/> </...原创 2019-09-26 16:07:22 · 8688 阅读 · 0 评论 -
关于Vue中的 render: h => h(App) 具体是什么含义?
大概的翻译下:render: h => h(App) 是下面内容的缩写:render: function (createElement) { return createElement(App);}进一步缩写为(ES6 语法):render (createElement) { return createElement(App);}render (h){ ...原创 2019-09-26 18:38:16 · 559 阅读 · 0 评论 -
Vue.js引入echarts、elementUI
1.下载elementUInpm install element-ui -s2.下载echarts组件npm install echarts --save3.package.json查看版本4.我们在main.js下引用我们下载的5.main.js代码import elementui from 'element-ui'import 'element-ui/lib/theme...原创 2019-09-27 19:24:54 · 434 阅读 · 0 评论