一、vue相关
- vue里面父子组件和兄弟组件如何进行通信？（这个得看一下情况。组件不多的话，事件监听和触发
on和emit就够用。项目组件多而且比较复杂，那就得用vuex了。http://blog.csdn.net/mr_fzz/article/details/54636833） - 简述vue生命周期？
- 怎么定义vue-router的动态路由？怎么获取传过来的动态参数？
- 使用过哪些vue的插件？
- vue的双向数据绑定原理？
- vue-loader是什么？使用它的用途有哪些？
- vue.cli中怎样使用自定义组件？有遇到过哪些问题？
- 聊聊你对vue.js的template编译的理解？
- 读代码
<body> <div id="app"> <ol> <li v-for="todo in todos">{{todo.text}}</li> </ol> </div> <script> var app = new Vue({ el: '#app', data: { todos:[ {text:'learn javascript'}, {text:'learn vue'}, {text:'learn ...'}, ] } }) </script> </body> //运行结果 1.learn javascript 2.learn vue 3.learn ... - 使用vue构建一个基础的component
- 使用vue写一个分页插件（js逻辑即可）
二、css相关
- css中行内元素跟块级元素有什么区别？举例什么是块级元素？什么是行内元素？
行内元素指的是书写完成后不会自动换行，并且元素没有宽和高。 块级元素写完后会自动换行，有宽高可以修改。 块级元素可以包含行内元素和块级元素。行内元素不能包含块级元素，只能包含文本或者其它行内元素。 行内元素有：heda meat title lable span br a style em b i strong 块级元素有：body from select textarea h1-h6 html table button hr p ol ul dl li div 行内块元素常见的有： img input td - 写出一个less条件表达式，一个less的简单嵌套
.mixin (@a) when (@a < 20px){ color:blue; } .mixin (@a) { font-size: @a; } - 移动端input有焦点时，针对软键盘有什么处理方式？https://www.cnblogs.com/wx1993/p/6059668.html
element.scrollIntoView(alignToTop); // Boolean型参数 如果为true，元素的顶端将和其所在滚动区的可视区域的顶端对齐。 如果为false，元素的底端将和其所在滚动区的可视区域的底端对齐。 $(function() { $('input').on('click', function () { var target = this; // 使用定时器是为了让输入框上滑时更加自然 setTimeout(function(){ target.scrollIntoView(true); },100); }); }) - div中套一个div，如何把内部div水平垂直居中。https://www.cnblogs.com/Julia-Yuan/p/6648816.html
方案一： div绝对定位水平垂直居中【margin:auto实现绝对定位元素的居中】， 兼容性：,IE7及之前版本不支持 复制代码 div{ width: 200px; height: 200px; background: green; position:absolute; left:0; top: 0; bottom: 0; right: 0; margin: auto; } 复制代码 方案二： div绝对定位水平垂直居中【margin 负间距】 这或许是当前最流行的使用方法。 复制代码 div{ width:200px; height: 200px; background:green; position: absolute; left:50%; top:50%; margin-left:-100px; margin-top:-100px; } 复制代码 方案三： div绝对定位水平垂直居中【Transforms 变形】 兼容性：IE8不支持； 复制代码 div{ width: 200px; height: 200px; background: green; position:absolute; left:50%; /* 定位父级的50% */ top:50%; transform: translate(-50%,-50%); /*自己的50% */ } 复制代码 方案四： css不定宽高水平垂直居中 复制代码 .box{ height:600px; display:flex; justify-content:center;//水平方向居中 align-items:center;//垂直方向居中 /* aa只要三句话就可以实现不定宽高水平垂直居中。 */ } .box>div{ background: green; width: 200px; height: 200px; } 复制代码 方案五： 将父盒子设置为table-cell元素，可以使用text-align:center和vertical-align:middle实现水平、垂直居中。比较完美的解决方案是利用三层结构模拟父子结构 <p class="outerBox tableCell"> </p><p class="ok"> </p><p class="innerBox">tableCell</p> <p></p> <p></p> /* table-cell实现居中 将父盒子设置为table-cell元素，设置 text-align:center,vertical-align: middle; 子盒子设置为inline-block元素 */ .tableCell{ display: table; } .tableCell .ok{ display: table-cell; text-align: center; vertical-align: middle; } .tableCell .innerBox{ display: inline-block; } 方案六： 对子盒子实现绝对定位，利用calc计算位置 复制代码 <p class="outerBox calc"> </p><p class="innerBox">calc</p> <p></p> /*绝对定位，clac计算位置*/ .calc{ position: relative; } .calc .innerBox{ position: absolute; left:-webkit-calc((500px - 200px)/2); top:-webkit-calc((120px - 50px)/2); left:-moz-calc((500px - 200px)/2); top:-moz-calc((120px - 50px)/2); left:calc((500px - 200px)/2); top:calc((120px - 50px)/2); } 复制代码 - 下图是一个评论区的评论内容，实现如下布局https://segmentfault.com/a/1190000009826434
三、js相关
- JS实现一个函数对javascript中json对象进行克隆。http://www.jb51.net/article/33108.htm
var dataObjCloned=JSON.parse(JSON.stringify( dataObj )) - 分析下面代码结果
for(var i=0;i<5;i++){ setTimeout(function(){ console.log(new Date,i); },1000); } console.log(new Date,i); //运行结果 Thu Mar 15 2018 17:40:52 GMT+0800 (中国标准时间) 5 undefined Thu Mar 15 2018 17:40:53 GMT+0800 (中国标准时间) 5 Thu Mar 15 2018 17:40:53 GMT+0800 (中国标准时间) 5 Thu Mar 15 2018 17:40:53 GMT+0800 (中国标准时间) 5 Thu Mar 15 2018 17:40:53 GMT+0800 (中国标准时间) 5 Thu Mar 15 2018 17:40:53 GMT+0800 (中国标准时间) 5 for(var i=0;i<5;i++){ (function(j=i){ setTimeout(function(){ console.log(new Date,j); },1000); })(i); } console.log(new Date,i); //运行结果 Thu Mar 15 2018 17:46:53 GMT+0800 (中国标准时间) 5 undefined Thu Mar 15 2018 17:46:54 GMT+0800 (中国标准时间) 0 Thu Mar 15 2018 17:46:54 GMT+0800 (中国标准时间) 1 Thu Mar 15 2018 17:46:54 GMT+0800 (中国标准时间) 2 Thu Mar 15 2018 17:46:54 GMT+0800 (中国标准时间) 3 Thu Mar 15 2018 17:46:54 GMT+0800 (中国标准时间) 4 - 输出结果，bar函数的this指向的是谁？
var foo={ baz:1, bar:function (){ return this.baz; } }; (function(){ console.log(typeof arguments[0]()) })(foo.bar) //运行结果 undefined - 输出结果，解释一下
console.log(0.1+0.2==0.3); //运行结果 false - 编写一个数组去重的方法
- 生成一个包含10个20-50之间的随机数的数组，然后进行冒泡排序，在进行数组乱序（随机数）https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Math/random（冒泡排序）https://segmentfault.com/a/1190000010944422
冒泡排序 var arr=[9,8,3,1,2],len=arr.length,temp,swap; for(var i=0;i<len-1;i++){ swap=false; for(var j=0;j<len-i-1;j++){ if(arr[j]>arr[j+1]){ temp=arr[j]; arr[j]=arr[j+1]; arr[j+1]=temp; swap=true; } } if(!swap){ break; } } 随机数 [0,1) function getRandom() { return Math.random(); } [n,m) function getRandomArbitrary(min, max) { return Math.random() * (max - min) + min; } 整数[n,m) function getRandomInt(min, max) { min = Math.ceil(min); max = Math.floor(max); return Math.floor(Math.random() * (max - min)) + min; } 整数[n,m] function getRandomIntInclusive(min, max) { min = Math.ceil(min); max = Math.floor(max); return Math.floor(Math.random() * (max - min + 1)) + min; }数组乱序 以下2种方法我认为是比较实用的： （1）时间复杂度约为 O(n2)，splice()方法会遍历一次 function shuffle(a) { var b = []; while (a.length > 0) { var index = parseInt(Math.random() * (a.length - 1)); b.push(a[index]); a.splice(index, 1); } return b; } （2）时间复杂度为 O(n) function shuffle(a) { var len = a.length; for (var i = 0; i < len - 1; i++) { var index = parseInt(Math.random() * (len - i)); var temp = a[index]; a[index] = a[len - i - 1]; a[len - i - 1] = temp; } } - 对一个数字每3位加一个逗号，例如：1000000 -> 1,000,000
方法一 var num_s = "1232134456.546 ";alert(parseFloat(num_s).toLocaleString()); 方法二 function format_number(n){ var b=parseInt(n).toString(); var len=b.length; if(len<=3){return b;} var r=len%3; return r>0?b.slice(0,r)+","+b.slice(r,len).match(/\d{3}/g).join(","):b.slice(r,len).match(/\d{3}/g).join(","); } var a="53669988.000"; alert(format_number(a)); alert(format_number("wahh")); alert(format_number(0)); alert(format_number(6698.0023)); - 编写发布订阅模式
- 把url（http://www.666rgp.com?key0=0&key1=1&key2=2）中的参数解析为一个对象
function queryURL(url){ var arr1 = url.split("?"); var params = arr1[1].split("&"); var obj = {};//声明对象 for(var i=0;i<params.length;i++){ var param = params[i].split("="); obj[param[0]] = param[1];//为对象赋值 } return obj; } - 读代码
function A(){ this.a=3; this.b=4 } var c = new A(); c.a==?//3 赋值A.a=6 c.a==?//3 赋值A.d=6 A.d==?//6 c.d==?//undefined
1033
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
