vue回顾

1.在用的一些组件中,如element-ui中按钮的点击事件是在组件中已经封装好的,通过$emit分发事件,事件名字叫click,然后才能绑定的点击事件
2.当给直接一个子组件绑定点击事件后,点击并不会生效,需要@click.native

在这里插入图片描述
(原理:给这个组件最外层通过操作dom元素然后添加点击事件)
在这里插入图片描述

3. component 标签可以在页面生成任何类型的组件,需要后面跟一个is=“类型”,常用于封装表单,当需要一个组件特有的属性时需要v-bind,如下图所示在这里插入图片描述
4.v-model原理:给input框绑定input事件,动态绑定value值,最后把input事件中的e.target.value重新赋 给value

v-model.lazy绑定的是change事件
在这里插入图片描述

5.给一个时间添加prevent修饰符为阻止默认事件,阻止冒泡事件,修饰符为stop

在这里插入图片描述
e.preventDefault() 该方法阻止默认事件(标准),如不让链接跳转
e.stopPropageation() 该方法阻止默认冒泡(标准)

6.组件内name属性在哪里使用,控制台,注册全局组件,keep-alive(有exclude,include属性,在有大量表单时候使用)
7.加密crypto-js插件:链接.
8.wndow.open(‘路由地址’,‘_self’)第一个为路由的path,第二个为,替换当前页面
9.用路由守卫+meta给角色设定权限(后台系统)

原理:首先先获取到本地储存的信息然后判断来的路由不为登录路由,在有用户信息的情况下拿到用户角色,如果在路由中配置的meta.roles中包含这个角色,那么久往下执行,不然就会跳到403界面
在这里插入图片描述

10.路由模式有三种:hash history abstra(非浏览器环境)

hash:(#/)不需要做任何操作
history:后端需要把所有路径都重定向到index.html中,如果后端没有做这个操作,那所有的页面都是404
通常情况下,开发时用history模式,上线时候用hash模式,代码如下图所示
在这里插入图片描述
出了上图所示代码还要配置一个vue.config.js
在这里插入图片描述

11.项目优化

1.图片懒加载
2.路由懒加载
3.减少http请求
4.按需加载
5.cdn加载资源

12.传值问题

当父组件给子组件传值时候,会默认传到子组件根节点中,inheritAttrs设置为false,就不会存在了
在这里插入图片描述

猜你喜欢

转载自blog.csdn.net/weixin_49866029/article/details/109030231