- 博客(32)
- 收藏
- 关注
RSS订阅原创 关于element导航菜单使用for循环出来，展开一个菜单项，其余也都打开的问题
问题描述使用element导航菜单时，使用v-for循环出来的每一项，打卡一个菜单项时发现其他项也都打开了，是因为<el-menu>标签是根据index来定位展开还是关闭的，而使用v-for循环使得每一项的index都是一样的，所以才会一个打开都打开解决办法只需要在循环时，给每一项添加唯一index就可以了，每一项都有自己的唯一id，所以将id作为index，加空字符串是因为index只接受字符串，而id是数字，拼接空字符串可以使数字转为字符串。<el-submenu v-for=
2021-09-10 10:27:47
3267
原创 关于element表单重置resetFields()不生效问题
问题描述使用element对话框Dialog，添加编辑使用一个弹出框时，发现使用表单重置方法resetFields()不生效，也就是点击编辑之后关闭弹框，再点击添加，此时弹出框表单仍然保留编辑项的内容而不是全新的空表单。弹框的@close='resetForm'关闭事件绑定了重置表单以及表单验证的方法resetForm(){ //重置表单 this.$refs.form.resetFields(); //重置表单验证 this.$refs.form.cl
2021-09-09 21:40:48
4350
1
原创 element-UI强制按钮失去焦点
问题描述有时使用element-UI按钮组件el-button时会出现按钮点击事件触发完成之后，按钮依然处于被点击的状态，也就是说依然表现为浅色，没有变回未点击时的颜色。这是由于点击时点击到了按钮中的文字，或者图标，也就是按钮的子元素<span>或者<i>标签，没有办法触发父元素也就是按钮本身的点击事件解决方法在需要的按钮点击事件中调用此方法。// 强制按钮失去焦点forceBlur(e){ let target = e.target; if(ta
2021-09-09 18:18:14
2222
原创 Vue路由守卫
src/router/index.js中，保护路由安全（权限）前置路由守卫//全局前置路由守卫-初始化时被调用，每次路由切换之前被调用router.beforeEach((to,from,next)=>{ if(to.name){ //跳转路径校验逻辑（判断） if(){ //校验信息逻辑 next() } }else{ alert('信息错误') }})跳转路径校验可
2021-08-26 17:51:13
139
原创 Vue编程式路由导航
脱离<router-link>标签，实现跳转，让路由跳转更加灵活//push模式，不破坏历史记录this.$router.push({ name:'detail', params:{ id:m.id, title:m.title }})//replace模式，覆盖历史记录this.$router.replace({ name:'detail', params:{ id:m.id, t
2021-08-25 21:44:37
94
原创 JS字符串常用和不常用的方法总结
查找字符串方法以下前两个方法都接受第二个参数作为查找的开始位置。indexOf()返回指定某个字符串首次出现在原字符串的索引（从0开始，第一位索引为0）let str = 'Hello world!'let index = str.indexOf('l')console.log(index); // index输出为2未找到返回-1let str = 'Hello world!'let index = str.indexOf('a')console.log(index); // i
2021-08-25 15:54:54
149
原创 Vue路由传参
query参数不打扰路由配置传递（携带）参数<!-- 跳转并携带query参数，to的字符串写法，记得加: --><router-link :to="`/home/message/detail?id=${m.id}&title=${m.title}`">{{m.title}}</router-link><!-- 跳转并携带query参数，to的对象写法，记得加: --><router-link :to="{
2021-08-22 20:47:18
96
原创 vue嵌套（多级）路由的两个坑
找不到组件的两个坑1.子级路由path不能加/，否则会找不到组件2.路由入口要写完整路径，否则会找不到组件使用children配置项配置子路由规则export default new VueRouter({ routes:[ //一级路由规则 { path:'/about', component:About }, { path:'/home',
2021-08-19 15:16:50
898
原创 vue-router路由使用
路由简介vue的一个插件库，专门用来实现SPA（单页面）应用，点击导航链接不会刷新页面，只做局部更新1.路由就是一组key-value的映射关系2.key为路径，value可能是function或component路由分类后端路由1）理解：value是function，用于处理客户端请求2）工作过程：服务器收到请求时，根据请求路径找到匹配的函数处理请求，返回响应数据.前端路由1）理解：value 是 component，用于展示页面内容。2）工作过程：当浏览器的路径改变时, 对应的组件就
2021-08-19 14:27:29
136
原创 vuex模块化+命名空间（namespaced）
目的让代码更好维护，让多种数据分类更加明确修改store.js//求和相关配置const countOptions = { namespaced:true, //开启命名空间 actions:{ addOdd(context,value){ if(context.state.sum % 2){ context.commit('ADD',value) } },
2021-08-18 20:08:07
607
原创 vuex使用mapState，mapGetters等进行代码优化
简化模板中插值语法中的表达式。mapState用于帮助我们映射state中的数据为计算属性mapGetters用于帮助我们映射getters中的数据为计算属性mapActions用于帮助我们生成与actions对话的方法，即包含$store.dispatch(xxx)的函数，传递的参数需要在绑定事件时携带，否则参数是事件对象mapMutations用于帮助我们生成与mutations对话的方法，即包含$store.commit(xxx)的函数，传递的参数需要在绑定事件时携带，否则参数是事件对象im
2021-08-18 16:42:10
192
原创 vuex工作原理及示例
原理图详解state是对象，用于存储具体数据Dispatch（相当于迎宾）是API，在组件方法中被调用（this.$store.dispatch("add",value)），两个参数，第一个是动作类型（实质是一个函数，配置在actions中），第二个是需要传递的值Actions（相当于服务员）是对象，用于响应组件中的动作，配置add(context,value){}，需要向后端发送请求或者有其他逻辑时必需，不需要时可以直接在组件中通过this.$store.commit("ADD",value)触发
2021-08-18 14:32:15
256
原创 搭建vuex环境
安装vuexnpm i vuex新建文件src/store/index.js//该文件用于创建Vuex核心store//引入vue核心库import Vue from 'vue'//引入Vueximport Vuex from 'vuex'//使用vuex插件，需要引入vueVue.use(Vuex)//actions用于响应组件中的动作const actions = {}//mutations用于操作state中的数据const mutations = {}//state
2021-08-17 19:04:56
118
原创 Vue中的slot插槽
让父组件可以向子组件指定位置插入HTML结构，也是一种组件间通信方式，适用于 父组件==>子组件默认插槽父组件往子组件标签内部放东西时，Vue不知道该放哪，需要在放的地方定义一个插槽（挖个坑，等组件使用者进行填充）。子组件中：<slot>默认值，没有传递具体结构时，会出现</slot>具名插槽name属性给<slot>起名字，组件标签内的标签设置slot属性为匹配插槽<slot>标签的name属性子组件中：<slot name="
2021-08-17 16:58:27
150
原创 使用ES6扩展运算符合并对象
语法obj = {...obj1,...obj2}合并两个对象的相同属性以obj2为准，不同属性会进行拼接。示例const state1 = { isFirst:false, isLoading:true, userList:[], isError:false}const state2 = { isLoading:false, userList:'res.data.items', isError:false}let state = {...state1,...state2}c
2021-08-17 15:34:30
732
原创 关于Vue使用es6模板字符串没反应的问题
错误示范VScode发get请求的地址及参数使用单引号''包裹时，发现${this.keyWord}没有变颜色，跟字符串一个颜色,也就是没有将this.keyWord识别成变量，当成了一般字符串，发请求时带的参数问题请求不到结果search(){ this.$axios.get('https://api.github.com/search/users?q=${this.keyWord}').then( res => { console.log(res); }, err =>
2021-08-15 23:13:42
1500
原创 解决Vue开发环境 Ajax 跨域问题
跨域：违背了同源策略，请求可以发出去，数据返回到浏览器，被浏览器控制同源策略：规定协议名，主机名，端口号必须一致http://localhost:8080/ http为协议名，localhost为主机名，8080为端口号配置代理服务器代理服务器，与前端所处位置一样，协议名，主机名，端口号一致借助vue-cli配置代理服务器：方式一：在vue.config.js文件中配置，将任何未知请求 (没有匹配到静态文件的请求) 代理到http://localhost:4000module.exp
2021-08-15 15:20:28
538
原创 Vue封装的过渡与动画
作用：在插入，更新或移除DOM元素时，在合适的时候给元素添加样式类名动画效果利用<transition>标签（只能控制一个元素）实现过渡，添加name属性需要修改动画类名，添加appear属性可以实现出现时就有动画效果@keyframes定义动画名@keyframes trans{ from{ transform: translateX(-100%); } to{ transform: tr
2021-08-13 17:38:54
197
原创 Vue组件间的通信
父组件==>子组件 通信父组件使用子组件时，利用v-bind:标签属性进行传递数据，其中属性名为子组件在props中接收时的声明，属性值为父组件中定义的属性或者方法。<!-- 父组件 --><MyHeader :addTodo="addTodo"/>子组件中利用props进行接收父组件传递过来的数据，使用时直接读取或者调用。//子组件export default { name:'MyHeader', props:[
2021-08-12 20:09:51
103
原创 消息订阅与发布（实现任意组件间通信）
一种组件间通信的方式，适用于任意组件间通信利用第三方库pubsub-js（任何一个框架都可以使用）实现安装第三方库pubsub-jsnpm i pubsub-js订阅消息：消息名需要订阅消息（接收数据）的组件//引入的pubsub是一个对象，使用时直接调用其自身的APIimport pubsub from 'pubsub-js'mounted(){ //第一个参数为消息名，第二个参数为接收到的数据，回调函数为普通函数时，this为undefined； //所以需要写箭头函数（或者将回
2021-08-12 20:06:03
288
原创 Vue全局事件总线（GlobalEventBus)
意义：实现任意组件间的通信保证：1.所有组件都能找到x2.x可以调用到$on,$off,$emit安装全局事件总线main.js里创建Vue实例时，在beforeCreate()钩子中配置$bus，$bus就是当前应用的vmnew Vue({ el:'#app', render:h => h(App), beforeCreate(){ Vue.prototype.$bus = this //安装全局事件总线 }})使用事件总线接收数据的组件中给this.$bus绑定事
2021-08-11 16:32:15
267
原创 Vue组件的自定义事件
一种组件间通信的方式，适用于子组件==>父组件基本使用click,keyup,mouseover等都属于原生js事件，自定义事件指事件名称为自定义。给谁绑的事件找谁触发。通过在父组件中给子组件绑定自定义事件实现（事件的回调在父组件中）：子组件给父组件传递数据，不再需要父组件给子组件传递函数类型的props。绑定自定义事件父组件：给子组件实例绑定自定义事件，两种写法一种直接给自组件标签绑定，另一种通过给子组件实例ref属性，在mounted中获取组件实例，调用$on()绑定（更灵活）/
2021-08-11 14:36:24
201
原创 浏览器本地存储
localStorage储存的数据关闭浏览器再打开也不会丢用户主动清除缓存就没了//值对都只能为字符串localStorage.setItem('key','value')JSON.stringify(对象)localStorage.getItem('key')JSON.parse(对象)//删除localStorage.removeItem('key')//清空localStorage.clear()sessionStorage一关闭浏览器就没了//值对都只能为字符串ses
2021-08-10 19:25:31
134
原创 拉取Gitee项目到本地
1.找到要拉取的目录，cmd2.执行命令git clone 远程仓库地址拉下来后不再需要项目初始化，直接可以用VScode的提交推送等选项
2021-08-10 17:20:42
289
原创 JS数组常用和不常用的方法总结
会改变原数组的方法以下六种push(),pop(),shift(),unshift(),splice(),sort(),reserve()，我自己比较常用的有unshfit(),splice()添加数组元素push()方法在数组结尾处向数组添加一个新的元素（其余元素索引未改变），参数为被添加元素let fruits = ['苹果','香蕉','橘子']fruits.push('西瓜') //向数组添加一个新元素console.log(fruits); //['苹果','香蕉','橘子',
2021-08-10 14:36:49
152
原创 Vue中一个重要的内置关系
VueComponent.prototype.__proto__===Vue.prototype显示原型属性prototype;隐式原型属性__proto__实例的隐式原型属性永远指向自己缔造者的原型对象让组件实例对象vc（沿着隐式原型链）可以访问到Vue原型上的属性，方法...
2021-08-06 14:47:41
157
原创 Vue生命周期详解
实质Vue在关键时刻帮我们调用的一些特殊名称的函数。this指向：vm或者组件实例对象。可以使用debugger;打断点调试beforeCreate（将要创建）创建之前指的是数据监测和数据代理创建之前生命周期与事件初始化完成，但数据代理还未开始，调用，所以此时无法通过vm访问到data中的数据和methods中方法。created（创建之后）数据监测和数据代理初始化完成调用，此时可以通过vm访问到data中的数据和methods中配置的方法。beforeMounted（将要挂载）Vue开
2021-08-05 16:05:29
118
原创 Vue数据代理
Object.defineProperty()方法添加的属性不会被遍历到给对象添加（定义）属性的方法Object.defineProperty（对象名，'要添加的属性名'，{配置项，如value：18}）第三个参数配置项enumerable：（控制属性是否可以被枚举，默认false）为true可以使添加的属性可被遍历writable：控制属性是否可以被修改，默认falseconfigurable：控制属性是否可以被删除，默认falseget(){ return number }:当有人读取该
2021-08-04 14:08:20
97
原创 v-for中key的原理
虚拟DOM中key的作用使用v-for时一定要写:key，代表不同节点key是为了给节点一个标识，相当于人类社会的身份证号。需要使用key声明数据中的哪项作为节点的唯一标识，比如id====>:key="item.id"使用index做key的坑可能会引发的问题：对数据进行破坏顺序操作时会产生没必要的真实DOM更新，效率低；结构中包含输入类的DOM，会产生DOM错误更新，界面有问题具体过程：vue根据原始数据生成初始虚拟DOM,再将初始虚拟DOM转成真实DOM，往数组前面里添加新的ite
2021-08-04 13:06:36
308
原创 Vue计算属性相关
计算属性插值语法插入有返回值得自定义方法，必须带小括号。使用计算属性时，插值表达式直接读取使用，如fullName属性为data中的数据。计算属性：computed与data同级，对象形式通过已有属性计算得来在vm中放的是一个新的属性get和set都是普通方法data:{ firstName:'', lastName:''},computed:{ fullName:{ //有人读取fullName，get被调用，返回值作为fullName的值 //get在初次读
2021-08-03 16:24:44
82
原创 vue中自定义方法this指向问题
自定义方法（普通函数）内部的this指向vue实例（vm）。不建议用箭头函数，因为箭头函数this本身没有指向，会去外边找，找到的this是window对象，而不是vue实例。
2021-08-03 15:02:06
764
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人