目录
- 1.在用的一些组件中,如element-ui中按钮的点击事件是在组件中已经封装好的,通过$emit分发事件,事件名字叫click,然后才能绑定的点击事件
- 2.当给直接一个子组件绑定点击事件后,点击并不会生效,需要@click.native
- 3. component 标签可以在页面生成任何类型的组件,需要后面跟一个is=“类型”,常用于封装表单,当需要一个组件特有的属性时需要v-bind,如下图所示![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/fb2a0a093f2069a0c9f7740cf7fabb92.png#pic_center)
- 4.v-model原理:给input框绑定input事件,动态绑定value值,最后把input事件中的e.target.value重新赋 给value
- 5.给一个时间添加prevent修饰符为阻止默认事件,阻止冒泡事件,修饰符为stop
- 6.组件内name属性在哪里使用,控制台,注册全局组件,keep-alive(有exclude,include属性,在有大量表单时候使用)
- 7.加密crypto-js插件:[链接](https://www.cnblogs.com/libo0125ok/p/9224121.html).
- 8.window.open(‘路由地址’,‘_self’)第一个为路由的path,第二个为,替换当前页面
- 9.用路由守卫+meta给角色设定权限(后台系统)
- 10.路由模式有三种:hash history abstra(非浏览器环境)
- 11.项目优化
- 12.传值问题
- 13 作用域和作用域链
- 14vuex on绑定多个事件
- 15微信小程序跳转路由
- 16父子组件怎么传值
- 17改变值
- 18更改路由页面的标题
- 19页面跳转有哪些方式
- 20修饰符有哪些
- 21如何解决跨域
- 22如何解决跨域
- 23vuex中的数据可以跨浏览器共享吗
- 24element-ui中的input组件的change和input事件有什么区别
- 25原型链
- 26被 < keep alive>包裹住的组件会多一个生命周期
- 26this.$replace跳转路由
- 27flex的属性
- 28tostring
- 29map问题
- 30两个定时器都是异步
- 31new的过程
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.window.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,就不会存在了
13 作用域和作用域链
作用域就是一个独立的地盘,让变量不会外泄、暴露出去。
全局作用域 :任何地方都可以访问,反复使用
函数作用域(局部作用域):仅在函数内部可访问,不能反复使用
向父级作用域寻找,直到找到全局作用域还是没找到,就宣布放弃。这种一层一层的关系,就是 作用域链 。
14vuex on绑定多个事件
15微信小程序跳转路由
微信小程序一共有五个页面跳转路由:
1、wx.switchTab(Object object)----跳转到 tabBar 页面,并关闭其他所有非 tabBar 页面
2、wx.reLaunch(Object object)----关闭所有页面,打开到应用内的某个页面
3、wx.redirectTo(Object object)----关闭当前页面,跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面。使用wx.redirectTo不能返回到原页面。
4、wx.navigateTo(Object object)----保留当前页面,跳转到应用内的某个页面。但是不能跳到 tabbar 页面。使用 wx.navigateBack 可以返回到原页面。小程序中页面栈最多十层。
5、wx.navigateBack(Object object)----关闭当前页面,返回上一页面或多级页面。可通过 getCurrentPages 获取当前的页面栈,决定需要返回几层。
16父子组件怎么传值
- props和$emit
- bus
- vuex
- $attrs
- $listeners
- provide和inject
- 作用域插槽
17改变值
父组件怎么调用子组件的方法
通过this.$children或者ref的方式拿到子组件的实例
子组件怎么调用父组件的方法
通过this.$parent获取到父组件的实例
18更改路由页面的标题
meta + 路由守卫
19页面跳转有哪些方式
push replace go back forward window.open router-link
20修饰符有哪些
v-model: .trim .lazy .number
.stop .prevent
21如何解决跨域
jsonp cors 代理
22如何解决跨域
()=> import(’’)
23vuex中的数据可以跨浏览器共享吗
可以
24element-ui中的input组件的change和input事件有什么区别
input:实时变化
change: 内容要变化 然后再失去焦点
25原型链
原型链是在vue.prototype挂载的属性,main.js中vue.prototype.$xxx 为什么能在每一个组件里面通过this. $xxx来访问,因为vue是个构造函数,在vue的prototype挂载属性或方法那么他每一个实例都能访问到这个方法,这就是原型链的利用
26被 < keep alive>包裹住的组件会多一个生命周期
.activated:页面第一次进入的时候,钩子触发的顺序是created->mounted->activated
26this.$replace跳转路由
用this.$replace跳转路由替换当前页面就不能通过浏览器回到退后回去
27flex的属性
1、flex-grow属性
flex-grow 属性用于设置或检索弹性盒子的扩展比率
2、flex-shrink属性
flex-shrink 属性指定了 flex 元素的收缩规则
3、flex-basis属性
flex-basis 属性用于设置或检索弹性盒伸缩基准值。
4、flex-wrap属性
flex-wrap 属性规定flex容器是单行或者多行,同时横轴的方向决定了新行堆叠的方向。默认值:nowrap不换行
5、flex-direction属性
flex-direction 属性规定灵活项目的方向。默认值是:row
6、flex-flow属性
flex-flow 属性是 flex-direction 和 flex-wrap 属性的复合属性。
flex-flow 属性用于设置或检索弹性盒模型对象的子元素排列方式。
28tostring
数组本身没有tostring 为什么数组可以用tostring这个方法,是因为数组的原型指向array,array的原型指向opject,opject上有tostrintg这个方法,所以会继承原型对象,然后在构造函数的原型对象object是array的原型对象,所以object上方的方法array都可以用
为什么array能用tostring这个方法?是因为通过原型链找到object,实例会有_proto这个属性,指向构造函数的prototype,new array 产生了一个实际数组这个数组有一个_proto属性他只想Array的prototype,function也有tostring这个方法,如果通过原型链在object上也未找到,如果是属性就会报错,如果是方法就是null
29map问题
在一个数组中,如果数组内都为普通数据类型,用map循环,然后item=item*2,item不会改变只有return一个条件返回一个新数组才会改变
map有返回值可以返回一个return条件,for each没有返回值
30两个定时器都是异步
31new的过程
创建一个空的简单JavaScript对象(即{});
var obj = {};
设置原型链,将obj的__proto__成员指向了构造函数的prototype
obj.__proto__ = xx.prototype;
将步骤1新创建的对象作为this的上下文 ;
let o = xx.call(obj);
如果构造函数return了一个新的“对象”,那么这个对象就会取代整个new出来的结果。如果构造函数没有return对象,那么就会返回步骤1所创建的对象,即隐式返回this
let o = xx.call(obj);