美文网首页
零碎的笔记

零碎的笔记

作者: 金刚狼_3e31 | 来源:发表于2019-11-22 18:25 被阅读0次

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能发送更多的数据类型(各种类型的文件)

相关文章

  • 零碎的笔记

    1. 输入框输入的时候去空格 原生input: onkeyup="this.value=this.value.r...

  • 零碎笔记

    萧伯纳的剧本 《匹克梅梁 》里有一段精彩的对话把这个问题说得很清楚 :息金斯 :杜特立尔 ,你是坏蛋还是傻瓜 ?杜...

  • 八月结

    状态不是很好,书的零碎,笔记质量也不是很好。零碎时间读了周国平的几本散文,大量时间阅读文献,多读而明确自己的研究方...

  • keras的零碎笔记

    1、keras自定义目标损失函数 2、keras绘制acc-loss曲线 定义一个LossHistory类,保存l...

  • Broad Institute视频笔记Introduction

    这篇笔记是这个系列视频的第5讲,笔记有的是用英文记的,有的用中文。因为是用零碎的时间来看视频记笔记,所以用英语还是...

  • 《Evernote超效率数字笔记术》读后感

    用笔记记住所有零碎想法(即时笔记),甚至可以手写 录音,自动转换为文字 用记录地点,自动分类(可手动编辑地址) 按...

  • 如何打造写作系统(六)

    第六节:如何建立科学的笔记本分类 上节回顾:集中收集+零碎收集 本节内容:笔记本的科学分类法 笔记本的三层架构:笔...

  • webpack零碎笔记

    npm install --save 和 npm install --save-dev 在安装一个要打包到生产环境...

  • 零碎笔记(二)

    1.GCD方法使得Block中代码运行前阻塞线程方法 2.重写init方法 3.观察者模式 一视图发送通知,二视图...

  • 零碎笔记(三)

    一、字体加粗 加粗: 加粗并且倾斜: 二、NSMutableArray和NSArray的相互转换 三、判断图片是否...

网友评论

      本文标题:零碎的笔记

      本文链接:https://www.haomeiwen.com/subject/dciqwctx.html