02 2022 档案
摘要：Object.assign()对象的拷贝 Object.assign() 方法用于将所有可枚举属性的值从一个或多个源对象复制到目标对象。它将返回目标对象。 Object.assign(target, ...sources) 【target：目标对象】，【souce：源对象（可多个）】 举个栗子： c
阅读全文
摘要：当vue的data里边声明或者已经赋值过的对象或者数组（数组里边的值是对象）时，向对象中添加新的属性，如果更新此属性的值，是不会更新视图的。 <template> <div id="app"> <p v-for="item in items" :key="item.id">{{item.messag
阅读全文
摘要：1).使用命令创建Vue项目 命令：vue create my-project 选择Manually select features(选择特性以创建项目) 勾选特性可以用空格进行勾选。 是否选用历史模式的路由：n ESLint选择：ESLint + Standard config 何时进行ESLin
阅读全文
摘要：A.安装babel 打开终端，输入命令：npm install --save-dev @babel/core @babel/cli @babel/preset-env @babel/node 安装完毕之后，再次输入命令安装：npm install --save @babel/polyfill B.创
阅读全文
摘要：var myRouter = new VueRouter({ //routes是路由规则数组 routes: [ //通过name属性为路由添加一个别名 { path: "/user/:id", component: User, name:"user"}, ] }) //添加了别名之后，可以使用别名
阅读全文
摘要：var User = { template: "<div>This is User</div>" } //Login组件中的模板代码里面包含了子级路由链接以及子级路由的占位符 var Login = { template: `<div> <h1>This is Login</h1> <hr> <ro
阅读全文
摘要：A.导入js文件<script src="lib/vue_2.5.22.js"></script><script src="lib/vue-router_3.0.2.js"></script> B.添加路由链接:<router-link>是路由中提供的标签，默认会被渲染为a标签，to属性默认被渲染为
阅读全文
摘要：前端路由是基于hash值的变化进行实现的（比如点击页面中的菜单或者按钮改变URL的hash值，根据hash值的变化来控制组件的切换）核心实现依靠一个事件，即监听hash值变化的事件 window.onhashchange = function(){ //location.hash可以获取到最新的ha
阅读全文
摘要：async 和 await async作为一个关键字放到函数前面 任何一个async函数都会隐式返回一个promise await关键字只能在使用async定义的函数中使用 await后面可以直接跟一个 Promise实例对象 await函数不能单独使用 async/await 让异步代码看
阅读全文
摘要：axios基础用法 get和 delete请求传递参数 通过传统的url 以 ? 的形式传递参数 restful 形式传递参数 通过params 形式传递参数 post 和 put 请求传递参数 通过选项传递参数 通过 URLSearchParams 传递参数 axios 全局配置 # 配置公共的请
阅读全文
摘要：promise 主要解决异步深层嵌套的问题 promise 提供了简洁的API 使得异步操作更加容易 <script type="text/javascript"> /* 1. Promise基本使用 我们使用new来构建一个Promise Promise的构造函数接收一个参数，是函数，并且传入两个
阅读全文
摘要：<div id="app"> <!-- 这里的所有组件标签中嵌套的内容会替换掉slot 如果不传值 则使用 slot 中的默认值 --> <alert-box>有bug发生</alert-box> <alert-box>有一个警告</alert-box> <alert-box></alert-box
阅读全文
摘要：父组件向子组件传值 父组件发送的形式是以属性的形式绑定值到子组件身上。 然后子组件用属性props接收 在props中使用驼峰形式，模板中需要使用短横线的形式字符串形式的模板中没有这个限制 <div id="app"> <div>{{pmsg}}</div> <!--1、menu-item 在 AP
阅读全文
摘要：<div id="app"> <my-component></my-component> </div> <script> // 定义组件的模板 var Child = { template: '<div>A custom component!</div>' } new Vue({ //局部注册组件
阅读全文
摘要：组件注册 全局注册 Vue.component('组件名称', { }) 第1个参数是标签名称，第2个参数是一个选项对象 全局组件注册后，任何vue实例都可以用 <div id="example"> <!-- 2、 组件使用 组件名称 是以HTML标签的形式使用 --> <my-component>
阅读全文
摘要：动态数组响应式数据 Vue.set(a,b,c) 让 触发视图重新更新一遍，数据动态起来 a是要更改的数据 、 b是数据的第几项、 c是更改后的数据
阅读全文
摘要：Vue.js允许自定义过滤器，可被用于一些常见的文本格式化。 过滤器可以用在两个地方：双花括号插值和v-bind表达式。 过滤器应该被添加在JavaScript表达式的尾部，由“管道”符号指示 支持级联操作 过滤器不改变真正的data，而只是改变渲染的结果，并返回过滤后的版本 全局注册时是filte
阅读全文
摘要：使用watch来响应数据的变化 一般用于异步或者开销较大的操作 watch 中的属性 一定是data 中 已经存在的数据 当需要监听一个对象的改变时，普通的watch方法无法监听到对象内部属性的改变，只有data中的数据才能够监听到变化，此时就需要deep属性对对象进行深度监听 <div id="a
阅读全文
摘要：模板中放入太多的逻辑会让模板过重且难以维护 使用计算属性可以让模板更加的简洁 计算属性是基于它们的响应式依赖进行缓存的 computed比较适合对多个变量或者对象进行处理后返回一个结果值，也就是数多个变量中的某一个值发生了变化则我们监控的这个值也就会发生变化 <div id="app"> <!--
阅读全文
摘要：局部指令，需要定义在 directives 的选项 用法和全局用法一样 局部指令只能在当前组件里面使用 当全局指令和局部指令同名时以局部指令为准 <input type="text" v-color='msg'> <input type="text" v-focus> <script type="t
阅读全文
摘要：<!-- 使用自定义的指令，只需在对用的元素中，加上'v-'的前缀形成类似于内部指令'v-if'，'v-text'的形式。 --> <input type="text" v-focus> <script> // 注意点： // 1、 在自定义指令中 如果以驼峰命名的方式定义 如 Vue.direct
阅读全文
摘要：表单修饰符 .number 转换为数值 注意点： 当开始输入非数字的字符串时，因为Vue无法将字符串转换成数值 所以属性值将实时更新成相同的字符串。即使后面输入数字，也将被视作字符串。 .trim 自动过滤用户输入的首尾空白字符 只能去掉首尾的 不能去除中间的空格 .lazy 将input事件切换成
阅读全文
摘要：<ul id="example-1"> <!-- 循环结构-遍历数组 item 是我们自己定义的一个名字 代表数组里面的每一项 items对应的是 data中的数组--> <li v-for="item in items"> {{ item.message }} </li> </ul> <scrip
阅读全文
摘要：绑定style <div v-bind:style="styleObject">绑定样式对象</div>' <!-- CSS 属性名可以用驼峰式 (camelCase) 或短横线分隔 (kebab-case，记得用单引号括起来) --> <div v-bind:style="{ color: act
阅读全文
摘要：v-bind v-bind 指令被用来响应地更新 HTML 属性 v-bind:href 可以缩写为 :href; <!-- 绑定一个属性 --> <img v-bind:src="imageSrc"> <!-- 缩写 --> <img :src="imageSrc"> 绑定对象 我们可以给v-bi
阅读全文
摘要：v-on事件函数中传入参数 <body> <div id="app"> <div>{{num}}</div> <div> <!-- 如果事件直接绑定函数名称，那么默认会传递事件对象作为事件函数的第一个参数 --> <button v-on:click='handle1'>点击1</button> <
阅读全文
摘要：引入jQuery文件。 在文档最末尾插入 script 标签，书写体验代码。 $('div').hide() 可以隐藏盒子 . jQuery的入口函数 // 第一种: 简单易用。 $(function () { $('div').hide(); }) ; // 第二种: 繁琐，但是也可以实现 $(d
阅读全文
摘要：本地存储特性 1、数据存储在用户浏览器中 2、设置、读取方便、甚至页面刷新不丢失数据 3、容量较大，sessionStorage约5M、localStorage约20M 4、只能存储字符串，可以将对象JSON.stringify() 编码后存储 // 将对象转变成字符串形式 JSON.parse
阅读全文
摘要：classList属性是HTML5新增的一个属性，返回元素的类名。但是ie10以上版本支持。 该属性用于在元素中添加，移除及切换 CSS 类。有以下方法 添加类： element.classList.add（’类名’）； focus.classList.add('current'); 移除类： el
阅读全文
摘要：TouchEvent 是一类描述手指在触摸平面（触摸屏、触摸板等）的状态变化的事件。这类事件用于描述一个或多个触点，使开发者可以检测触点的移动，触点的增加和减少，等等 touchstart、touchmove、touchend 三个事件都会各自有事件对象。 触摸事件对象重点我们看三个常见对象列表：
阅读全文
摘要：scroll 概述 scroll 翻译过来就是滚动的，我们使用 scroll 系列的相关属性可以动态的得到该元素的大小、滚动距离等 页面被卷去的头部：可以通过window.pageYOffset 获得 如果是被卷去的左侧window.pageXOffset
阅读全文
摘要：mouseenter 和mouseover的区别 当鼠标移动到元素上时就会触发mouseenter 事件 类似 mouseover，它们两者之间的差别是 mouseover 鼠标经过自身盒子会触发，经过子盒子还会触发。mouseenter 只会经过自身盒子触发 之所以这样，就是因为mouseente
阅读全文
摘要：client 翻译过来就是客户端，我们使用 client 系列的相关属性来获取元素可视区的相关信息。通过 client系列的相关属性可以动态的得到该元素的边框大小、元素大小等。
阅读全文
摘要：offset 翻译过来就是偏移量， 我们使用 offset系列相关属性可以动态的得到该元素的位置（偏移）、大小等。 获得元素距离带有定位父元素的位置 获得元素自身的大小（宽度高度） 注意：返回的数值都不带单位
阅读全文
摘要：单线程导致的问题就是后面的任务等待前面任务完成，如果前面任务很耗时（比如读取网络数据），后面任务不得不一直等待！！ 为了解决这个问题，利用多核 CPU 的计算能力，HTML5 提出 Web Worker 标准，允许 JavaScript 脚本创建多个线程，但是子线程完全受主线程控制。于是，JS
阅读全文
摘要：window对象给我们提供了一个 history对象，与浏览器历史记录进行交互。该对象包含用户（在浏览器窗口中）访问过的URL。
阅读全文
摘要：navigator 对象包含有关浏览器的信息，它有很多属性，我们最常用的是 userAgent，该属性可以返回由客户机发送服务器的 user-agent 头部的值 if((navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|A
阅读全文
摘要：<button>点击</button> <script> var btn = document.querySelector('button'); btn.addEventListener('click', function() { // 记录浏览历史，所以可以实现后退功能 // location.a
阅读全文
摘要：this指向问题 this的指向在函数定义的时候是确定不了的，只有函数执行的时候才能确定this到底指向谁，一般情况下this的最终指向的是那个调用它的对象。 现阶段，我们先了解一下几个this指向 全局作用域或者普通函数中this指向全局对象window（注意定时器里面的this指向windo
阅读全文
摘要：普通函数是按照代码顺序直接调用。 简单理解： 回调，就是回头调用的意思。上一件事干完，再回头再调用这个函数。 例如：定时器中的调用函数，事件处理函数，也是回调函数。 以前我们讲的 element.onclick = function(){} 或者 element.addEventListener(“
阅读全文
摘要：BOM（Browser Object Model）即浏览器对象模型，它提供了独立于内容而与浏览器窗口进行交互的对象，其核心对象是 window。 BOM 由一系列相关的对象构成，并且每个对象都提供了很多方法与属性。 BOM 缺乏标准，JavaScript 语法的标准化组织是 ECMA，DOM
阅读全文
摘要：<script> // 常用的键盘事件 //1. keyup 按键弹起的时候触发 document.addEventListener('keyup', function() { console.log('我弹起了'); }) //3. keypress 按键按下的时候触发 不能识别功能键 比如 ct
阅读全文
摘要：<div>123</div> <script> var div = document.querySelector('div'); div.addEventListener('click', function(e) { // e.target 和 this指向的都是div console.log(e.
阅读全文
摘要：node.removeChild() 方法从 node节点中删除一个子节点，返回删除的节点。 <button>删除</button> <ul> <li>熊大</li> <li>熊二</li> <li>光头强</li> </ul> <script> // 1.获取元素 var ul = documen
阅读全文
摘要：网页中的所有内容都是节点（标签、属性、文本、注释等），在DOM 中，节点使用 node 来表示。 HTML DOM 树中的所有节点均可通过 JavaScript 进行访问，所有 HTML 元素（节点）均可被修改，也可以创建或删除。 一般地，节点至少拥有nodeType（节点类型）、nodeNam
阅读全文
摘要：<div id="demo" index="1" class="nav"></div> <script> var div = document.querySelector('div'); // 1. 获取元素的属性值 // (1) element.属性 console.log(div.id); //
阅读全文
摘要：我们可以通过 JS 修改元素的大小、颜色、位置等样式 方式1：通过操作style属性 元素对象的style属性也是一个对象！ 元素对象.style.样式属性 = 值; <body> <div></div> <script> // 1. 获取元素 var div = document.querySel
阅读全文
摘要：JavaScript的 DOM 操作可以改变网页内容、结构和样式，我们可以利用 DOM 操作元素来改变元素里面的内容、属性等。（注意：这些操作都是通过元素对象的属性实现的） 获取属性的值 元素对象.属性名 设置属性的值 元素对象.属性名 = 值 <body> <button id="ldh">刘德华
阅读全文
摘要：事件三要素 事件源（谁）：触发事件的元素 事件类型（什么事件）： 例如 click 点击事件 事件处理程序（做啥）：事件触发后要执行的代码(函数形式)，事件处理函数 <body> <button id="btn">唐伯虎</button> <script> // 点击一个按钮，弹出对话框 // 1.
阅读全文
摘要：DOM树 又称为文档树模型，把文档映射成树形结构，通过节点对象对其处理，处理的结果可以加入到当前的页面。 文档：一个页面就是一个文档，DOM中使用document表示 节点：网页中的所有内容，在文档树中都是节点（标签、属性、文本、注释等），使用node表示 标签节点：网页中的所有标签，通常称为元素节
阅读全文
摘要：// 查找字符串"abcoefoxyozzopp"中所有o出现的位置以及次数 // 核心算法：先查找第一个o出现的位置 // 然后 只要indexOf 返回的结果不是 -1 就继续往后查找 // 因为indexOf 只能查找到第一个，所以后面的查找，一定是当前索引加1，从而继续查找 var str
阅读全文
摘要：instanceof 运算符 instanceof 可以判断一个对象是否是某个构造函数的实例 例子 var arr = [1, 23];var obj = {};console.log(arr instanceof Array); // trueconsole.log(obj instanceof
阅读全文
摘要：// 格式化日期 年月日 var date = new Date(); console.log(date.getFullYear()); // 返回当前日期的年 2019 console.log(date.getMonth() + 1); // 月份 返回的月份小1个月 记得月份+1 呦 conso
阅读全文
摘要：数字对象Math 里面求 最大值方法 -- Math.max(1,12,....) 例： console.log(Math.max(1, 99, 3)); // 99 如果一组数字，里面出现非数字的-- 返回NaN 例： console.log(Math.max(1, 99, 'pink老师'));
阅读全文
摘要：对象里面的属性调用 : 对象.属性名 ，这个小点 . 就理解为“ 的 ” 对象里面属性的另一种调用方式 : 对象[‘属性名’]，注意方括号里面的属性必须加引号 var star = { name : 'pink', age : 18, sex : '男', sayHi : function(){ a
阅读全文
摘要：/* 只选择 type =text 文本框的input 选取出来 */input[type=text] { color: pink;}/* 选择首先是div 然后 具有class属性 并且属性值 必须是 icon开头的这些元素 */div[class^=icon] { color: red;}/*
阅读全文
摘要：通过盒子的宽度设置成百分比来根据屏幕的宽度来进行伸缩，不受固定像素的限制，内容向两侧填充 流式布局，百分比布局，只能处理宽度百分比：width：xx%。 高度没有办法确定，所以只能固定，height：xxpx； flex布局 当我们为父盒子设为 flex 布局以后，子元素的 float、clea
阅读全文
摘要：background-size 属性规定背景图像的尺寸 单位： 长度|百分比|cover|contain; cover:会以短边为准，直至短边和盒子重合，cover把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。（等比例拉伸，完全覆盖，会有一边超出） contain:以长边为准，只要触及父盒子
阅读全文
摘要：校验规则写在vue中的data函数里的return中 自定义校验规则写到data函数内return外面 data() { // 校验手机号 var validtelephone = (rule,value,callback)=>{ let reg = /^((13[0-9])|(14[5|7])|(
阅读全文
