1.路由导航:beforeEnter可以直接在路由的数组里面进行进行逻辑判断
beforeEnter的使用场景:
1.获取用户信息,根据是否有用户信息,动态的添加路由信息
2.获取路由的数据,可以根据实际项目需求,把路由数据放到请求里,通过vuex
2.vue是双向数据绑定,但是是单向数据流
vue还是单向数据流,v-model只不过是语法糖,它是`:value="sth"`和`@change="val => sth = val"`的简写形式。我们通常在面试当中被提问,Vue是怎么实现数据响应式更新的,面试官期望听到的回答是通过`Object.defineProperty()`的`get`和`set`方法来实现响应式更新。
3.构建vue+element 可以从element官网的快速上手
进行快速构建,但是没有vue-router和vuex
或者可以直接通过npm install vue ,npm install vue-cli, npm i element-ui -S,构建一个项目
4.vue-cli2和vue-cli3的区别
vue-cli2:static,config,build,启动命令不一样,npm run dev
vue-cli3:public,.env.development,.env.production配置环境变量,启动命令不一样,npm run serve
5.vue-cli3配置多页面的应用
在vue.config.js
如果按上图方式,命令行:npm run build,统一打包,打包出来的形式,不符合咱们的预期,还是打出来一个包,分成两个不同的index.html
不符合需求,改为如下图所示
按上图的方式,命令行:npm run build projectA,进行分项目打包,打包出来的形式如下图所示
页面本地打开没有问题,但是打包之后,页面空白:原因应该是,没有域名
6.axios请求post的问题
当header:{
'Content-Type': 'application/x-www-form-urlencoded'
}
用postman测试接口没有,但是本地显示400,原因:报400是因为前后端参数名称,类型等有误,如果参数没错,那么就是axios访问后端的时候参数的格式与后端不对等
解决方案:npm install qs -save
`qs.stringify` 是把一个参数对象格式化为一个字符串,一般是针对表单的元素,比如登录的时候
7.antD-vue-pro去掉刷新的动画和加载主题的loading
去掉刷新的动画,在public/index.html改为如下图配置
去掉加载主体的loading,在BasicLayout.vue 在mounted
8.在antD-vue的组件上封装,发现多选框,点击事件不好用,改变一下点击事件名称
9.一个项目:系统管理:菜单管理,机构管理,用户管理,角色管理,区域管理,数据字典
10.sortablejs排序 vuedraggable 拖拽 sortablejs对于element更友好
11.keepAlive----antD-vue-pro项目里面的源码不生效,函数式组件,缓存会发生覆盖的现象,比如:未缓存的页面切换到缓存的页面,缓存页面的操作痕迹丢失,换成模板类型的组件,就可以生效
未生效的如下图所示
生效的如下图所示
12.使用keepAlive的页面,第一次进入页面会执行mounted,第二次进入页面,就不会执行mounted
使用keep-alive
beforeRouteEnter --> created --> mounted --> activated --> deactivated
再次进入缓存的页面,只会触发beforeRouteEnter -->activated --> deactivated 。created和mounted不会再执行
13.函数分为1.生命是函数2,赋值形函数
在JS的预编译期,声明式函数将会先被提取出来,然后才按顺序执行js代码。
14. $attrs和$listeners vue透传属性和事件
应用场景:比如我们在element或者antD-vue的ui组件上进行二次封装,如果不需要进行一些操作,
可以不用props进行传值,props传值过程太过繁琐,可以使用$attrs和$listeners,进行属性和事件的透传
15.组件传值
1.父组件向子组件传值:props
2.父组件向孙子组件或者更深层次的传值:provide和inject
3.父组件使用二次封装的子组件的一些属性或者事件:可以使用$attrs和$listeners
4.兄地组件使用$bus