獨歸-CSDN博客

原创 vue实现点击复制功能

废话不多说，直接上代码html部分<template> <dvi> <div @click="">今天星期三<div> </div></template>js部分<script>export default { data() { return { url:"http://www.4399.com/" }; }, methods: { copyText() {

2021-06-02 11:07:07 150

原创 vue同一个dom绑定多个点击事件

html部分<template> <div @click="baidu();jump()">跳转</div></template>js部分<script>export default { data() { return {}; }, methods: { baidu() { if (!localStorage.getItem("token")){ window.open("http:

2021-06-02 10:51:17 388

原创 for...in和for..of的区别是什么？

在遍历属性的时候推荐使用for in，在遍历数组的时候推荐使用for or for in循环输出的是key,for or 循环输出的是value for or是弥补修复了es5中for in的不足 for of不能循环普通对象，需要object.keys（）搭配使用...

2021-04-08 14:44:55 236

在开始之前先看一下代码：ajax:　　$.ajax({　　　　url: '接口地址',　　　　type: 'get', //或者post　　请求类型　　　　dataType: 'json',　　　　data: { // 要发送的请求参数　　　　　　'username' : 'hermit',　　　　　　'password' : 'a123'　　　　},　　　　success : function (response) {　　　　　　console.log(resp

2021-04-08 11:19:55 314

转载为何组件的data必须是一个函数

一、实例和组件定义data的区别vue实例中的data属性既可以是一个对象，也可以是一个函数const app = new Vue({ el:"#app", // 对象格式 data:{ foo:"foo" }, // 函数格式 data(){ return { foo:"foo" } }组件中定义data属性，只能是一个函数如果为组件data直接定义为一个对象Vu

2021-04-07 17:12:50 1346

原创 Ajax的原理

Ajax的原理简单来说是在用户和服务器之间加了—个中间层(AJAX引擎)，通过XmlHttpRequest对象来向服务器发异步请求，从服务器获得数据，然后用javascript来操作DOM而更新页面。使用户操作与服务器响应异步化。这其中最关键的一步就是从服务器获得请求数据Ajax的过程只涉及JavaScript、XMLHttpRequest和DOM。XMLHttpRequest是ajax的核心机制 //1. 创建连接 var xhr = null; xhr = new XMLHttpR

2021-04-06 07:52:18 60

原创 js数据类型校验

六种数据类型：number、string、boolean、undefined、null、objectES6：symbol 独一无二的值ES10：bigint四种方式：//typeof() console.log( typeof(a) );//返回表示数据类型的字符串//instanceof操作符console.log( a instanceof number ); // 返回true或false//constructor console.log( a.__proto__.

2021-04-02 07:43:52 729

原创 vue v-for直接循环数字

vue v-for直接循环数字，也就是固定次数<span v-for="index of 5" :key='index'>{{index}}</span>输出结果为：0 1 2 3 4

2021-03-26 17:06:23 9752 4

原创简述src和href的区别

href是Hypertext Reference的缩写，表示超文本引用。用来建立当前元素和文档之间的链接。常用的有：link、a。例如：<link href="reset.css" rel=”stylesheet“/>浏览器会识别该文档为css文档，并行下载该文档，并且不会停止对当前文档的处理。这也是建议使用link，而不采用@import加载css的原因。src是source的缩写，src的内容是页面必不可少的一部分，是引入。src指向的内容会嵌入到文档中当前标签所在的位置。常用的有：

2021-03-25 20:25:07 161

原创行内元素有哪些？块级元素有哪些？空(void)元素有那些？行内元素和块级元素有什么区别？

行内元素有：a b span img input select strong块级元素有：div ul ol li dl dt dd h1 h2 h3 h4…p空元素：br hr img input link meta行内元素不可以设置宽高，不独占一行块级元素可以设置宽高，独占一行块级元素转行内元素:display:block行内元素转块级元素:displai:inline行内元素或块级元素转行内块元素:display:inlind-block...

2021-03-25 20:23:12 269

原创什么是盒模型？

盒模型margin(外边距)- 清除边框外的区域，外边距是透明的。border(边框)- 围绕在内边距和内容外的边框。padding(内边距)- 清除内容周围的区域，内边距是透明的。content(内容)- 盒子的内容，显示文本和图像。W3C的标准盒模型在标准的盒子模型中，width指content部分的宽度IE的盒模型在IE盒子模型中，width表示content+padding+border这三个部分的宽度css如何设置两种模型这里用到了CSS3 的属性 box-sizing/

2021-03-25 20:05:13 75

原创 vue视图不更新解决方法，2.0与3.0的区别

vue数组属性发生改变时，视图不更新如何解决data中数据，都是响应式。也就是说，如果操作data中的数据，视图会实时更新；但在实际开发中，若data中数据类型较为复杂，方法methods中改变对象的属性，视图也就是页面并不会改变原因是vue监听不到数据类型特别复杂的属性。原因：因为 vue 的检查机制在进行视图更新时无法监测数组中的某个对象的属性值的变化。1，使用this.$set(this.obj,key,val) 来解决对象操作：三个参数：this.$set(“改变的对

2021-03-25 15:33:18 577

原创 sessionStorage、localStorage、cookie的区别

LocalStorage命周期是永久性的。即使关闭浏览器，数据也不会销毁存放数据大小为一般为5MB,而且它仅在客户端（即浏览器）中保存，不参与和服务器的通信需要主动去销毁储存的对象类型均为字符串类型同源可以读取并修改localStorage数据var obj = { user: "小黑", sex: "男", age: 18}//存储obj = JSON.stringify(obj)localStorage.setItem('obj', obj)//查看localStorage

2021-03-25 07:53:35 63

原创 ajax

1、ajax是什么ajax:用来实现客户端与服务器端的异步通信效果，实现页面的局部刷新2、优点与缺点优点：可以实现局部刷新页面，即在页面不刷新的情况下获取数据。缺点：如果网速慢，则会出现ajax请求缓慢，页面空白的情况，对客户的体验不好。ajax请求不利于搜索引擎优化，一般搜不到ajax添加到页面的信息！解决方案：可以先用服务器渲染作用：AJAX 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。3、原生代码 var xhr = new XMLHttpRequest()//

2021-03-24 07:54:47 72

原创 JS盒模型

一张图秒懂JS盒模型

2021-03-23 08:04:47 77

原创 JS事件

1，什么是事件事件是文档和浏览器窗口中发生的特定的交互瞬间，例如用户点击内容，鼠标经过特定的元素以及按下某个键盘按键，web页面加载完成，用户滚动。都是事件2，什么是事件流事件流描述的是从页面中接受事件的顺序，事件流分为事件冒泡事件阶段事件捕获事件流分为事件冒泡流和事件捕获流事件冒泡流 => ie提出的事件捕获流 => 网景提出的事件流三个阶段顺序事件捕获 =>事件冒泡3，事件冒泡事件开始时由最具体的元素接收，然后逐级向上传播到较为

2021-03-23 07:45:10 93

转载浏览器对象模型

1，BOMBOM提供了独立于内容而与浏览器窗口进行交互的对象。BOM缺乏标准，javaScript语法的标准化组织是ECMA，DOM的标准化组织是W3C由于BOM主要用于管理窗口与窗口之间的通讯，因此其**核心对象是window**所有浏览器都支持 window对象。它表示浏览器窗口，是BOM的顶层（核心）对象，所有对象都是通过它延伸来的2，window的五大对象（1）Location 对象Location 对象包含有关当前 URL(统一资源定位符) 的信息。（Uniform Resourc

2021-03-22 07:59:21 102

转载浏览器对象模型BOM

1，BOMBOM提供了独立于内容而与浏览器窗口进行交互的对象。BOM缺乏标准，javaScript语法的标准化组织是ECMA，DOM的标准化组织是W3C由于BOM主要用于管理窗口与窗口之间的通讯，因此其**核心对象是window**所有浏览器都支持 window对象。它表示浏览器窗口，是BOM的顶层（核心）对象，所有对象都是通过它延伸来的2，window的五大对象（1）Location 对象Location 对象包含有关当前 URL(统一资源定位符) 的信息。（Uniform Resourc

2021-03-21 21:53:33 83

转载 DOM

1，DOM的本质：DOM可以理解为浏览器把拿到的html代码，结构化一个浏览器能识别并且js可操作的一个模型当网页被加载时，浏览器会创建页面的文档对象模型javascript能改变页面中的所有HTML元素javascrip能改变页面中的所有HTML属性javascrip能改变页面中的所有CSS样式javascrip能对页面中的所有事件做出反应DOM是哪种数据结构树（DOM树）DOM树形结构2.js获取DOM节点的几种方式document.getElementById(); //id名，

2021-03-21 21:33:30 63

转载 async/await

async/await是什么async/await 是ES7提出的基于Promise的解决异步的最终方案。asyncasync是一个加在函数前的修饰符，被async定义的函数会默认返回一个Promise对象resolve的值。因此对async函数可以直接then，返回值就是then方法传入的函数。// async基础语法async function fun0(){ console.log(1); return 1;}fun0().then(val=>{ conso

2021-03-21 21:15:46 70

原创 event loop

event loopEvent Loop是什么event loop是一个执行模型，在不同的地方有不同的实现。浏览器和NodeJS基于不同的技术实现了各自的Event Loop。浏览器的Event Loop是在html5的规范中明确定义。NodeJS的Event Loop是基于libuv实现的。可以参考Node的官方文档以及libuv的官方文档。libuv已经对Event Loop做出了实现，而HTML5规范中只是定义了浏览器中Event Loop的模型，具体的实现留给了浏览器厂商。宏队列和微队列

2021-03-21 21:06:12 46

原创 promise进阶

异步问题嵌套层次很深，难以维护 – 回调地狱无法正常使用return 和 throw无法正常检索堆栈信息多个回调之间难以建立联系Promisepromise是一个代理对象，它和原先要处理的操作并无关系promise通过引入一个回调，避免更多的回调promise三个状态promise状态发生改变，就会出发.then()里面的响应函数处理后续步骤promise状态一经改变，不会再变。pending [待定]初始状态fulfilled [实现]操作成功rejected [被否决]操作失败

2021-03-21 20:55:37 173 1

原创微信小程序中的父子组件传值

父组件向子组件传值，子组件使用properties来接受。类型vue中的props子组件向父组件传值，使用this.triggerEvent来发送事件。类似vue中的this.$emit举个例子：父组件把数据传给swiper组件，search组件把数据传给父组件目录结构：父传子子传父子组件search父组件index...

2021-03-19 20:16:09 91

原创 JS的异步和同步

同步，可以理解为在执行完一个函数或方法之后，一直等待系统返回值或消息，这时程序是出于阻塞的（会阻塞代码），只有接收到返回的值或消息后才往下执行其他的命令。优点：按照顺序一个一个来，不会乱掉，更不会出现上面代码没有执行完就执行下面的代码，缺点：是解析的速度没有异步的快；var num = 10function fun() { num = 20}function fn() { console.log(num);//10}fn()fun()console.log(num);/

2021-03-18 21:31:55 77 1

原创微信小程序如何使用第三方UI组件库

组件库主要是vant和微信小程序官方文档那么如何引入vant weapp呢？步骤一通过 npm 安装使用 npm 构建前，请先阅读微信官方的 npm 支持通过 npm 安装npm i @vant/weapp -S --production通过 yarn 安装yarn add @vant/weapp --production安装 0.x 版本npm i vant-weapp -S --production步骤二修改 app.json将 app.json 中的 “style”: “v2

2021-03-18 17:09:36 426

原创 JS面试题

一、JS作用域什么是作用域？通俗来说就是代码名字（变量）作用的范围。作用域的目的：是为了提高程序的可靠性，更重要的是减少命名冲突JS作用域可以分为：全局作用域、局部作用域（函数作用域）、块级作用域（ES6）（一）全局作用域：　　直接编写在 script 标签之中的JS代码，都是全局作用域；或者是一个单独的 JS 文件中的。全局作用域在页面打开时创建，页面关闭时销毁；在全局作用域中有一个全局对象 window（代表的是一个浏览器的窗口，由浏览器创建），可以直接使用。//在全局作用域中，//所

2021-03-17 21:42:35 580 5

原创改变this指向的方法及区别

改变this指向的方法有：.bind()、call() 、apply()call()window.color = 'red';document.color = 'yellow';var s1 = {color: 'blue'};function changeColor () { console.log(this.color);}changeColor.call() //不传参数默认指向window 输出：redchangeColor.call(window) //指向window 输出

2021-03-17 21:41:43 499

原创闭包

闭包当一个函数的返回值是另一个函数，而返回的那个函数调用了其父函数的内部变量，切返回的那个函数在外部被执行，就产生了闭包举个例子：function fun(){ let a = 100; return function(){ cosole.log(a) }}let fn = fun()let a = 200fn()//100//传一个函数作为参数function fun(){ let a = 200 console.log(a)}let a = 100function

2021-03-17 21:22:53 48

原创 promise是什么？有哪些状态和参数？如何使用？

promise是什么？promise对象本质上其实是一个构造函数，就是用来解决异步编程，主要用于异步计算，解决了回调地狱的问题，不是多重嵌套，而是链式调用，使用.then方法,就是针对回调函数的改进promise的三个状态是什么？1.pending初始状态2.fulfilled操作成功状态3.rejected操作失败状态Promise对象的状态改变只有两种可能：从pending变为fulfilled，即从初始状态变为成功状态从pending变为rejected，即从初始状态变为失败状态这两

2021-03-17 11:30:34 1369 7

原创微信小程序的wx.request的简单封装

1、为什么要封装wx.request封装wx.requset可以更有效的管理后台接口，更改更方便，更有利于项目的维护2、首先在utils文件夹中创建一个request.js文件，用来封装wx.request如图：在request文件中封装如下代码：const request = (url, method, data) => { return new Promise((resolve, reject) => { wx.showLoading({ title: '

2021-03-17 10:59:14 354

原创 vue面试题（四）

一、为何组件的data是一个函数Object是引用数据类型，如果不用function返回，每个组件的data都是内存的同一个地址，一个数据改变了其他也改变了；JavaScript只有函数构成作用域(注意理解作用域，只有函数{}构成作用域,对象的{}以及if(){}都不构成作用域),data是一个函数时，每个组件实例都有自己的作用域，每个实例相互独立，不会相互影响。二、ajax应该放在那个生命周期里？应该放在mounted生命周期里为什么？js是单线程，ajax是异步获取数据为什么不在 crea

2021-03-16 20:44:46 108

原创微信小程序如何使用Vant Weapp组件中的Toast组件

第一步、在app.json或index.json中引入组件"usingComponents": { "van-toast": "@vant/weapp/toast/index" }第二步、在index.wxml文件中写入：<van-toast id="van-toast" />第三步、在index.js中引入官方的路径import Toast from 'path/to/@vant/weapp/dist/toast/toast';但是引入之后回报路径错误，如图那如何解决呢

2021-03-16 11:13:03 791

原创微信小程序使用Vant Weapp的Toast 遇到的问题

官方给的路径是这样import Toast from 'path/to/@vant/weapp/dist/toast/toast';引入之后发现抱错正常的路径为：import Toast from '@vant/weapp/toast/toast';修改完之后就可以了

2021-03-16 11:01:48 258

原创 vue面试题（三）

一、MVVMMVVM是Model-View-ViewModel的简写。即模型-视图-视图模型。【模型】指的是后端传递的数据。【视图】指的是所看到的页面。【视图模型】mvvm模式的核心，它是连接view和model的桥梁。它有两个方向：一是将【模型】转化成【视图】，即将后端传递的数据转化成所看到的页面。实现的方式是：数据绑定。二是将【视图】转化成【模型】，即将所看到的页面转化成后端的数据。实现的方式是：DOM 事件监听。这两个方向都实现的，我们称之为数据的双向绑定。总结：在MVVM的框架下视

2021-03-15 21:38:18 82

原创 vue面试题

vue-router的使用hash模式（默认），如http://abc.com[#/user/10H5 history模式，如http://abc.com/user/20后者需要server端支持，因此无特殊需求可选择前者vue-router的钩子函数原理：如果没有权限不让进入，有权限才可以进入全局守卫 router.beforeEach() 进入之前触发 router.afterEach() 进入之后触发 router.beforeResolve() 路由解析守卫

2021-03-14 20:36:26 56

原创 vue面试题

v-show和v-if的区别v-if：控制dom元素的显示或隐藏是将DOM元素整个添加或删除；v-show：控制DOM的显示或隐藏是为DOM元素动态的添加css样式 display，设置成 block 或者 none DOM元素还是存在的。为何v-for中要用key1.vue中列表循环需加:key=“唯一标识” 唯一标识尽量是item里面id等，因为vue组件高度复用增加Key可以标识组件的唯一性，为了更好地区别各个组件 key的作用主要是为了高效的更新虚拟DOM。2.key主要用来做dom di

2021-03-14 19:59:13 290 1

空空如也

空空如也