1. 输入框输入的时候去空格
原生input: onkeyup="this.value=this.value.replace(/[, ]/g,'')"
el-input: <el-input v-model.trim="options.nameVal" size="small" placeholder="请输入姓名" />
2. 遍历方法的区别:
a. for in
遍历自身和继承的可枚举属性
b. Object.keys(obj)
遍历自身可枚举属性,不包括Symbol类型的属性
c. Object.getOwnPropertySymbols(obj)
遍历自身的Symbol类型的属性
d. Object.assign(target, obj)
遍历自身的可枚举属性,包括Symbol类型的属性
3.Vue父组件向子组件传递一个动态的值,子组件如何保持实时更新?
解决方法:在子组件里深度监听父组件传过来的值,实时拿到新的值
watch: {
propsValue: {
handler(newVal, oldVal) {
// console.log(newVal, oldVal);
},
deep: true
}
}
4.cookie / localStorage区别?
1). 大小限制:cookie一般存储8KB,localStorage最大是5MB;
2).存储时间:cookie有过期时间,而 localStorage是持久存储;
3). 兼容性:cookie兼容所有的浏览器,localStorage是H5新增的API,兼容IE9+;
4). 稳定性:清楚浏览器缓存或者安全卫士清理垃圾等操作时,都有可能把cookie清除掉;
5). 应用场景:cookie一般使用在客户端与服务端交互时使用,而localStorage和服务器没有必然的联系;
5. localStorage / sessionStorage区别?
localStorage在同源的所有的标签页和窗口之间共享数据,而sessionStorage的数据只存在于当前浏览器的标签页,关闭标签页后数据就会被清楚。
6. cookie应用场景和特点?
应用场景:
1). 会话状态管理 (如用户登录状态、购物车、游戏分数或其他需要记录的信息);
2). 个性化管理 (如用户自定义设置、主题等);
3). 浏览器行为跟踪 (如跟踪分析用户行为等);
特点:
1). 大小受限,一般是4kb;
2). 同一个域名下存放的个数是有限制的,不用浏览器的个数不一样,一般为20个;
3). 支持设置过期时间,当过期时自动销毁;
4). 每次发起同域下的HTTP请求时,都会携带当前域名下的cookie;
5). 支持设置为HttpOnly,防止被客户端JS访问 (防止XSS攻击);
7. Vue组件通信?
(一):父子组件间通信
1). 父传子:自定义属性传值,props接收 子传父:子组件$emit触发自定义事件,父组件定义这个自定义事件
2). $parent/$children:
子组件通过this.$parent获取到父组件的实例,父组件通过this.$children获取到子组件的实例(用$refs获取实例更好)
3). $refs 获取实例
4). $attrs: 在子组件上通过v-bind="$attrs", 子组件就能拿到除了props接收的属性以外的属性;
$listeners:在子组件上通过v-on="$listeners", 子组件就能拿到自定义事件 (不含 .native 修饰器的);
5). provide/inject: 某个组件中提供了provide属性,它的所有的后代组件都可以通过inject属性接收到 (官方说一般使用在高阶插件组件应用里,不推荐在普通程序里使用);数据不是响应式的,可以通过Object.definProperty数据劫持(具体参考官网手册,应有场景:一般传递响应式的数据)
6). v-model的方式:
步骤一:在父组件中 <child v-model="msg"></child>
步骤二:在子组件中
通过props接收value属性
props: {
value: String
}
<input type="text" v-model="aaa" @input="changeValue"/>
methods: {
changeValue() {
this.$emit('input', this.aaa);
console.log(this.aaa);
}
}
(二):兄弟组件间通信
1). eventBus 中央事件总线的方式
步骤一:
新建一个event-bus.js文件
import Vue from 'vue';
export const EventBus = new Vue();
步骤二:
例如:组件A向组件B发送数据(先导入event-bus.js文件,或者在main.js中全局挂载到Vue的原型上)
// 组件A发送消息
EventBus.$emit(事件名, 需要传递的数据);
// 组件B监听接收消息(在mounted钩子函数里接收)
EventBus.$on(事件名, (msg) => { console.log(msg); });
2). Vuex
3). 先传给父组件,然后父组件再传给兄弟组件
8. js严格模式下有哪些不同?
不允许不使用 var 关键字去创建全局变量,抛出 ReferenceError
不允许对变量使用 delete 操作符,抛 ReferenceError
不可对对象的只读属性赋值,不可对对象的不可配置属性使用 delete 操作符,不可为不可拓展的对象添加属性,均抛 TypeError
对象属性名必须唯一
函数中不可有重名参数
在函数内部对修改参数不会反映到 arguments 中
淘汰 arguments.callee 和 arguments.caller
不可在 if 内部声明函数
抛弃 with 语句
9.get和post的区别?
1). POST更安全,不会作为url的一部分、不会被缓存、保存在服务器日志和浏览器记录中;
2).POST发送的数据量更大 (GET有url长度限制);
长度限制:IE(2083字符)、firefox(65536字符)、chrome(8182字符)、safari(80000字符)、opera(190000字符)
3).POST能发送更多的数据类型(各种类型的文件)
网友评论