vue学习笔记
做李的英雄
点滴记录,逐步成长。我会定期写博客分享个人所学,有不正确的欢迎大家指正。一起努力,一起进步吧。
展开
-
Vue组件通信
父组件访问子组件方法一:通过$children拿到子组件在父组件中console.log(this.$children);方法二:通过给子组件加ref(我理解为给子组件一个标记),ref等号后面的内容相当于给子组件重命名,并且在父组件中通过$refs拿到写了ref(有标记)的子组件 <cpn ref="c1"></cpn> --- console.log(this.$refs.c1);<!DOCTYPE html><html lang="en原创 2022-03-06 19:24:14 · 365 阅读 · 0 评论 -
vue插槽slot
插槽实例插槽可以提高组件的可扩展性为什么使用插槽通过共用一个组件,并在该组件中预留插槽,能够提高开发效率结构相同但内容不同时,考虑使用插槽怎么使用插槽抽取共性,保留不同插槽的基本使用具名插槽的使用编译的作用域作用域插槽...原创 2021-09-04 14:44:12 · 48 阅读 · 0 评论 -
vue实现导航守卫
为了防止用户直接通过修改url实现页面跳转,需要写导航守卫防止用户这样操作。// 挂载路由导航守卫router.beforeEach((to, from, next) => { // to 将要访问的路径 // from 代表从哪个路径跳转而来 // next 是一个函数,表示放行 // next() 放行 next('/login') 强制跳转 // 如果用户访问的登录页,直接放行 if(to.path === 'login') return next()原创 2021-08-03 17:09:03 · 350 阅读 · 0 评论 -
vue如何去除url中的#号
vue-router默认使用的是hash模式,在路由加载的时候,项目中的url会自带#。如果不想使用#,可以使用vue-router的另一种模式history。在文件目录下的 router->index.js中添加mode: 'history',即可export default new Router({ mode: 'history', routes: [ { path: '/', name: 'HelloWorld', component: H原创 2021-07-11 14:20:42 · 2390 阅读 · 1 评论 -
“@/“路径是什么意思?
在vue的项目中,我们会遇到import Vue from 'vue'import Router from 'vue-router'import searchinput from '../components/mod/searchinput'import HelloWorld from '@/components/HelloWorld'这样的路径引用其中,./ 表示的是当前目录下,../表示的是父级目录下,@/ 是webpack设置的路径别名,具体代表什么路径,要看webpack的buil原创 2021-07-11 10:04:56 · 5051 阅读 · 0 评论 -
vue学习笔记 v-show 和 v-if 的异同
v-showv-show 的本质是操作css, 控制元素的display属性为none, 具有更高的初始开销v-show 只会编译一次,只会就是控制cssv-ifv-if 的本质是在DOM树中增加和删除元素, 具有更高的切换开销v-if也是惰性的,只有当第一次条件为真时才会渲染,如果第一次条件为假则不进行渲染v-if会不停销毁和创建总结 : 对于切换频繁的用 v-show 更好, 而切换不频繁的用 v-if 更好...原创 2021-07-09 09:44:49 · 77 阅读 · 0 评论