src和href的区别 ？
scr 引用外部资源 指向的内容将会嵌入到文档中当前标签所在位置 (一般用于img,script)
当浏览器解析到该元素时，会暂停其他资源的下载和处理，直到将该资源加载、编译、执行完毕，图片和框架等元素也如此，类似于将所指向资源嵌入当前标签内。这也是为什么将js脚本放在底部而不是头部。
href 引入资源，建立和当前元素或当前文档之间的链接，用于超链接 (一般引入css)
href指向网络资源所在位置，建立和当前元素（锚点）或当前文档（链接）之间的链接，如果我们在文档中添加
那么浏览器会识别该文档为css文件，就会并行下载资源并且不会停止对当前文档的处理
想想当你渲染页面刚开始没有css的尴尬
页面元素隐藏方式 和各自特点？
1.opacity:0 直接将元素透明度变为0
2.width&height = 0 z-index=-1 将元素的宽高设为0并使z-index为负数
3.visibility：hidden（样式隐藏位置还依然占据） 不影响原来的布局
4:display:none 彻底隐藏 不占用空间
用过哪些盒模型，以及他们各自的区别？
标准盒子模型 实际占用的范围=设置的宽高+边框和补白
怪异盒子模型 占用的范围等于设置的宽高+外边距 ,边框和内补白会减少内容所占用空间
谈谈你的移动端适配方案有哪些？
第一种:
单位选择rem配合@media媒体查询标签
首先你要明白1rem,是根据根元素(html)的字体大小来设置的
使用@media监听页面的可视化宽度当到达某一尺寸时触发改变根元素的字体大小代码
//先要设置一个标准的大小
html{
font-size:25px;//1rem==25px
}
// 当屏幕最小宽到达384px的时候将html的字体大小变为14px
@media screen and (min-width:384px) {
html {
font-size:14px; //1rem==14px
}
}
框架
//比如bootstrap
js 数据类型有几种？它们之间的区别是什么？
js数据类型分为两种基本[“基本数据类型”,引用数据类型]
什么是基本数据类型
-
数值型 Number -
字符串 String -
布尔 Boolean -
唯一 Symbol -
未知 undefined -
空 null
什么是引用数据类型
-
对象 object -
数组 array -
函数 function
他们的区别是什么
- 引用数据类型一般为浅拷贝 新旧对象共享一块内存
- 基本数据类型一般为深拷贝 新旧对象不共享同一块内存
扩展一下什么是深拷贝什么是浅拷贝
//基本数据类型的拷贝
var str1 = '嘿嘿';
var str2 = str1;
str2 = 'link';
console.log(str2); //'link'
console.log(str1); //'嘿嘿'
//引用数据类型的拷贝
var obj1 = {'name': 'a'};
var obj2 = obj1;
obj2.name = 'b';
console.log(obj1); // {'name': b'}
console.log(obj2); // {'name': 'b'}
数据类型强制转化和隐式转化的分别怎么使用？
数据类型强制转换
使用javascript自带的功能,转换类型
//字符串转数值
Number('1024') // 1024
//数值转字符串
String(123) //'123'
数据类型隐式转换
隐式转换的概念:
- 在js中，当运算符在运算时，如果两边数据类型不一致，就无法计算，这时我们编译器会自动将运算符两边的数据做一个数据类型转换，转成一样的数据类型再计算
- 这种无需手动转换，而自动转换的方式称为隐式转换
//例子
console.log('2'+1) // 21 结果为字符串 像这种情况就叫隐式转换
let const 和 var 的区别 ？
let和const有块级作用域
{
var a = 100;
let b = 10;
const NUMS = 123;
}
console.log(a); // 100
console.log(b) // 找不到b这个变量
console.log(NUMS) //找不到NUMS这个常量
var声明变量存在变量提升，let和const不存在变量提升
console.log(a); // a已声明还没赋值，默认得到undefined值 但window中仍有这个对象
var a = 100;
cosole.log(b) ;//报错 找不到这个变量
let b = 200;
console.log(NUMS) //报错
const NUMS = 300;
同一块级作用域下let和const不能声明同名变量，而var可以
{
let a = 100
let a = 200
console.log(a) //Uncaught SyntaxError: Identifier 'a' has already been declared 报错let不能重复声明
var b = 100;
console.log(b); // 100
var b = 10;
console.log(b); // 10
}
箭头函数和普通函数的区别 ？
箭头函数是匿名函数，不能作为构造函数，不能使用new
let as = () => {
console.log('我是箭头函数');
}
let fc = new as();
console.log(fc)// Uncaught TypeError: as is not a constructor 对象不能实例化
箭头函数没有自己的this指向 他的this继承于父级函数的this
var obj = {"name":"123"}
function ol(){
let ia = () =>{
console.log(this)//this指向父级函数的this
}
ia()
}
ol.call(obj)
ol()
function a(){
console.log(this)
}
a()//指向window
箭头函数使用新增的…方法代替了arguments方法接受所有参数
{
// 箭头函数
function A(a) {
//arguments接受所有的参数组成数组
console.log(arguments);
}
A(1, 2, 3, 4, 5, 8);//
// 箭头函数 新增的方法...代替了arguments函数
let C = (...c) => {
console.log(c);
}
C(3, 82, 32, 11323);
}
解释什么叫回调地狱 以及怎么解决回调地狱 ？
在一个函数的结尾调用另一个函数嵌套若干次
不方便维护,并且不太美观
//name 打印的name callback下一次执行的函数
var sayhello = function (name, callback) {
setTimeout(function () {
console.log(name);
//将传入的函数执行
callback();
}, 1000);
}
sayhello("first", function () {
sayhello("second", function () {
sayhello("third", function () {
console.log("end");
});
});
});
解决回调地狱
promise解决回调地狱
怎么了解promise呢？按官网的话
Promise 是异步编程的一种解决方案：从语法上讲，promise是一个对象，从它可以获取异步操作的消息；从本意上讲，它是承诺，承诺它过一段时间会给你一个结果。promise有三种状态： pending(等待态)，fulfiled(成功态)，rejected(失败态)；状态一旦改变，就不会再变。创造promise实例后，它会立即执行。
简单来说：promise可以把异步方法转为同步流程表现出来
var sayhello = function (name) {
//返回一个promise对象
return new Promise(function (resolve, reject) {
//等待两秒后打印传入name 并将promise变为成功状态
setTimeout(function () {
console.log(name);
resolve(); //在异步操作执行完后执行 resolve() 函数
}, 1000);
});
}
//.then状态为成功继续执行第二个函数
sayhello("a").then(function () {
return sayhello("b"); //再次调用sayhello方法
}).then(function () {
return sayhello("c");
}).then(function () {
console.log('end');
})
说明原生ajax的实现步骤？
//post方式的ajax
{
//创建异步对象
xhr = new XMLHttpRequest()
//调用open方法(请求方式,请求路径)
xhr.open(''post', 'url')
//设置请求(get方式忽略)
xhr.SetRequestHeader("Content-Type", "application/x-www-form-urlencoded")
//调用send()方法
xhr.send()
//让异步对象接收服务器的响应数据
xhr.onreadystatechange = function () {
if (xhr.status == 200 && xhr.readyState == 4) {
console.log(xhr.responseText);
}
}
}
//get方式的ajax
{
//创建异步对象
xhr = new XMLHttpRequest()
//调用open方法(请求方式,请求路径)
xhr.open(''get', 'url')
//调用send()方法
xhr.send()
//让异步对象接收服务器的响应数据
xhr.onreadystatechange = function () {
if (xhr.status == 200 && xhr.readyState == 4) {
console.log(xhr.responseText);
}
}
}
什么情况下会导致跨域？
协议,域名,端口号 不同 当协议域名端口号都相同叫做同源
"http://www.baidu.com[80]"
http为协议
www.baidu.com 为域名
[80]为端口号
如何解决跨域
通过jsonp 解决跨域
动态创建script，再请求一个带参网址实现跨域通信
如果想要更详细了解点击下方的了这个大佬写的好👇
全部解决跨域的方法详解
vue 有几个生命周期 以及各个生命周期的调用时机 ？
//在实例初始化之后，组件的选项对象还未创建，el 和 data 并未初始化，无法访问methods， data， computed等上的方法和数据
beforeCreate:{}
//在初始化已经完成后 但是还没有开始 DOM 编译，el 还不存在,但是实例存在,可以访问data中的数据
created:{} //实例化vue后
//完成了Dom的构建，但并未被渲染
beforeMount:{} //el挂载前状态
//DOM渲染完成 这个时候可以操作DOM节点
mounted:{} //el挂载后状态
//数据更改重新渲染Dom前触发
beforeUpdate:{} //数据更新前
//数据更改重新渲染Dom已经完成时触发触发
updated:{} //数据更新后
//vue实例销毁之前 可以在这里清除定时器等操作
beforeDestroy:{} //销毁前
//vue实例完全销毁后
destroyed:{} //销毁后
使用vue中的v-for时,为什么要绑定 :key? 如果不绑定会有什么效果？
给元素添加标识 增强唯一性
绑定key当循环元素发生改变只会重新渲染改变的元素
不绑定key当循环元素发生改变会重新渲染所有的元素
v-show 和 v-if 的作用和区别, v-bind 和 v-model的作用和区别？
v-show和v-if的区别
v-show是操作style样式而v-if是直接操作dom元素
//在网页上不显示且element中没有此元素
<div style="width: 100px;height: 200px;background: floralwhite;" v-if="false"></div>
//在页面上不显示但element中有此元素只是将元素中加入了display: none;
<div style="width: 100px;height: 200px;background: floralwhite;" v-show="false"></div>
v-bind和v-model的区别
v-bind:单向数据改变 数据层可以传递到视图层 但视图层不能改变数据层
v-model双向数据绑定 数据层传递数据到视图层 视图层也可以修改数据层
vue 组件通信如何实现，至少列举3种方式并说明各自的局限性？
- props
通常用在父传子
在子组件上绑定属性 v-bind:属性名=“需要传入的值”
在子组件中使用props接收传来的值 props:[“属性名”]
缺点:兄弟件传递不方便 子组件的数据不能传递给父元素 - provide inject
在父组件中使用provide方法把自己的this暴露出去
可以把整个实例全部暴露，也可以根据需要只暴露方法或属性
provide(){
return {
/* 将自己暴露给子孙组件 ,这里声明的名称要于子组件引进的名称保持一致 */
myobj:this
}
},
在子组件中通过inject接受父组件暴露的father 可以使用inject中的方法和属性
inject:['myobj'],
他的优点和缺点
优点
父组件暴露出去的方法无论嵌套多少层只要是子组件都可以使用
缺点:
不适合兄弟间数据的传递
- vuex 如何使用在vuex state中设置需要通用的数据
解决了非父子组件的消息传递（将数据存放在state中）
他的缺点:刷新浏览器，vuex中的state会重新变为初始状态 - $emit 子传父
在子组件中事件触发时创建一个 自定义事件
this.$emit('cc', "ssss")
在父组件中子组件标签上 监听自定义事件 触发父组件中更改的函数
<TranslateForm v-on:cc='translateText'></TranslateForm>
translateText:function(text){
alert(text)
}
详细说明vue组件中 data ，computed 和 watch的区别？
data
Vue中的data属性专门用来以对象方式存放数据，计算定义的属性会随它的赋值变量的变化而变化
comuted 计算属性 ()
computed定义的属性会随它的赋值变量的变化而变化 具有缓存机制
当计算属性中一个值改变时就会重新计算 每个属性中都有一个get和一个set方法，当数据变化时，会重新调用
计算属性的值通过return返回
<div id="app">
<h2>num1是data中的变量，其初始值为：{{num1}}</h2>
<h2>点击按钮后，data中的num1变化为：{{num1}}</h2>
<h2>computed的值：{{c_num}}</h2>
<button @click="change">给num1+10</button>
<hr>
<h1>1.data定义的属性不会因为它的赋值变量的变化而变化</h1>
<h1>2.computed定义的属性会随它的赋值变量的变化而变化</h1>
</div>
var arrs = {"num":10}
let app = new Vue({
el:"#app",
data: {
temp: arrs,
num1: arrs.num
},
computed: {
// 计算属性当arr.num的数据改变就会触发
c_num () {
return arrs.num
}
},
methods: {
change () {
// 计算给元素重新赋值
arrs.num += 10
}
}
})
watch 侦听属性 不支持缓存 当监听属性改变时会触发区间的代码
watch和computed的区别
计算属性一个值依赖了其他值，依赖的值改变后重新计算结果更新DOM。
监听的是data中属性，当定义的值发生变化时，执行当前区间。
keep-alive的作用是什么？ 使用它的目的是什么？
会缓存不活动的组件实例,主要用于保留组件状态或避免重新渲染。
当页面跳转是临时的时候保持页面离开时的状态避免重复渲染和不必要的请求
vue-router的作用是什么？ 为什么不使用a标签？
vue－router一般用于路由的跳转 传递参数
为什么不使用a标签
6. a标签的每次点击相当于重新加载一次页面 会重新渲染
7. router组件避免了不必要的重新渲染,它只更新需要变化的内容从而减少DOM操作
vuex 是什么？ 怎么使用？为什么用使用它？
- 这里引用官方的话
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化
简单来说就是vue数据储存的仓库
怎么使用vuex
通过this．＄store．state．名字的方式获取state中的内容
dispatch来调用actions提供的方法
通过commit来调mutations提供的方法
当然还可以通过getters提供的方法获取state中的数据
通过辅助函数的方式 引入需要的模块
import {mapActions,mapActions,mapState} from "vuex"
为什么使用
简化组件间的通信，储存多个组件共同的数据，方便操作
请谈一下你对 使用原生js开发和 使用vue开发的看法。(至少20字以上)
这种题把仁者见仁了,大致围绕优缺点
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
