一,css部分
1,简单介绍下css权重优先级:
默认样式<标签选择器<类选择器<id选择器<行内样式<!important 0 1 10 100 1000 1000以上 继承的权重为0 (字体的css会继承自父类标签元素) 权重会叠加 (div.box 权重:1+10=11) (div #box 权重:1+100=101) 相同权重的选择器,后边的代码会覆盖前面的
2,实现一个不知道宽高的盒子水平垂直居中,有哪几种实现方式:
a) 使用CSS方法: 父盒子设置:display:table-cell;text-align:center;vertical-align:middle; 子盒子设置:display:inline-block;vertical-align:middle; 代码实现:=> .father{ width:300px; height:300px; display:table-cell; text-align:center; vertical-align:center; } .son{ background:red; display:inline-block; vertical-align:middle; } b) 使用CSS3 transform: 父盒子设置:position:relative; 子盒子设置:position:absolute;left:50%;top:50%;transform:transform(-50%,-50%); 代码实现:=> .father{ width:300px; height:300px; position:relative; } .son{ background:red; position:absolute; top:50%; left:50%; transform:transform(-50%,-50%); } c) 弹性盒子: 父盒子设置:display:flex;justify-content:center;align-item:center; 子盒子设置:空,不需要设置 代码实现:=> .father{ width:300px; height:300px; display:flex; justify-content:center; align-item:center; } .son{ background:red; } [参考]([https://zhuanlan.zhihu.com/p/27186791][1])
3,如何用css画一个三角形:
代码实现:=> #eg{ width: 0; height: 0; border: 100px solid transparent; border-bottom: 100px solid blue; }
二,JS部分:
1,请写一段代码将"2019-4-28"转成"2019年4月28日"
代码实现:=> let str = '2019-4-28'; let year = str.split('-')[0]; let month = str.split('-')[1]; let date = str.split('-')[2]; let str1 =year+"年"+month+"月"+date+"日"; console.log(str1);
2,写一段代码将数组 ['a','b','c'] , 变成 ['c','b','a'] 。(可使用js自带方法,也可以自己实现)
代码实现:=> var arr=['a','b','c']; //var arr1=arr.sort();//正序 var arr1=arr.reverse();//反序 console.log(arr1);
三,Vue部分:
1,vue的生命周期钩子函数有哪些?
answer:=> beforeCreate created beforeMount mounted beforeUpdate updated activated deactivated beforeDestroy destroyed [详细]([https://www.cnblogs.com/xkloveme/p/7435271.html][2])
2,什么是keep-alive?它有什么作用?与他对应的钩子函数是那些?
answer:=> 是Vue的内置组件,能在组件切换过程中将状态保留在内存中,防止重复渲染DOM。 对应的钩子函数: activated 类型:func 触发时机:keep-alive组件激活时使用; deactivated 类型:func 触发时机:keep-alive组件停用时调用;
3,vue的事件修饰符是什么,她能做什么事?举个栗子:在vue的click事件中,如何阻止事件传播?
answer:=> 事件修饰符处理了许多DOM事件的细节,让我们不再需要花大量的时间去处理这些烦恼的事情, 而能有更多的精力专注于程序的逻辑处理。在Vue中事件修饰符主要有: .stop:等同于JavaScript中的event.stopPropagation(),防止事件冒泡 .prevent:等同于JavaScript中的event.preventDefault(),防止执行预设的行为 (如果事件可取消,则取消该事件,而不停止事件的进一步传播) .capture:与事件冒泡的方向相反,事件捕获由外到内 .self:只会触发自己范围内的事件,不包含子元素 .once:只会触发一次 举个栗子:=> .stop 防止事件冒泡 冒泡事件:嵌套两三层父子关系,然后所有都有点击事件,点击子节点,就会触发从内至外 子节点-父节点的点击事件
4,什么是vue router路由导航守卫?工作中用过她吗?常用她处理什么问题?
导航守卫即是在路由跳转的时候,根据vue-router提供的导航守卫主要用来通过跳转或取消参数 或查询的改变并不会出触发进入/离开的导航守卫 路由跳转前做一些验证,比如登录验证,是网站中的普遍需求。 对此,vue-route 提供的 beforeRouteUpdate 可以方便地实现导航守卫(navigation-guards)。
5,从路由/user跳转到/home,有几种方式?
1.router-link 2.this.$router.push() (函数里面调用) 3.this.$router.replace() (用法同上,push) 4.this.$router.go(n) () [详细介绍]([https://blog.csdn.net/jiandan1127/article/details/86170336][3])
6,什么是vuex?他有什么作用?如何改变store中的状态(state)?
answer:=> vuex是一个专为vue.js应用程序开发的状态管理模式。vuex解决了组件之间同一状态的共享问题。 当我们的应用遇到多个组件之间的共享问题时会需要 状态管理核心状态管理有5个核心,分别是state、getter、mutation、action以及module。 1.state state为单一状态树,在state中需要定义我们所需要管理的数组、对象、字符串等等,只有在这里定义了, 在vue.js的组件中才能获取你定义的这个对象的状态。 2.简单的 store 模式 var store = { debug: true, state: { message: 'Hello!' }, setMessageAction (newValue) { if (this.debug) console.log('setMessageAction triggered with', newValue) this.state.message = newValue }, clearMessageAction () { if (this.debug) console.log('clearMessageAction triggered') this.state.message = '' } } 所有 store 中 state 的改变,都放置在 store 自身的 action 中去管理。 这种集中式状态管理能够被更容易地理解哪种类型的 mutation 将会发生,以及它们是如何被触发。 当错误出现时,我们现在也会有一个 log 记录 bug 之前发生了什么。 此外,每个实例/组件仍然可以拥有和管理自己的私有状态: var vmA = new Vue({ data: { privateState: {}, sharedState: store.state } }) var vmB = new Vue({ data: { privateState: {}, sharedState: store.state } }) End!
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网
猜你喜欢:本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
Kafka技术内幕
郑奇煌 / 人民邮电出版社 / 2017-11 / 119.00元
Kafka自LinkedIn开源以来就以高性能、高吞吐量、分布式的特性著称,本书以0.10版本的源码为基础,深入分析了Kafka的设计与实现,包括生产者和消费者的消息处理流程,新旧消费者不同的设计方式,存储层的实现,协调者和控制器如何确保Kafka集群的分布式和容错特性,两种同步集群工具MirrorMaker和uReplicator,流处理的两种API以及Kafka的一些高级特性等。一起来看看 《Kafka技术内幕》 这本书的介绍吧!