- 博客(25)
- 收藏
- 关注
RSS订阅
1原创 路由导航守卫扩展
我理解的导航守卫 就是一座房子的保安 只有保安允许了才能访问页面还有一个用的不是很多的全局守卫 叫做全局解析守卫 beforeResolve导航守卫一共有三种 全局的守卫 守卫所有的页面 beforeEach 路由前置守卫 beforeResolve 路由解析之前 afterEach 路由离开全局守卫 beforeEach 和 beforeResolve 他们两个都会在路由跳转前就执行 参数都是 to from next 他们两个的区别 执行的时机不一样 beforeEach 是在路由规则...
2022-04-27 16:15:13
92
原创 多环境变量
一般分为开发环境和生产环境development 开发 production 生产（上线） 怎么配置多环境变量 首先建立两个文件 在根目录 .env.dev 里面写上 NODE_ENV="development" .env.prod 里面写上 NODE_ENV="production"这样我们可以通过 process.env.NODE_ENV 这个变量来判断当前的环境 比如我们可以通过判断不同的环境 在 axios 请求的时候设置不同的 baseURL 在开发的时候使用测试接口 在上线的时候使用真实
2022-04-27 16:13:52
84
原创 组件传值的八种方式
父传子 首先在使用子组件的标签上 通过自定义属性传递变量 在子组件中 通过 props 接受 在接收的时候有两种接收方式 数组形式 和 对象形式 对象形式可以规定传来的变量的数据类型（type）默认值（default）以及是否必填（required） 子传父 首先在使用子组件的标签上定义一个自定义事件 在子组件里通过 this.emit 去调用这个自定义事件 emit 方法的第一个参数是自定义事件的名字 第二个参数是就是子组件要传递给父组件的变量 最后在父组件接收使用就可以了 ..
2022-04-27 16:13:15
604
原创 Vue.extend
使用基础 Vue 构造器，创建一个“子类”。参数是一个包含组件选项的对象。 可以理解为创建子组件的 可以用 mount 或者 el 指定这个子组件挂载到哪里
2022-04-27 16:10:01
77
原创 mixin 混入
混入 (mixin) 提供了一种非常灵活的方式，来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项。当组件和混入对象含有同名选项时，这些选项将以恰当的方式进行“合并”，出现冲突的时候以组件优先 比如，生命周期函数就会合并 但是如果组件和混入有相同的变量的时候 会以组件的优先全局混入 混入也可以进行全局注册。使用时格外小心！一旦使用全局混入，所有的实例都会触发...
2022-04-27 16:09:24
70
原创 Vue.use 是⼲什么的？
vue.use 是用来安装 Vue.js 插件。这个插件可以是一个组件也可以是一个函数，插件里要有一个 install 方法，install 方法调用时，他的第一个参数就是 Vue 在调用 vue.use 方法的时候就会执行 Vue.install 方法该方法需要在调用 new Vue() 之前被调用。...
2022-04-27 16:08:48
134
原创 组件写 name 有啥好处？
增加 name 属性，可以实现组件递归调⽤自身，调用的时候用的就是 name 名字 可以表示组件的具体名称，⽅便调试和查找对应的组件 比如说 keep-alive 的 include 和 exclude 就是通过组件的 name 属性区分谁缓存谁不缓存的...
2022-04-27 16:07:59
377
原创 diff 算法
diff 算法就是对虚拟 dom 进行对比，并返回一个 patch 对象，这个对象的作用是存储两个节点不同的地方，最后用 patch 里记录的信息去局部更新真实的 domdiff 算法的步骤 1.js 对象表示真实的 dom 结构，就是我们说的生成一个虚拟 dom，再用虚拟 dom 构建一个真的 dom 树，放到页面中。 2.状态改变的时候生成一个新的虚拟 dom 跟旧的进行对比，这个对比的过程就是 diff 算法，通过 patch 对象记录差异 3.把记录的差异用在第一个虚拟 dom 构建的真实的 d
2022-04-27 16:07:25
104
原创 虚拟 dom
虚拟 dom 是利用 js 描述元素与元素的关系，用 js 对象来表示真实的 DOM 树结构，创建一个虚拟 DOM 对象 由于在浏览器中操作 DOM 是很昂贵的。频繁的操作 DOM，会产⽣⼀定的性能问题. 在组件渲染的时候会调用 render 函数，这个函数会生成一个虚拟 dom，再根据这个虚拟 dom 生成真实的 dom，然后这个真实的 dom 会挂载到我们的页面中。 如果只是渲染一个页面后期不改动的话 那么虚拟 dom 其实成本更高 因为 都要渲染成真实的 dom 如果组件内有响应的数据，数据发生改变的
2022-04-27 16:06:46
66
原创 axios 封装
先创建 utils 文件夹 创建 request.js 引入 axios 配置 基本路径和超时时间 配置请求拦截和响应拦截 在请求拦截里可以放 loading 和 token 在响应拦截中 可以 清除 loading 还有处理错误编码字典 最后把我们封装的 axios 实例 导出 axios 拦截器 拦截器有两种 一个是请求拦截一个是响应拦截 拦截器不需要手动调用而是每次发送 http 请求的时候都会自动触发 我们一般在..
2022-04-25 16:08:22
2547
原创 vue 中 data 发⽣变化,视图不更新如何解决?
在 vue2 中 vue 实例的 data 数据是响应式 的 就是数据变了 视图也会跟着变，如果给某一个 data 新添加了一个字段 这个新添加的字段因为 js 的限制不响应，需要使用 this.$set 方法代替原本的普通添加方法 就能实现响应，这个方法的三个参数 是给谁添加 添加的字段 初始值 如果不是在组件中 用这个方法 那么就用 Vue.set...
2022-04-25 16:05:19
804
原创 说⼀下 vue 和 jquery 的区别
⾸先呢 jquery 他是⽤ js 封装的⼀个类库,主要是为了⽅便操作 dom 元素,⽽ vue 他是⼀个框架,并且呢,他会从真实 dom 构建出⼀个 虚拟的 dom 树,通过 di!算法渲染只发⽣改变的 dom 元素,其他的相同的 dom 元素不⽤在重新渲染. ⽽使⽤ jquery 去改变 dom 元素 的时候,即使有相同的 dom 元素也会重新渲染, jq 重点操作 dom，而 vue 重点操作数据。以上就是我对 vue 和 jquery 区别的理解....
2022-04-25 16:04:40
1251
原创 插槽
⾸先呢,所谓的插槽就是⼀个占位符,将⾃定义组件的内容展示出来.我们知道⾃定义的组件⾥⾯如果写内容的话,⻚⾯是不会显 示出来的,如果我们想让⾃定义组件⾥⾯的内容显示出来,我们就需要使⽤ slot 的插槽. ⽽插槽分别具名插槽和匿名插槽、以及作⽤域插槽. 我们⽤的⽐较多的具名插槽和匿名插槽,具名插槽需要所有 slot 标签上指定 name 属性,⽽在对应标签上添加# 属性指定名字. 在项⽬中我们⼀般在进⾏组件封装的时候会使⽤插槽,以上就是我对插槽的理解.作用域插槽 是把子组件里的数据传到父组件的插槽里使用
2022-04-25 16:03:54
100
原创 跨域
什么是跨域 跨域是浏览器的跨域 不符合 域名 协议 端口号一样（同源策略） 的请求都会出现跨域的问题 跨域的解决方法 最多的情况是后端处理跨域 前端的跨域 服务器代理 jsonp vue 中是 proxy 代理实现跨域vue 的跨域 用 proxy 实现...
2022-04-25 16:02:03
961
原创 过滤器 filter
所谓的 vue 过滤器就是将数据进⾏⼆次处理,得到我们想要的结果数据vue 的过滤器分为两种,第⼀种是全局过滤器,通过 vue.filter 来进⾏定义,第⼆种是局部过滤器,需要定义在组件内部，用 filters 过滤项⽬中我们通过过滤器将后台返回的状态 0 和 1 转化为⽀付或者未⽀付 还有对时间格式进行过滤vue3 中没有过滤器了...
2022-04-24 15:58:16
250
原创 keep-alive
keep-alive 是 vue 内置的⼀个组件，⽽这个组件的作⽤就是能够缓存不活动的组件，我们能够知道，⼀般情况下，组件进⾏切换的时候，默认会进⾏销毁，如果有需求，某个组件切换后不进⾏销毁，⽽是保存之前的状态，⽐如说刚刚填好的表单数据。那么就可以利⽤ keep-alive 来实现被缓存的组件 切换的时候不会触发创建和销毁的钩子函数 而是会触发跟 keep-alive 相关的 activated（激活） deactivated（停用）这两个钩子函数keep-alive 标签 有 incl
2022-04-24 15:56:01
67
原创 常用的修饰符
.trim 去除⾸尾多余的空格.stop 阻⽌事件冒泡 .once 只渲染⼀次.self 事件只作⽤在元素本身.number 将值转化为 number 类型.capter 组件之间捕获.prevent 阻⽌元素的默认⾏为.native 事件穿透,让我们可以在⾃定义组件上触发原生的事件...
2022-04-24 11:21:06
62
原创 组件通信
父传子首先在使用子组件的标签上 通过自定义属性传递变量 在子组件中 通过 props 接受 在接收的时候有两种接收方式 数组形式 和 对象形式 对象形式可以规定传来的变量的数据类型（type）默认值（default）以及是否必填（required）子传父首先在使用子组件的标签上定义一个自定义事件 在子组件里通过 this.emit 去调用这个自定义事件 emit 方法的第一个参数是自定义事件的名字 第二个参数是就是子组件要传递给父组件的变量 最后在父组件接收使用就可以了兄弟组件 利用中央事件
2022-04-24 11:18:17
55
原创 nextTick
在 dom 更新之后执行的延迟回调 因为 vue 的 dom 更新是异步的 所以 当 dom 还未更新的时候我们无法拿到最新的 dom 来用 放在 nextTick 里的代码 就会在 dom 更新之后执行 就能拿到最新的 dom 来用了
2022-04-24 11:16:28
229
原创 如何使用组件通信
父传子首先在使用子组件的标签上 通过自定义属性传递变量 在子组件中 通过 props 接受 在接收的时候有两种接收方式 数组形式 和 对象形式 对象形式可以规定传来的变量的数据类型（type）默认值（default）以及是否必填（required）子传父首先在使用子组件的标签上定义一个自定义事件 在子组件里通过 this.emit 去调用这个自定义事件 emit 方法的第一个参数是自定义事件的名字 第二个参数是就是子组件要传递给父组件的变量 最后在父组件接收使用就可以了兄弟组件 利用中央事件
2022-04-24 11:13:37
184
原创 组件通信
父传子首先在使用子组件的标签上 通过自定义属性传递变量 在子组件中 通过 props 接受 在接收的时候有两种接收方式 数组形式 和 对象形式 对象形式可以规定传来的变量的数据类型（type）默认值（default）以及是否必填（required）子传父首先在使用子组件的标签上定义一个自定义事件 在子组件里通过 this.emit 去调用这个自定义事件 emit 方法的第一个参数是自定义事件的名字 第二个参数是就是子组件要传递给父组件的变量 最后在父组件接收使用就可以了兄弟组件 利用中央..
2022-04-24 11:11:04
43
原创 methods computed watch
5.1 methods 就是方法 我们写的点击事件等各种事件都放在 methods 里5.2 计算属性 computed 计算属性 有缓存功能就是当跟他有关的值发生变化的时候才会重新计算 还有一个特点就是必须要有 return 值 return 就是把计算的结果 return 出去5.3 watch watch 可以监听 数据和路由的变化watch 监听路由的变化 监听路由的话就是监听 $router watch: { $route: { handler(newval...
2022-04-22 16:03:43
58
原创 导航的守卫
路由的导航守卫 又叫做路由的钩子函数（生命周期函数） 就是在跳转页面的 时候把 路由拦下来 做一些操作 再放行 一共有三种第一种是全局守卫 beforeEach 路由进入之前 afterEach 路由进入之后第二种 组件内守卫 beforeRouteEnter 路由进入之前 beforeRouteUpdate 路由更新之前 beforeRouteLeave 路由离开之前第三种 独享守卫 beforeEnter 路由进入之前有三个参数 to from next next 这个参数 在路由 3.
2022-04-22 16:01:58
61
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人