2021-9知识点

118 阅读3分钟

1.路由导航:beforeEnter可以直接在路由的数组里面进行进行逻辑判断

image.png

beforeEnter的使用场景:
1.获取用户信息,根据是否有用户信息,动态的添加路由信息
2.获取路由的数据,可以根据实际项目需求,把路由数据放到请求里,通过vuex

2.vue是双向数据绑定,但是是单向数据流

vue还是单向数据流,v-model只不过是语法糖,它是`:value="sth"`和`@change="val => sth = val"`的简写形式我们通常在面试当中被提问,Vue是怎么实现数据响应式更新的,面试官期望听到的回答是通过`Object.defineProperty()`的`get`和`set`方法来实现响应式更新

3.构建vue+element 可以从element官网的快速上手

image.png 进行快速构建,但是没有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

image.png

如果按上图方式,命令行:npm run build,统一打包,打包出来的形式,不符合咱们的预期,还是打出来一个包,分成两个不同的index.html
不符合需求,改为如下图所示

image.png

按上图的方式,命令行:npm run build projectA,进行分项目打包,打包出来的形式如下图所示

image.png

image.png

页面本地打开没有问题,但是打包之后,页面空白:原因应该是,没有域名

6.axios请求post的问题

header:{
    'Content-Type': 'application/x-www-form-urlencoded'
    }
    用postman测试接口没有,但是本地显示400,原因:报400是因为前后端参数名称,类型等有误,如果参数没错,那么就是axios访问后端的时候参数的格式与后端不对等
    解决方案:npm install qs -save
    `qs.stringify` 是把一个参数对象格式化为一个字符串,一般是针对表单的元素,比如登录的时候
    

image.png

7.antD-vue-pro去掉刷新的动画和加载主题的loading

去掉刷新的动画,在public/index.html改为如下图配置

image.png

去掉加载主体的loading,在BasicLayout.vue 在mounted

image.png

8.在antD-vue的组件上封装,发现多选框,点击事件不好用,改变一下点击事件名称

9.一个项目:系统管理:菜单管理,机构管理,用户管理,角色管理,区域管理,数据字典

10.sortablejs排序 vuedraggable 拖拽 sortablejs对于element更友好

11.keepAlive----antD-vue-pro项目里面的源码不生效,函数式组件,缓存会发生覆盖的现象,比如:未缓存的页面切换到缓存的页面,缓存页面的操作痕迹丢失,换成模板类型的组件,就可以生效

未生效的如下图所示

image.png

生效的如下图所示

image.png

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