Vue
吴冬雪~
Everything is the best arrangement.
展开
-
element-ui报错Cannot read property ‘resetFields‘ of undefined
问题描述: 使用element开发我的后台系统,编辑和新增使用了同一个弹出框绑定了数据data里的commentForm对象为了在新增弹出框清空表单, 使用了每次第一次点击新增显示弹出框,都会报错。转载 2020-04-11 23:28:37 · 2737 阅读 · 1 评论 -
vue使用Vue.extend创建全局toast组件
【代码】vue使用Vue.extend创建全局toast组件。原创 2022-02-15 21:16:18 · 548 阅读 · 0 评论 -
elementui下拉框选中,获取选中对象方法,包含label和value
el-select 添加value-key=‘id’,value-key作为 value 唯一标识的键名,绑定值为对象类型时必填,el-option的value赋值为item。转载 2022-03-07 10:57:20 · 2488 阅读 · 0 评论 -
element 组件改变值后选中的内容不变
问题场景:默认下拉框选中了值,切换下拉框选中的值,值改变了,但是视图未改变。原创 2022-08-22 18:13:47 · 936 阅读 · 0 评论 -
Vue中关于computed的基本构成和使用
当其依赖的属性的值发生变化时,计算属性会重新计算,反之,则使用缓存中的属性值。转载 2020-04-12 13:27:53 · 973 阅读 · 0 评论 -
vue(2,3)中过渡标签transition的使用
【代码】vue(2,3)中过渡标签transition的使用。原创 2023-06-13 18:17:48 · 404 阅读 · 0 评论 -
vue-router当中的addRoutes与、导航守卫
已存在的不会被addRouter里面的覆盖,是具有优先权的。原创 2023-05-25 20:29:12 · 909 阅读 · 0 评论 -
el-upload限制图片尺寸
【代码】el-upload限制图片尺寸。原创 2023-03-21 17:47:16 · 444 阅读 · 0 评论 -
vue 登陆添加enter事件
【代码】vue 登陆添加enter事件。原创 2021-08-17 18:06:35 · 191 阅读 · 0 评论 -
vuex中modules的使用
由于使用单一状态树,应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时,store 对象就有可能变得相当臃肿。原创 2021-06-17 17:00:17 · 484 阅读 · 1 评论 -
vue在store仓库中使用路由的方法
在仓库中,this的指向指的是store,但是在一般的工程,我们有可能会需要在仓库中走路由等逻辑,这个时候就需要先找到全局vue,因为路由是vue的一个子模块main.jswindow.Vue=vueconst vue = new Vue({ el: '#app', store, router, render: h => h(App)})window.Vue = vueexport default vuestore/index.jsconst_rout...原创 2021-04-25 21:12:56 · 2324 阅读 · 0 评论 -
keep-alive 的应用
keep-alive可以在组件切换时,保存其包裹的组件的状态,使其不被销毁,防止多次渲染。其拥有两个独立的生命周期钩子函数 actived 和 deactived,使用keep-alive包裹的组件在切换时不会被销毁,而是缓存到内存中并执行 deactived 钩子函数,命中缓存渲染后会执行 actived 钩子函数。生命周期执行顺序:1、不使用keep-alive的情况:beforeRouteEnter --> created --> mounted --> destroyed。转载 2020-12-08 09:14:04 · 5110 阅读 · 0 评论 -
VueRouter 同一个路由(复用同一个组件) 页面不重新加载解决办法
【代码】VueRouter 同一个路由(复用同一个组件) 页面不重新加载解决办法。转载 2020-12-07 11:02:33 · 3900 阅读 · 0 评论 -
vue中使用js-md5插件进行MD5加密 并将密文大小写转换
hex_md5("123456");//"e10adc3949ba59abbe56e057f20f883e" 在大小写上可以使用1、转换成大写:toUpperCase()2、转换成小写:toLowerCase()原创 2020-11-10 12:33:27 · 3104 阅读 · 1 评论 -
vue 性能优化
原创 2020-09-09 10:37:08 · 97 阅读 · 1 评论 -
vue 路由懒加载
component: () => import(/* webpackChunkName: "xtgl" */ '@/views/xtgl/gwgl')路由懒加载:文件的切割,把组件的代码单独打包为独立的JS => 对页面第一加载的性能体验有很大的帮助import Vue from 'vue'import VueRouter from 'vue-router'Vue.use(VueRouter)// 解决ElementUI导航栏中的vue-router在3...原创 2020-09-09 10:35:19 · 433 阅读 · 0 评论 -
vue 表单重置 全局方法
//表单重置exportfunctionresetForm(refName){if(this.$refs[refName]){this.$refs[refName].resetFields();}}原创 2020-09-09 10:29:58 · 565 阅读 · 0 评论 -
vue.config.js 接口代理实现
原创 2020-09-09 10:29:00 · 746 阅读 · 0 评论 -
vue 登录页面回车执行事件 @keyup.enter.native
<el-form ref="loginForm" :model="loginForm" :rules="loginFormRules" label-width="80px"> <!-- 用户名 --> <el-form-item label="用户名" prop="userName"> <el-input v-model="loginForm.userName" prefix-icon="el-icon-user.原创 2020-09-09 10:27:47 · 2238 阅读 · 0 评论 -
this.$router.push、replace、go的区别
1.this.$router.push()描述:跳转到不同的url,但这个方法会向history栈添加一个记录,点击后退会返回到上一个页面。用法:2.this.$router.replace()描述:同样是跳转到指定的url,但是这个方法不会向history里面添加新的记录,点击返回,会跳转到上上一个页面。上一个记录是不存在的。3.this.$router.go(n)相对于当前页面向前或向后跳转多少个页面,类似window.history.go(n)。n可为正数可为负数。正数返.转载 2020-09-02 10:07:35 · 298 阅读 · 0 评论 -
vue 中v-if和v-show的区别与使用
如果只是要么显示要么隐藏之后不会再改变显示隐藏状态的情况,v-if更加的合理,因为如果默认就是隐藏,相当于dom一次都不用创建,如果默认是显示,v-if和v-show效果完全一样。大家都知道频繁操作dom对性能影响很大,v-if如果用在有toggle按钮控制的情况下,相当于在频繁增加dom和删除dom,所以此时用v-show更加合适。当组件中某块内容只会显示或隐藏不会被再次改变显示状态,此时用v-if更加合适,例如请求后台接口通过后台数据控制某块内容是否显示或隐藏,且这个数据在当前页不会被修改;原创 2020-04-23 13:19:40 · 263 阅读 · 0 评论 -
安装@vue/cli 报错npm WARN deprecated request@2.88.2
产生错误的原因:是电脑资源的问题,电脑里面没有配置淘宝镜像解决步骤:配置淘宝镜像:npm config set registry https://registry.npm.taobao.org 配置完镜像之后验证是否成功:npm config get registry 图示如下: 配置完后问题就解决了!!!以下附上VueCli的安装方法下载VueCli,命令行输入npm...原创 2020-04-13 20:39:16 · 6685 阅读 · 1 评论 -
vue开发computed,watch,method执行的先后顺序
Vue 确实提供了一种更通用的方式来观察和响应 Vue 实例上的数据变动:watch 属性。然而,通常更好的想法是使用 computed 属性而不是命令式的 watch 回调。3#watch:是一种更通用的方式来观察和响应 Vue 实例上的数据变动。一个对象,键是需要观察的表达式,值是对应回调函数。Vue 实例将会在实例化时调用 $watch(),遍历 watch 对象的每一个属性。所以他们的执行顺序为:默认加载的时候先computed再watch,不执行methods;它用于观察Vue实例上的数据变动。转载 2020-04-12 13:13:52 · 3309 阅读 · 2 评论 -
Vue中组件的watch用法详解;与this.$watch有什么区别
immediate表示在watch中首次绑定的时候,是否执行handler,值为true则表示在watch中声明的时候,就立即执行handler方法,值为false,则和一般使用watch一样,在数据发生变化的时候才执行handler。当需要监听一个对象的改变时,普通的watch方法无法监听到对象内部属性的改变,只有data中的数据才能够监听到变化,此时就需要deep属性对对象进行深度监听。数组(一维、多维)的变化不需要通过深度监听,对象数组中对象的属性变化则需要deep深度监听。原创 2020-04-11 21:31:34 · 449 阅读 · 1 评论 -
Vue中的@blur事件 当元素失去焦点时所触发的事件
@blur 是什么? @blur 是当元素失去焦点时所触发的事件@blur 怎么使用?<template> <div> <input type="text" placeholder="请输入内容" @blur="blur"/> </div></template> <script...原创 2020-03-19 13:01:26 · 25929 阅读 · 0 评论 -
设置el-option的宽度和el-select 宽度相同,选项内容超出显示滚动条
<!-- Add "scoped" attribute to limit CSS to this component only --><style lang="scss" scoped></style><!-- globe css --><style lang="scss">.el-select-dropdown{ ...原创 2020-03-16 14:51:32 · 8327 阅读 · 3 评论 -
vue代码里面写css3特效 本地生效 部署在开发环境不生效(vue2.0项目CSS3动画打包后动画失效解决办法)
vue2.0 + webpack做项目时,css3动画打包前正常,打包后失效,原因是:vue-cli脚手架package.json配置文件里面对浏览器的版本做了css的前缀处理"browserslist": [ "> 1%", "last 2 versions", "not ie <= 8" ]意思是 只兼容主流浏览器的最新两个版本。如果我们要...转载 2019-12-23 14:22:45 · 963 阅读 · 3 评论 -
vue列表渲染,鼠标点击改变样式的问题 class
样式如图:"名家"默认被点击,这里给出艺术家类别的代码,英文类似。<el-row :gutter="30" class="artistList" v-loading="loading"> <el-col :span="24"> <span class="colFont">艺术家类别: <...原创 2019-05-31 16:17:40 · 2465 阅读 · 2 评论 -
elementUI组件修改样式 覆盖无效
为了vue页面样式模块化,不对全局样式造成污染,我们往往都会加入scoped属性用来限制样式的作用域,然而这也会导致当我们修改部分ui组件样式失效。为了避免这种情况,我们常用以下方式来解决。通过 >>> 可以使得在使用scoped属性的情况下,穿透scoped,修改其他组件的值。在我们使用第三方UI组件库开发时有时需要对这些组件进行一些样式修改。深度选择器/deep/与>>>作用相同。转载 2019-05-31 15:20:38 · 7333 阅读 · 1 评论 -
vue页面跳转并传递参数 保存参数到网址?a=&b= 解决 刷新页面 无法保存接收到的参数情况
【代码】vue页面跳转并传递参数 保存参数到网址?a=&b= 解决 刷新页面 无法保存接收到的参数情况。原创 2019-05-28 17:27:30 · 1816 阅读 · 1 评论 -
使用饿了么ui表单验证报错: [Element Warn][Form]model is required for validat
该提示说的是 form表单需要绑定一个对象(使用:model="" 不能使用v-model="")转载 2019-05-30 10:10:18 · 5207 阅读 · 3 评论 -
VUE爬坑之路--Element-UI el-row、el-col、Select下拉框等点击事件不触发问题解决方法
在使用element-ui组件中card、row、el-col等组件,添加点击事件@click="handleClick()",都无法触发点击事件。@click.native="handleClick()" 可以解决这个问题。在点击请选择部门的时候不能触发点击事件getFood()。原创 2019-05-22 17:17:18 · 11686 阅读 · 3 评论 -
Vue中this.$router.push(参数) 实现页面跳转
由于动态路由也是传递params的,所以在 this.$router.push() 方法中path不能和params一起使用,否则params将无效。需要用name来指定页面。很多情况下,我们在执行点击按钮跳转页面之前还会执行一系列方法,这时可以使用。页面通过path/name和query传递参数,该实例中row为某行表格数据。及通过路由配置的name属性访问。来修改 url,完成跳转。原创 2019-05-22 16:58:40 · 133516 阅读 · 10 评论 -
Vue 生命周期
每个Vue实例在被创建时都要经过一系列的初始化过程—例如,需要设置数据监听、编译模板、将实例挂载到DOM并在数据变化时更新DOM等。同时在这个过程中也会运行一些叫做。的函数,这给了用户在不同阶段添加自己的代码的机会。上下文指向调用它的Vue实例。原创 2019-04-24 13:04:43 · 346 阅读 · 1 评论