vue中插槽的作用:传送门
vue组件的data方法为什么是函数形式:函数返回的是新对象不会出现多个组件应用同一个对象(地址)避免修改数据带来的连锁反应。
v-for中 key值的作用:需要使用key来给每个节点做一个唯一标识,Diff算法就可以正确的识别此节点,找到正确的位置区插入新的节点。
This的指向问题:谁调用function(),就指向谁。而Vue中一般指向的是this所在的组件Vue实例本身。
数据请求应该在vue生命周期的那个阶段?
<template>
<div>
这是一个示例
</div
</template>
<script>
export default {
data() {
return {
}
},
methods: {
getData() {
// 请求数据
}
},
mounted() {
// 调用请求数据的方法
this.getData()
}
}
</script>
JS数组遍历方法有哪些:
for循环
for(j = 0,len=arr.length; j < len; j++) {
}
foreach循环
//1 没有返回值
arr.forEach((item,index,array)=>{
//执行代码
})
//参数:value数组中的当前项, index当前项的索引, array原始数组;
//数组中有几项,那么传递进去的匿名回调函数就需要执行几次;
map循环
arr.map(function(value,index,array){
//do something
return XXX
})
forof遍历
for (var value of myArray) {
console.log(value);
}
filter遍历
var arr = [
{ id: 1, text: 'aa', done: true },
{ id: 2, text: 'bb', done: false }
]
console.log(arr.filter(item => item.done))
every遍历
var arr = [ 1, 2, 3, 4, 5, 6 ];
console.log( arr.every( function( item, index, array ){
return item > 3;
}));
false
some遍历
var arr = [ 1, 2, 3, 4, 5, 6 ];
console.log( arr.some( function( item, index, array ){
return item > 3;
}));
true
reduce
[0, 1, 2, 3, 4].reduce(function(previousValue, currentValue, index, array){
return previousValue + currentValue;
});
reduceRight
var arr = [0,1,2,3,4];
arr.reduceRight(function (preValue,curValue,index,array) {
return preValue + curValue;
}); // 10
find
var stu = [
{
name: '张三',
gender: '男',
age: 20
},
{
name: '王小毛',
gender: '男',
age: 20
},
{
name: '李四',
gender: '男',
age: 20
}
]
function getStu(element){
return element.name == '李四'
}
stu.find(getStu)
//返回结果为
//{name: "李四", gender: "男", age: 20}
findIndex
[1,2,3].findIndex(function(x) { x == 2; });
keys,values,entries
for (let index of ['a', 'b'].keys()) {
console.log(index);
}
// 0
// 1
for (let elem of ['a', 'b'].values()) {
console.log(elem);
}
// 'a'
// 'b'
for (let [index, elem] of ['a', 'b'].entries()) {
console.log(index, elem);
}
// 0 "a"
// 1 "b"
<!DOCTYPE html> 规定了浏览器文档使用哪种html或者xhtml规范。
New Date()可以获取的是PC本地的时间。
vueAPP适配是怎么写的,用的什么单位?
document.ready以及和window.onload的先后顺序
document.ready 和 window.onload 的区别是:document.ready方法在DOM树加载完成后就会执行,而window.onload是在页面资源(比如图片和媒体资源,它们的加载速度远慢于DOM的加载速度)加载完成之后才执行。
html网页元素加载完后触发哪个事件:选项有onready onchange onload onblur ?Onready是先于onload执行的,onload是要等所有元素包括img之类的加载完成之后才会执行的,而onready是只要DOM结构绘制完成就能执行。如果有多个onload函数,它只会执行最后一个函数,而onready是有多少个执行多少个。
html5增加了<main><header><footer><aside><section><video><audio><time><data>之类的语义化标签, 搜索引擎会利用爬虫分析抓取页面结构内容,有利于SEO,页面结构更加清晰,利于维护.提高页面可访问性,不会在样式加载不正常的时候一团乱,维持基本结构。利于部分残障人士页面阅读器解析。
cookie sessionStorage localStorage indexDb,cookie按设定的时间内有效,最多4k, 两个storage都是html5新api,存储键值对,sessionStorage会话存储,页面访问时间内有效,关闭页面失效,localStorage一直有效,关闭页面不会失效,两个都是最大5M,indexdb也是h5新api,浏览器内置小型数据库
浮动脱离了正常文档流,会导致父元素高度塌陷,后面元素会挤到浮动元素下方,造成布局错乱。清除浮动:1.父元素创建BFC,使其处于单独的块级渲染区域 overflow不为visible,float不为none,display值为flex grid inline-box table, position为absolute或fixed都可以创建。2.父元素的伪元素::after display:block,heght:0,visbility:hidden,clear:both,content:'.'
发布者订阅者模式:
属性document.body.scrollWidth,表示的是网页中滚动条的宽度吗?不是的,它表示的是网页正文全文的宽度。
offsetsetWidth clientWidth分别代表可见区域的宽度,还有高度等。
在JS里,两个整数进行除法,得到的数是小数,要得到整数则用parseInt和Math.round等等。
form可以包含包括input,文本,单选,复选,textarea等。
闭包:
闭包指的是有权访问另一个函数作用域中的变量的函数 | 闭包是在在外部可以访问函数内部的变量或者方法。
优点:一个是可以读取函数内部的变量,另一个就是让这些变量的值始终保持在内存中。
缺点:1.由于闭包会使得函数中的变量都被保存在内存中,内存消耗很大,所以不能滥用闭包,否则会造成网页的性能问题,在IE中可能导致内存泄露。解决方法是,在退出函数之前,将不使用的局部变量全部删除。2.闭包会在父函数外部,改变父函数内部变量的值。所以,如果你把父函数当作对象(object)使用,把闭包当作它的公用方法(Public Method),把内部变量当作它的私有属性(private value),这时一定要小心,不要随便改变父函数内部变量的值。
计算属性和监听器有什么区别
我们可以使用方法达到和计算属性同样的效果,
区别在于计算属性具有缓存,只有当计算属性所依赖的属性发生改变时,才会重新去计算,而方法每次都会去重新计算结果。
Watch VS Computed
watch是观察某一个属性的变化,重新计算属性值。computed是通过所依赖的属性的变化重新计算属性值。
大部分情况下watch和computed几乎没有差别。但如果要在数据变化的同时进行异步操作或者是比较大的开销,那么watch为最佳选择。
JS的执行机制 :传送门
vuecli如何使用json 数据模拟:传送门
行内块元素盒子之间的3px空白间距(代码换行符导致):传送门
跨域怎么实现:1.jsonp 2.代理 3.php header写允许跨域。
eval函数,它可以解释由JS原码组成的字符串
然后这个函数不能用调式工具的断点来调试
这个函数是js自带的函数,使用的话它会引起XSS攻击,
还有一个就是这个函数,它会不会有效率问题,该函数是动态解释字符串,会不会存在效率问题:效率问题主要还是在自身逻辑上面
div采用绝对定位,需要z-index 设置层叠关系;
v-if显示隐藏是将dom元素整个添加或删除,而v-show隐藏则是为该元素添加css--display:none,dom元素还在。
一般来说,v-if
有更高的切换开销,而 v-show
有更高的初始渲染开销。因此,如果需要非常频繁地切换,则使用 v-show
较好;如果在运行时条件很少改变,则使用 v-if
较好。:传送门
Jquery的bind跟on绑定事件的区别:主要是事件冒泡(事件代理);
jquery文档中bind和on函数绑定事件的用法:
.bind(events [,eventData], handler)
.on(events [,selector] [,data], handler)
从文档中可以看出,.on方法比.bind方法多一个参数'selector'
.on的selector参数是筛选出调用.on方法的dom元素的指定子元素,如:
$('ul').on('click', 'li', function(){console.log('click');})就是筛选出ul下的li给其绑定click事件;
那么这个selector参数的好处是什么?
好处在于.on方法
原理是事件冒泡,进行事件委托,子元素把事件委托给父元素进行事件处理;
这样的好处
1.万一子元素非常多,给每个子元素都添加一个事件,会影响到性能;
2.为动态添加的元素也能绑上指定事件;
在非箭头函数下, this 指向调用其所在函数的对象
改变this的指向:1.箭头函数 2.that 3.apply,call,bind 4.new。
盒子上下居中:定位和弹性盒子
addEventListener可以多次给DOM对象添加监听事件(简述:一个监听对象一般只会有一个监听事件,多余的会移除掉)
如果要删除的话,用removeEvent 、
onclick和addEventListener区别
box.onclick = function(){ console.log('1') }
box.onclick = function(){ console.log('2') } //会覆盖1
box.addEventListener('click',function(){ console.log('1') })
box.addEventListener('click',function(){ console.log('2') }) //不会覆盖
flex弹性盒模型
clear:both;
// 元素左侧和右侧均不允许出现浮动元素
windows的status对象是用来指定用来指定浏览器状态栏里面的临时消息
在JavaScript中,有三种常用的绑定事件的方法:
1、在DOM元素中直接绑定;
2、在JavaScript代码中绑定;
3、绑定事件监听函数;
可以在DOM元素上绑定onclick、onmouseover、onmouseout、onmousedown、onmouseup、ondblclick、onkeydown、onkeypress、onkeyup等。但不符合样式、行为、结构 三者分离的概念
事件对象有一个方法可以阻止事件的传播:stopPropagation()
$("?").click(function(e){
alert("4396")
e.stopPropagation()
});
父作用域以及父作用域的父作用域,一直到顶层作用域,这样的一个条链叫作用域链
bind()
方法创建一个新的函数,在bind()
被调用时,这个新函数的this
被bind的第一个参数指定,其余的参数将作为新函数的参数供调用时使用。
call()
方法使用一个指定的 this
值和单独给出的一个或多个参数来调用一个函数。
apply()
方法调用一个具有给定this
值的函数,以及作为一个数组(或类似数组对象)提供的参数。
call()方法的作用和 apply() 方法类似,区别就是
call()
方法接受的是参数列表,而apply()
方法接受的是一个参数数组。