06 2022 档案
摘要：flex 是css中的有一种布局手段,它主要是用来代替浮动来完成页面布局 flex可以使元素具有弹性,让元素可以跟随页面的大小的改变而改变 开启flex布局只需要在外层容器设置display:flex(整个网页也可以看做是一个flex容器) 弹性容器: 要使用弹性盒,必须先将一个元素设置为弹性容器(
阅读全文
摘要：mixin是什么 Mixin是面向对象程序设计语言中的类，提供了方法的实现。其他类可以访问mixin类的方法而不必成为其子类Mixin类通常作为功能模块使用，在需要该功能时“混入”，有利于代码复用又避免了多继承的复杂 本质 本质其实就是一个js对象， 它可以包含我们组件中任意功能选项，如data、c
阅读全文
摘要：属性 constructor 一个引用值，返回 Object 的构造函数（用于创建实例对象） const o = {} o.constructor Object // true const o = new Object o.constructor Object // true const a = [
阅读全文
摘要：如果在实例创建之后添加新的属性到实例上，它不会触发视图更新 因此比如我们修改一个数组其中的一个值，或者添加一条数据时，数据变化了,但是视图没有渲染。 例如: <div v-for="item in items" :key="item">{{item}}</div> <button @click="a
阅读全文
摘要：render 函数是 Vue2.x 新增的一个函数、主要用来提升节点的性能，它是基于 JavaScript 计算。使用 Render 函数将 Template 里面的节点解析成虚拟的 Dom 。 render也可以称为渲染函数 因为 Vue 是虚拟 DOM，所以在拿到 Template 模板时也要转
阅读全文
摘要：全局自定义指令 在main.js中注册input聚焦 Vue.directive('focus', { inserted: function (el) { // 聚焦元素 el.focus() } }) directive:指令 inserted:嵌入 focus:指定的是指令的名称，使用的时候要加
阅读全文
摘要：两者的区别: computed:依赖多个变量计算出一个变量,具有缓存机制,依赖值不变的时候,会复用计算值,不能执行异步操作, watch:通常监听一个变量,可以执行异步操作 简单记就是:computed是多对一,watch是一对多 计算属性(computed) 为什么要用计算属性? 当一个数据需要复
阅读全文
摘要：Vue的生命周期 Vue实例有一个完整的生命周期，也就是说从开始创建、初始化数据、编译模板、挂在DOM、渲染-更新-渲染、卸载等一系列过程，我们称为Vue 实例的生命周期，钩子就是在某个阶段给你一个做某些处理的机会。 生命周期: vue实例从创建到销毁的过程 beforeCreate( 创建前/出生
阅读全文
摘要：第一种: 传递一个数组，这里的class需要使用v-bind的数据绑定; <h2 :class="['red', 'size']">hello</h2> 第二种: 在数组中使用三元表达式; <h2 :class="['red', 'size', flag?'active':'']">hello</h
阅读全文
摘要：vue路由的两种导航传参方式: 1.声明式导航(router-link) 2.编程式导航(push|replace) query参数 声明式导航(router-link) 父组件: 传递参数 <!-- 跳转并携带query参数，to的字符串写法 --> <router-link to="/home/
阅读全文
摘要：1.概念 在Vue中实现集中式状态（数据）管理的一个Vue插件，对vue应用中多个组件的共享状态进行集中式的管理（读/写），也是一种组件间通信的方式，且适用于任意组件间通信。 2.何时使用？ 多个组件需要共享数据时 3.搭建vuex环境 创建文件：src/store/index.js //引
阅读全文
摘要：EventBus 一种组件间通信的方式，适用于任意组件间通信。 EventBus 又称为事件总线。在Vue中可以使用 EventBus 来作为沟通桥梁的概念，就像是所有组件共用相同的事件中心，可以向该中心注册发送事件或接收事件。EventBus主要是用到发布者-订阅者的设计模式，所以代码里需要有一个
阅读全文
摘要：$attrs与$listeners 祖先传递数据给子孙 如果要C组件要使用A组件的方法或者数据.要不用props传递(繁琐),要不用eventBus或者vuex(大材小用) 利用 $attrs 实现祖孙组件间的数据传递， $listeners 实现祖孙组件间的事件监听 $attrs 包含了父作用域中
阅读全文
摘要：ref ref='xx'相当于id='xx', this.$refs.xx去找具体的位置 通过this.$refs 可以访问到此vue实例中的所有设置了ref属性的DOM元素，并对其进行操作。 子传父 父组件在使用子组件的时候设置ref 父组件通过设置子组件ref来获取数据 父组件 <Childre
阅读全文
摘要：子组件使用父组件的数据和方法 $parent 指定已创建的实例之父实例，在两者之间建立父子关系。子实例可以用 this.$parent 访问父实例，子实例被推入父实例的 $children 数组中。 父组件 data() { return { msg:'age' } }, components: {
阅读全文
摘要：作用：让父组件可以向子组件指定位置插入html结构，也是一种组件间通信的方式，适用于 父组件 > 子组件 。 父级模板里的所有内容都是在父级作用域中编译的；子模板里的所有内容都是在子作用域中编译的。 分类：默认插槽、具名插槽、作用域插槽 使用方式： 默认插槽： 父组件中： <Category> <d
阅读全文
摘要：组件的自定义事件(子组件 > 父组件) 一种组件间通信的方式，适用于：子组件 > 父组件 使用场景：A是父组件，B是子组件，B想给A传数据，那么就要在A中给B绑定自定义事件（事件的回调在A中）。 绑定自定义事件： 第一种方式，在父组件中：<Demo @event-name="test"/> 或 <D
阅读全文
摘要：props(父传子) 功能：让组件接收外部传过来的数据 传递数据：<Demo name="xxx"/> 父组件 子组件 如果父组件传的值是一个动态的(父传子的时候,则用v-bind绑定要用的传入的名) 子组件不变 接收数据： 第一种方式（只接收）：props:['name'] 第二种方式（限制类型）
阅读全文
摘要：指令 V-text:元素的textCentent v-html:元素的innerHTML v-show:通过样式的display控制显隐 v-if:通过控制DOM改变显隐 v-else:配合v-if v-for:循环渲染 必须带有key值 key必须是唯一值 v-on:绑定事件,缩写@ v-bind
阅读全文
摘要：介绍 Promise，译为承诺，是异步编程的一种解决方案，比传统的解决方案（回调函数）更加合理和更加强大 promise解决异步操作的优点： 链式操作减低了编码难度 代码可读性明显增强 状态 promise对象仅有三种状态 pending（进行中） fulfilled（已成功） rejected（已
阅读全文
摘要：参数 ES6允许为函数的参数设置默认值 function log(x, y = 'World') { console.log(x, y); } console.log('Hello') // Hello World console.log('Hello', 'China') // Hello Chi
阅读全文
摘要：属性的简写 当对象键名与对应值名相等的时候，可以进行简写 let a={boo:boo} 等同于 let a={boo} 方法也能够进行简写 let a={ method:function() { console.log(1); }, } 等同于 a.method() let a={ method(
阅读全文
摘要：扩展运算符 通过扩展运算符实现的是浅拷贝，修改了引用指向的值，会同步反映到新数组 var arr=[1,2] var arr1=[3,4] console.log([...arr,...arr1]);// [1, 2, 3, 4] 解构 const [a,...b]=[1,2,3,4] consol
阅读全文
摘要：Set Map 后面跟的都必须是可迭代的对象 Set Set 对象允许你存储任何类型的唯一值，无论是原始值或者是对象引用。 add( ) has( ) size delete( ) let myset = new Set() //添加 console.log(myset.add(1));//{1}
阅读全文
摘要：var 使用var声明的变量存在变量提升的情况 console.log(a) // undefined var a = 2 在编译阶段，编译器会将其变成以下执行 var a console.log(a) a = 20 使用var，我们能够对一个变量进行多次声明，后面声明的变量会覆盖前面的变量声明 v
阅读全文
摘要：定义 节流(throttle): n 秒内只运行一次，若在 n 秒内重复触发，只有一次生效 在规定的间隔时间范围内不会重复触发回调，只有大于这个时间间隔才会触发回调，把频繁触发变为少量触发 防抖(debounce): n 秒后在执行该事件，若在 n 秒内被重复触发，则重新计时 前面的所有的触发都被取
阅读全文
摘要：this this 关键字是函数运行时自动生成的一个内部对象，只能在函数内部使用，总指向调用它的对象 this在函数执行过程中，this一旦被确定了，就不可以再更改 绑定规则: 根据不同的使用场合，this有不同的值，主要分为下面几种情况： 默认绑定 隐式绑定 new绑定 显示绑定 默认绑定 var
阅读全文
摘要：JS获取页面坐标数据 1.client系列 event.clientX 和 event.clientY：点击位置距离当前body可视区域的x，y坐标 2.screen系列 event.screenX 和 event.screenY： 点击位置距离当前电脑屏幕的x，y坐标 3.offset系列 eve
阅读全文
摘要：<ul> <li> <p>11111</p> </li> <li> <p>2222</p> </li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> </ul> var list = document.querySelector('ul') 获取子节点(ch
阅读全文
摘要：事件 javascript中的事件，可以理解就是在HTML文档或者浏览器中发生的一种交互操作，使得网页具备互动性， 常见的有加载事件、鼠标事件、自定义事件等 事件流 由于DOM是一个树结构，如果在父子节点绑定事件时候，当触发子节点的时候，就存在一个顺序问题，这就涉及到了事件流的概念 事件流都会经历三
阅读全文
摘要：BOM是什么吗? BOM (Browser Object Model)，浏览器对象模型，提供了独立于内容与浏览器窗口进行交互的对象 BOM由多个对象构成，其中代表浏览器窗口的window对象是BOM的顶层对象，其他对象都是该对象的子对象。 window 在浏览器中，window对象有双重角色，即是浏
阅读全文
摘要：div、p是元素节点，content是文本节点，title是属性节点 创建节点 createElement 创建新元素，接受一个参数，即要创建元素的标签名 let div = document.createElement('div') createTextNode 创建一个文本节点 let text
阅读全文
摘要：原型 讲原型的时候，我们应该先要记住以下几个要点，这几个要点是理解原型的关键： 1、所有的引用类型（数组、函数、对象）可以自由扩展属性（除null以外）。 2、所有的引用类型都有一个’_ _ proto_ _'属性(也叫隐式原型，它是一个普通的对象)。 3、所有的函数都有一个’prototype’属
阅读全文
摘要：什么是构造函数? 在 JavaScript 中，用 new 关键字来调用的函数，称为构造函数。构造函数首字母一般大写 为什么要用构造函数? 比如:要录入这样的一个数据 var p1 = { name: '张三', age: 18, sex: '男' } var p2 = { name: '李四',
阅读全文
摘要：函数声明： 这个是最普通的声明函数方法 function total(num1, num2) { return num1 + num2 } console.log(total(2, 3));//5 函数表达式（ 函数字面量） 这个是将函数直接赋值给变量 let a= function total(n
阅读全文
摘要：闭包 能够读取其他函数内部变量的函数 本质:将函数内部和外部连接起来的桥梁 function fn1() { var b = 2 //b是fn1的局部变量 function fn2() {//fn2()是内部函数,一个闭包 console.log(b);//2 } fn2() } fn1() //f
阅读全文
摘要：拷贝 内存分为栈和堆 基本数据类型存放在栈内存 引用数据类型存放在堆内存,引用数据类型的变量是一个指向堆内存中实际对象的引用，存在栈中 浅拷贝 浅拷贝:指的是创建新的数据,这个数据有着原始数据属性值的一份精确拷贝 属性是基本类型，拷贝的就是基本类型的值。 var a = 213 var b = a
阅读全文
摘要：作用域 作用域指一个变量的作用的范围 作用范围==作用域 作用域就是一个独立的地盘，让变量不会外泄、暴露出去。也就是说作用域最大的用处就是隔离变量，不同作用域下同名变量不会有冲突。 例如: function show(){ var a='局部变量' } show() console.log(a);/
阅读全文
摘要：由数据的类型引申出数据的存储 基础数据类型(原始数据类型)都是在栈内存储 复杂数据类型(引用数据类型 )都是在堆内存储,栈内存只存储引用的堆内存中的地址 如果修改了简单数据类型,他的值是不变的,但是他因为没有变量名,他的值会被回收 例如: var b = 'asd' b+='qwe' console
阅读全文
摘要：js的执行机制 1.JavaScript是一门单线程语言。 为什么说js是单线程,因为js执行代码是从上往下执行的, 2.Event Loop(事件循环)是JavaScript的执行机制。 事件循环、eventloop\运行机制 这三个术语其实说的是同一个东西， “先执行同步操作异步操作排在事件队列
阅读全文
摘要：此文中所有的item 为当前数组的每一个数值, index为数组的索引值,arr为当前的数组 增 unshift push concat() unshift push arr.unshift(5)//在数组的前面添加 arr.push(1)//在数组的最后添加 concat() 合并返回一个新数组
阅读全文
摘要：二进制表示符(0b)(零b) 它是以1 2 4 8 16 32 64 128 .. ... ... 进行运算 如 15 0b1111 运算符 | 将所有带1的位数相加 console.log(18|32); ==>50 32 16 8 4 2 1 18 0 1 0 0 1 0 32 1 0 0 0
阅读全文
摘要：结构赋值 变量声明并赋值时的解构 var a = [1, 2, 3, 4] var [b, c, d] = a console.log(b);//1 console.log(c);//2 console.log(d);//3 变量先声明后赋值时的解构 var b, c, d [b, c, d] =
阅读全文
摘要：判断语句 if else if (条件) { 条件正确的执行代码 } else { 否则执行的代码 } // 1.在if的()中，会产生隐式类型转换。 // 2.只有在以下六种情况下，if中的()的数据为假。false、空字符串、0、null、undefined、NaN。 三目运算： 条件 ? 真语
阅读全文
摘要：Js--数据类型: 分为:原始数据类型(基本数据类型),引用数据类型 原始数据类型:String Number Null undefined Boolean Symbol..... 引用数据类型:Object Array Function ...... 基本数据类型和引用数据类型存储在内存中的位置不
阅读全文
摘要：盒模型是什么? 当对一个文档进行布局的时候，浏览器的渲染引擎会根据标准之一的 CSS 基础框盒模型,将所有元素表示为一个个矩形的盒子 这个盒子由四个部分组成：content、padding、border、margin content:内容 boreder:边框(粗细、样式、颜色三部分组成) padd
阅读全文
摘要：通过为按钮的背景设置 opacity 属性就可以呈现出无法点击的效果。 （一）button 元素 为 元素添加 disabled 属性，使其表现出禁用状态。 代码如下： <button disabled="disabled">Primary button</button> 效果: （二）链接（<a>
阅读全文
