自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+
  • 博客(45)
  • 收藏
  • 关注

原创 Promise

什么是PromisePromise,简单说就是一个容器,里面保存着某个未来才会结束的事件(通常是一个异步操作)的结果。从语法上说,promise 是一个对象,从它可以获取异步操作的的最终状态(成功或失败)。Promise是一个构造函数,对外提供统一的 API,自己身上有all、reject、resolve等方法,原型上有then、catch等方法。promise可以解决回调地狱的问题promise是处理异步回调的解决方案异步的操作reslove 成功时候的回调reject 失败时候的回调P

2021-05-26 11:00:17 97

原创 async / await

async可以作用在任何的方法前, 返回值是一个promise对象;函数内部return的返回值, 会成为then回调函数的参数如果函数内部出现错误, 会被then的第二个参数或者catch捕获到await只能在async修饰下的方法中出现,普通函数内部直接写会报错await is only valid in async function正常情况下 await后面跟的是一个 promise对象, 返回该对象的结果如果await后面不是promise, 直接返回对应的值await会阻塞代码执

2021-05-26 09:56:44 82

原创 VUE 生命周期

一、创建前(beforeCreate)此阶段为实例初始化之后,此时的数据观察和事件机制都未形成,不能获得DOM节点。二、创建后(created)在这个阶段vue实例已经创建,仍然不能获取DOM元素。三、载入前(beforeMount)在这一阶段,我们虽然依然得不到具体的DOM元素,但vue挂载的根节点已经创建,下面vue对DOM的操作将围绕这个根元素继续进行;beforeMount这个阶段是过渡性的,一般一个项目只能用到一两次。四、载入后(mounted)mounted是平时我们使用最多的

2021-05-25 19:47:50 107

原创 面试题

一、this关键字(指向)?this是JavaScript语言的一个关键字,它是函数运行时,在函数体内部自动生成一个对象,只能在函数体内部使用。函数的不同使用场合,this有不同的值。总的来说this就是函数运行时所在的环境对象。情况一:纯粹的函数调用:这是函数的最通常的用法,属于全局调用,因此this就代表全局对象var x = 1;function test(){ console.log(this.x);}test(); // 1 情况二:作为对象方法情况二:

2021-05-20 21:22:12 133

原创 JS继承的几种方式

JS继承的几种方式继承,首先需要一个父类(Father)function Father(name){// 属性this.name = name || 'father',// 实例方法this.sleep = function(){console.log(this.name+"正在睡觉");}}// 原型方法Father.prototype.look = function(book){console.log(this.name + "正在看:" + book);}1.原型继承核

2021-05-09 21:15:30 66

原创 小程序事件

事件类别:tap:点击事件;longtap:长按事件;touchstart:触摸开始;touchend:触摸结束;touchcansce:取消触摸;事件绑定:bind绑定;catch绑定;(能阻止事件冒泡)例如:绑定点击事件 bindtappage.wxml 文件<button bindtap="btnclick"></button>page.js 文件//获取应用实例const app = getApp()Page({ data: {

2021-05-09 20:36:44 59

原创 微信小程序生命周期 / 页面的生命周期 / 页面的用户行为

下面从三个方面来介绍小程序的生命周期:应用生命周期页面生命周期应用及页面生命周期的触发顺序一、应用生命周期App() 必须在 app.js中调用,必须调用且只能调用一次,app.js中定义了一些应用的生命周期函数(1)onLaunch: 初始化小程序时触发,全局只触发一次(2)onShow: 小程序初始化完成或用户从后台切换到前台显示时触发(3)onHide: 用户从前台切换到后台隐藏时触发(4)onError: 小程序发生脚本错误,或者api 调用失败时,会触发 onError并带上

2021-05-06 20:00:59 343 1

原创 微信小程序SEO排名优化

现在越来越多的小程序被开发出来了,小程序多了就需要搜索,那么如何让自己的小程序在众多的小程序中脱颖而出了,这就需要小程序SEO优化。奉道网络(xafengdao.com)在运营实践中总结出了一系列的小程序优化经验,今天就挑选一部分精华分享给大家,现阶段,小程序主要有三大流量入口,我把它分为三种类型:1、被动型:搜索、附近的小程序 、用户分享2、主动型:公众号关联、门店二维码、文章群发、小程序跳转3、付费推广:竞价排名、地区投放、公众号广点通今天,我们主要讲的是被动型的流量入口,我们可以在尽量少.

2021-05-06 19:30:31 2129

原创 小程序开发与网页开发的区别

微信小程序的介绍微信⼩程序,简称⼩程序,英⽂名 Mini Program ,是⼀种不需要下载安装即可使⽤的应⽤,它实现了应⽤“触⼿可及”的梦想,⽤⼾扫⼀扫或搜⼀下即可打开应⽤为什么是微信⼩程序 ?微信有海量⽤⼾,⽽且粘性很⾼,在微信⾥开发产品更容易触达⽤⼾;推⼴app 或公众号的成本太⾼。开发适配成本低。容易⼩规模试错,然后快速迭代。跨平台。...

2021-05-06 19:24:23 3074 1

原创 vue简版源码 Watcher

vue简版源码 Watcher<script src="./mvvm-master/js/watcher.js"></script> // watcher 订阅者Watcherfunction Watcher(vm, exp, cb) { //在watcher的实例上保存回调函数 this.cb = cb; //用于更新界面的回调函数 this.vm = vm; //MVVM的实例vm this.exp = exp; //对应的表达式

2021-05-05 19:05:55 120

原创 vue简版源码 Compile

vue简版源码 Compile<script src="./mvvm-master/js/compile.js"></script> // compile 模板解析Compilefunction Compile(el, vm) { this.$vm = vm; //this Compile的实例 $vm 是MVVM的实例 (vm) // el == "#app" 判断当前用户传递的el属性是元素节点还是选择器,如果是元素节点则直接保存到$el

2021-05-05 19:01:39 53

原创 vue简版源码 Observer

vue简版源码 Observer<script src="./mvvm-master/js/observer.js"></script> // observer 观察者Observerfunction Observer(data) { //在Observer实例上暂存data this.data = data; this.walk(data);}Observer.prototype = { walk: function(data)

2021-05-05 18:58:06 73

原创 vue简版源码 MVVM

vue简版源码 MVVMMVVM<script src="./mvvm-master/js/mvvm.js"></script>// 实现代理 <script> const vm = new MVVM({ el: "#app", data: { name: "xiaoming", age: { a1: 21 }

2021-05-05 18:49:23 66

原创 vue双向数据绑定原理

vue双向数据绑定原理一、原理vue双向数据绑定是通过数据劫持结合发布订阅者模式的方式来实现的,也就是说数据和视图同步,数据发生变化,试图跟着变化,数据也随之发生改变核心:关于vue的数据绑定,其核心是 Object.defineProperty()方法介绍一下Object.defineProperty()方法(1)Object.defineProperty(obj, prop, descriptor) ,这个语法内有三个参数,分别为 obj (要定义其上属性的对象) prop (要定义或修改的

2021-05-03 11:24:58 1466

原创 axios的封装

axios的封装axios的理解axios是通过promise实现对ajax技术的一种封装,就像jquery实现ajax封装一样。vue2之后vue-resource就不在更新了,推荐使用axios,axios可以拦截请求和响应,在then() catch处理前拦截他们,可以用在请求动画等简单来说:ajax技术实现了网页的局部数据刷新,axios实现了对ajax的封装优缺点ajaxajax,本身是针对mvc的编程,不符合现在前端的mvvm的浪潮ajax,基于原生xhr开发,XHR本身的架

2021-05-03 11:24:34 723

原创 vue-router钩子函数和执行顺序

vue-router钩子函数和执行顺序一:全局导航钩子函数1、vue router.beforeEach(全局前置守卫)beforeEach的钩子函数,它是一个全局的before 钩子函数, (before each)意思是在 每次每一个路由改变的时候都得执行一遍。它的三个参数:to: (Route路由对象) 即将要进入的目标 路由对象 to对象下面的属性: path params query hash fullPath matched name meta(在matched下,但是本例可以直接用)

2021-05-03 11:24:08 2899

原创 $nextTick

$nextTick简单说,因为DOM至少会在当前tick里面的代码全部执行完毕再更新。所以不可能做到在修改数据后并且DOM更新后再执行,要保证在DOM更新以后再执行某一块代码,就必须把这块代码放到下一次事件循环里面,比如setTimeout(fn, 0),这样DOM更新后,就会立即执行这块代码。//改变数据vm.message = 'changed'//想要立即使用更新后的DOM。这样不行,因为设置message后DOM还没有更新console.log(vm.$el.textContent)

2021-05-03 11:23:32 47

原创 修改数据页面不更新的原因和解决方案

修改数据页面不更新的原因当vue中data里声明或者已经赋值过的对象、数组时,向对象中添加新的属性,如果更新此属性的值,页面不会更新视图。举个栗子:当我点击按钮想要改变message中的值时此时当我点击按钮,页面并不会发生改变。官方定义:如果在实例创建之后添加新的属性到实例上,它不会触发视图更新。 Vue官方文档给我们提供了两种方法:Vue.set()和this.$set()两种方法作用一样,参数也是一致的。区别:Vue.set 可以设置实例创建之后添加的属性,而this.$set只能设

2021-05-03 11:23:18 3317

原创 v-for中的key值的作用

v-for中的key值的作用当Vue用 v-for正在更新已渲染过的元素列表是,它默认用“就地复用”策略。如果数据项的顺序被改变,Vue将不是移动DOM元素来匹配数据项的改变,而是简单复用此处每个元素,并且确保它在特定索引下显示已被渲染过的每个元素。为了给Vue一个提示,以便它能跟踪每个节点的身份,从而重用和重新排序现有元素,你需要为每项提供一个唯一 key属性。key属性的类型只能为 string或者number类型。实例:<!--注意:v-for循环的时候,key属性只能使用num

2021-05-03 11:21:26 277

原创 vuex的核心概念和运行机制

vuex的核心概念和运行机制vuex的五个核心概念state, getters, mutations, actions, modules。state:vuex的基本数据,用来存储变量geeter:从基本数据(state)派生的数据,相当于state的计算属性mutation:提交更新数据的方法,必须是同步的(如果需要异步使用action)。每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。回调函数就是我们实际进行状态更改的地方,并

2021-05-03 11:17:27 61

原创 v-if和v-for的优先级

v-if和v-for的优先级首先:永远不要把 v-if 和 v-for 同时用在同一个元素上。其次:当 Vue 处理指令时,v-for 比 v-if 具有更高的优先级将 users替换为一个计算属性 (比如 activeUsers),让其返回过滤后的列表将:<ul> <li v-for="user in users" v-if="user.isActive" :key="user.id" > {{ user.name }} &lt

2021-04-30 07:31:42 49

原创 vue相关面试题

vue相关面试题为何组件的data必须是一个函数https://blog.csdn.net/weixin_47220950/article/details/115679096vue常用的指令https://blog.csdn.net/weixin_47220950/article/details/115971419v-if/v-show区别 https://blog.csdn.net/weixin_47220950/article/details/115642162vue生命周期https

2021-04-28 21:39:37 70

原创 vue组件通信二

4. 本地存储原理同vuex相似,利用 window.sessionStorage.setItem(“变量名”, 变量) 存储变量到本地存储,然后通过window.sessionStorage.getItem(“变量名”, 变量) 获取变量5. Vue全局变量原理是将属性值挂载到vue的原型上,然后通过 this.属性值 来访问变量main.jsimport Vue from 'vue'import App from './App.vue'import store from './store

2021-04-28 09:00:17 58

原创 H5特点及新增特性

H5特点及新增特性H5特点:HTML5的跨平台技术 HTML5技术跨平台,适配多终端。传统移动终端上的Native App,开发者的研发工作必须针对不同的操作系统进行,成本相对较高。Nativ App对于用户还存在着管理成本、存储成本以及性能消耗成本。HTML/JavaScript/CSS语言所开发的应用只要一次开发就能进入所有浏览器进行分发。即使是走传统的AppStore应用商店渠道,只需要再将底层用HTML5开发的应用“封装“为App,从时间和资金成本上讲远小于跨系统移植。

2021-04-25 07:50:56 913

原创 vue组件传值

vue组件传值大全一.使用Props传递数据在父组件中使用子组件<template> <div> 父组件:{{mny}} <Son1 :mny="mny"></Son1> </div></template><script>import Son1 from "./Son1";export default { components: { Son1 }, data() { return {

2021-04-23 21:03:33 84

原创 html语义化是什么

HTML语义化是什么一、什么是HTML语义化标签语义化的标签,说明让标签有自己的含义。<p>一行文字</p><span>一行文字</span>如上代码,p 标签与 span 标签都区别之一就是,p 标签的含义是:段落。而 span 标签责没有独特的含义。二、语义化标签的特点代码结构清晰,方便阅读,有利于团队合作开发。方便其他设备解析(如屏幕阅读器、盲人阅读器、移动设备)以语义的方式来渲染网页。有利于搜索引擎优化(SEO)。便于团队开发和维护

2021-04-23 07:37:44 284

原创 cookies sessionStorage和localstorage有什么区别?

本地储存localStorage与cookie的区别1)cookie在浏览器与服务器之间来回传递sessionStorage和localStorage不会把数据发给服务器,仅在本地保存2)数据有效期不同cookie只在设置的cookie过期时间之前一直有效,即使窗口或浏览器关闭sessionStorage:仅在当前浏览器窗口关闭前有效localStorage 始终有效,长期保存3)cookie数据还有路径的概念可以限制cookie只属于某个路径下存储大小也不同,cookie数据不能超4k,s

2021-04-23 07:36:57 837

原创 vue常用的指令

vue常用的指令一、vue常用指令:v-model 多用于表单元素实现双向数据绑定v-for 格式: v-for="(item,index) in/of 数组json" 循环数组或jsonv-show 显示内容 ,通过display=block/none来控制元素隐藏出现v-hide 隐藏内容 同上v-if 显示与隐藏 (dom元素的删除添加 同angular中的ng-if 默认值为false)v-else-if 必须和v-if连用v-else 必须和v-if连用 不能单独使用 否则报错

2021-04-22 08:02:34 44

原创 ES6中let 与const,以及var的区别

ES6中let 与const,以及var的区别本文主要讲解ES6中let与const,以及与var的区别。写文章是为了锻炼一下自己的书写能力以及更加深入理解。现在定为一周最低更新3 篇,如果你也是前端,不太会ES6的一些语法,或者是你刚接触JavaScript,都可以跟着文章练习起来,相信会对你学习 JavaScript有所帮助。var使用var申明的变量,是全局变量。 function textVar(){ var a=30; if(true){ var

2021-04-21 08:53:55 221

原创 vue插槽(slot)详解

vue插槽(slot)详解最近被问起是否了解vue的插槽(slot),咋一想发现,似乎很少用到这玩意。所以整理了下slot的一些用法。slot (父组件 在子组件 处插入内容)Vue 实现了一套内容分发的 API,将元素作为承载分发内容的出口,这是vue文档上的说明。具体来说,slot就是可以让你在组件内添加内容的‘空间’。举个例子://子组件 : (假设名为:ebutton)<template> <div class= 'button'> <butt

2021-04-20 07:59:58 309

原创 学习一下怎么多人共同开发一个项目

学习一下怎么多人共同开发一个项目学习一下怎么多人共同开发一个项目首先呢 你需要有一个公共的远程仓库,然后你需要邀请你的开发人员,等到他们全部都同意你的邀请以后就可以开始开发你们的项目了。要想添加到远程仓库你需要做到以下几点你要克隆到远程仓库,git clone 远程仓库的地址git init 初始化你的本地仓库。git add . 把要推送的项目放到你的暂存区git commit -m 参数 把你要推送的项目保存到把你的本地仓库中git pull 远程仓库的地址把远程仓库的数据拉取到你的

2021-04-19 08:29:47 1204

原创 常见的浏览器内核

常见的浏览器内核常见的浏览器、内核浏览器/RunTime内核(渲染引擎)Chrome谷歌之前Webkit,已改Blink内核FireFox火狐GeckoSafari苹果WebkitIETridentOpera欧朋现已改用Google Chrome的Blink内核...

2021-04-18 18:36:56 137

原创 vue组件封装

vue组件封装vue组件的定义● 组件(Component)是Vue.js最强大的功能之一● 组件可以扩展HTML元素,封装可重用代码● 在较高层面上,组件是自定义元素,Vue.js的编译器为他添加特殊功能● 有些情况下,组件也可以表现用 is 特性进行了扩展的原生的HTML元素● 所有的Vue组件同时也都是Vue实例,所以可以接受相同的选项对象(除了一些根级特有的选项),并提供相同的生命周期钩子vue组件的功能1)能够把页面抽象成多个相对独立的模块2)实现代码重用,提高开发效率和代码质量

2021-04-16 19:36:50 79

原创 简单谈谈 MVC 和 MVVM

简单谈谈 MVC 和 MVVM什么是 MVC?MVC 是一种设计模式,全称是 Model(模型)、View(视图)和 Controller(控制)。MVC 将程序从结构上分为三层:Model(数据层):储存和管理数据View(视图层):展示 UI、响应用户的交互Controller(控制层):监听数据的改变、控制视图行为和处理用户交互这三层紧密联系,又互相独立,每一层内部的变化不影响其他层。每一层对外提供接口,供上一层调用。实现程序的模块化。什么是 MVVM?MVVM 是对 MVC 的

2021-04-15 08:48:02 163

原创 Vue中computed、methods和watch之间的区别

Vue中computed、methods和watch之间的区别对于那些开始学习Vue的人来说,对于方法、计算属性和观察者之间的区别有点混淆。尽管通常可以使用它们中的每一个来完成或多或少相同的事情,但了解每个人在哪里胜过其他人还是很重要的。在这个快速提示中,我们将了解Vue应用程序的这三个重要方面及其用例。我们将通过使用这三种方法中的每一种构建相同的搜索组件来实现这一点。Methods在一个方法中,或多或少是您所期望的——一个对象属性的函数。您可以使用方法对发生在DOM中的事件作出反应,或者可以从组

2021-04-14 19:02:18 103

原创 为何组件的data必须是一个函数

为何组件的data必须是一个函数1、个组件都是 Vue 的实例2、组件共享 data 属性,当 data 的值是同一个引用类型的值时,改变其中一个会影响其他3、组件中的 data 写成一个函数,数据以函数返回值形式定义,这样每复用一次组件,就会返回一份新的 data,类似于给每个组件实例创建一个私有的数据空间,让各个组件实例维护各自的数据。而单纯的写成对象形式,就使得所有组件实例共用了一份 data,就会造成一个变了全都会变的结果data此时是一个对象,里面存放着很多数据,都是指向同一个地址。

2021-04-13 21:16:17 117

原创 v-if与v-show的区别

v-if与v-show的区别v-if与v-show都是vue中的指令,都可以动态控制dom元素显示隐藏。区别:v-show 只是简单的控制元素的 display 属性,而 v-if 才是条件渲染(条件为真,元素将会被渲染,条件为假,元素会被销毁);v-show 有更高的首次渲染开销,而 v-if 的首次渲染开销要小的多;v-if 有更高的切换开销,v-show 切换开销小;v-if 有配套的 v-else-if 和 v-else,而 v-show 没有,v-show是不能和v-else连用的

2021-04-12 21:26:43 110

原创 HTTP和https的区别

面试题HTTP和https的区别一、HTTP和HTTPS的基本概念HTTP:是互联网上应用最为广泛的一种网络协议,是一个客户端和服务器端请求和应答的标准(TCP),用于从WWW服务器传输超文本到本地浏览器的传输协议,它可以使浏览器更加高效,使网络传输减少。HTTPS:是以安全为目标的HTTP通道,简单讲是HTTP的安全版,即HTTP下加入SSL层,HTTPS的安全基础是SSL,因此加密的详细内容就需要SSL。HTTPS协议的主要作用可以分为两种:一种是建立一个信息安全通道,来保证数据传输的安全;另一

2021-04-12 18:33:52 98

原创 从输入url到页面加载完成发生了什么?

从输入url到页面加载完成发生了什么?这是一道经典的面试题,这道面试题不光前端面试会问到,后端面试也会被问到。这道题没有一个标准的答案,它涉及很多的知识点,面试官会通过这道题了解你对哪一方面的知识比较擅长,然后继续追问看看你的掌握程度。从前端的角度出发,我觉得首先回答必须包括以下几个基本的点:1、浏览器的地址栏输入URL并按下回车。2、浏览器查找当前URL是否存在缓存,并比较缓存是否过期。3、DNS解析URL对应的IP。4、根据IP建立TCP连接(三次握手)。5、HTTP发起请求。6、服

2021-04-08 16:25:33 135

原创 原生和jQuery的ajax用法详解

原生ajax步骤以及用法

2021-04-08 15:57:22 124

空空如也

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

提示
确定要删除当前文章?
取消 删除