![](https://img-blog.csdnimg.cn/20201014180756928.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
vue
若枫~~
这个作者很懒,什么都没留下…
展开
-
路由跳转方式 路由配置 嵌套和动态区别
使用位置写在在标签里面以v-开头使用场景需要对普通DOM元素进行操作,这时候就会用到自定义指令比如我们可以使用自定义指令让一个元素进入页面就获得焦点,拖拽//注册一个全局自定义指令`v-focus`Vue.directive("focus",{//当被绑定的元素插入到DOM中时……inserted//聚焦元素el.focus();},});一个指令定义对象可以提供如下几个钩子函数(均为可选)bind指令第一次绑定到元素时调用。...原创 2022-08-02 16:04:03 · 200 阅读 · 0 评论 -
vue组件间的常用的三种通讯方式
父传子首先在使用子组件的标签上 通过自定义属性传递变量 在子组件中 通过 props 接受在接收的时候有两种接收方式 数组形式 和 对象形式 对象形式可以规定传来的变量的数据类型(type)默认值(default)以及是否必填(required)子传父首先在使用子组件的标签上定义一个自定义事件 在子组件里通过 this.$emit 去调用这个自定义事件 $emit 方法的第一个参数是自定义事件的名字 第二个参数是就是子组件要传递给父组件的变量 最后在父组件接收使用就可以了兄弟传值利用中央事件总线原创 2022-04-24 10:35:33 · 126 阅读 · 0 评论 -
modules的理解
modules的理解把仓库里的数据分模块管理每个模块里又有四个核心 state mutations getters actions然后引入仓库 并且在 modules 下注册模块在定义的 modules 里开启一个命名namespaced:trueexport default { computed: { arr() { return this.$store.state.a.arr; //使用 模块a里的state数据arr }, }, meth原创 2022-04-22 18:51:07 · 208 阅读 · 0 评论 -
vue 的路由导航守卫扩展
路由导航守卫扩展我理解的导航守卫 就是一座房子的保安 只有保安允许了才能访问页面之前说三种六个 还有一个用的不是很多的全局守卫 叫做全局解析守卫 beforeResolve导航守卫一共有三种全局的守卫 守卫所有的页面beforeEach 路由前置守卫beforeResolve 路由解析之前afterEach 路由离开全局守卫 beforeEach 和 beforeResolve他们两个都会在路由跳转前就执行 参数都是 to from next他们两个的区别 执行的时机不一样 before原创 2022-05-03 17:40:13 · 62 阅读 · 0 评论 -
vue2的路由模式以及原理和区别
vue2的路由模式以及原理和区别vue 的路由模式⼀共有两种,分别是哈希和 history.他们的区别是 hash 模式不会包含在 http 请求当中,并且 hash 不会重新加载⻚⾯,⽽使⽤ history 模式的话,如果前端的 url 和后端发起请求的 url 不⼀致的话,会报 404 错误,所以使⽤ history 模块的话我们需要和后端进⾏配合.history 的原理就是利⽤ ht...原创 2022-04-22 18:54:58 · 1040 阅读 · 0 评论 -
vue中的虚拟dom和diff算法
虚拟dom虚拟 dom 是利用 js 描述元素与元素的关系,用 js 对象来表示真实的 DOM 树结构,创建一个虚拟 DOM 对象由于在浏览器中操作 DOM 是很昂贵的。频繁的操作 DOM,会产⽣⼀定的性能问题.在组件渲染的时候会调用 render 函数,这个函数会生成一个虚拟 dom,再根据这个虚拟 dom 生成真实的 dom,然后这个真实的 dom 会挂载到我们的页面中。如果只是渲染一个页面后期不改动的话 那么虚拟 dom 其实成本更高 因为 都要渲染成真实的 dom如果组件内有响应的数据,数原创 2022-05-03 17:34:15 · 360 阅读 · 0 评论 -
vuex的理解
vuex 是 vue 的状态管理工具 管理项目中的公共数据 能够在所有的组件中使用 一共有五大核心 state 存放公共数据的地方 通过 this.$store.state.xxx调用 mutations 修改 state 的地方 只有这里能修改 通过this.$store.commit 调用 getters 相当于是之前的计算属性 通过 this.$store.getters 调用 actions 执行异步操作的地方 通过 this.$store.dispatch 调用 modules 模块化vuex原创 2022-04-22 10:58:12 · 518 阅读 · 0 评论 -
vue2的路由守卫
vue2的路由守卫路由的导航守卫 又叫做路由的钩子函数(生命周期函数)就是在跳转页面的 时候把 路由拦下来 做一些操作 再放行一共有三种第一种是全局守卫beforeEach 路由进入之前afterEach 路由进入之后第二种 组件内守卫beforeRouteEnter 路由进入之前beforeRouteUpdate 路由更新之前beforeRouteLeave 路由离开之前第三种独享守卫beforeEnter 路由进入之前有三个参数to from nextnext 这个参数原创 2022-04-22 18:59:13 · 3997 阅读 · 0 评论 -
vue组件传值的八种方式和多环境变量
组件传值的八种方式父传子首先在使用子组件的标签上 通过自定义属性传递变量 在子组件中 通过 props 接受在接收的时候有两种接收方式 数组形式 和 对象形式 对象形式可以规定传来的变量的数据类型(type)默认值(default)以及是否必填(required)子传父首先在使用子组件的标签上定义一个自定义事件 在子组件里通过 this.$emit 去调用这个自定义事件 $emit 方法的第一个参数是自定义事件的名字 第二个参数是就是子组件要传递给父组件的变量 最后在父组件接收使用就可原创 2022-05-03 17:41:41 · 670 阅读 · 0 评论 -
vue的watch监听的用法
watch监听的用法watch 监听路由的变化监听路由的话就是监听 $router watch: { $route: { handler(newval, oldval) { console.log(newval, oldval); }, }, },watch 监听 数据的变化watch 有三个参数 deep immediate handler当我们不需要 deep 和 immediate 的时候 就可以简写为一个函数 这个函数就是 h原创 2022-04-22 19:02:39 · 2043 阅读 · 0 评论 -
vue中页面和组件生命周期的执行顺序
页面—beforeCreate页面—created页面—beforeMount组件—beforeCreate组件—created组件—beforeMount组件—mounted页面—mounted原创 2022-04-22 11:03:29 · 1148 阅读 · 0 评论 -
vue的路由模式
vue 的路由模式⼀共有两种,分别是哈希和 history.他们的区别是 hash 模式不会包含在 http 请求当中,并且 hash 不会重新加载⻚⾯,⽽使⽤ history 模式的话,如果前端的 url 和后端发起请求的 url 不⼀致的话,会报 404 错误,所以使⽤ history 模块的话我们需要和后端进⾏配合. history 的原理就是利⽤ html5 新增的两个特性⽅法,分别是 pushState 和 replaceState 来完成的.........原创 2022-04-22 10:59:48 · 5918 阅读 · 0 评论 -
vue生命周期
什么是生命周期函数生命周期函数 又叫钩子函数 是到了某一个时间点会自动触发 我们讨论的是 vue 实例的钩子函数 从 vue 实例创建到销毁的过程中 到了一定的时间节点就会触发生命周期函数有哪些创建阶段 beforeCreate 实例创建之前 这个时候什么都没有 data methods 都不能用 也没有 this created 创建之后 也是最早的可以使用 data 和 methods 的钩子函数 这个时候有 this 了 beforeMount 组件挂载之前 .原创 2022-04-22 10:40:03 · 629 阅读 · 0 评论 -
vue的双向数据绑定原理以及步骤
vue.js是采用数据劫持结合发布者-订阅者模式的方式,通过Object.defineProperty()来劫持各个属性的setter,getter,在数据变动时发布消息给订阅者,触发相应的监听回调来渲染视图。原创 2022-08-02 16:08:13 · 196 阅读 · 0 评论 -
keep-alive
keep-alive 是 vue 内置的⼀个组件,⽽这个组件的作⽤就是能够缓存不活动的组件,我们能够知道,⼀般情况下,组件进⾏切换的时候,默认会进⾏销毁,如果有需求,某个组件切换后不进⾏销毁,⽽是保存之前的状态,⽐如说刚刚填好的表单数据。那么就可以利⽤ keep-alive 来实现被缓存的组件 切换的时候不会触发创建和销毁的钩子函数 而是会触发跟 keep-alive 相关的 activated(激活) deactivated(停用)这两个钩子函数keep-alive 标签 有 include 属性原创 2022-07-08 15:22:49 · 112 阅读 · 0 评论