xiangyizhixuexi的博客

原创 Intersection Observer和getBoundingClinetRect的使用

IntersectionObserver接口(从属于Intersection Observer API) 提供了一种异步观察目标元素与其祖先元素或顶级文档视窗(viewport)交叉状态的方法。祖先元素与视窗(viewport)被称为根(root)。Element.getBoundingClientRect()方法返回元素的大小及其相对于视口的位置。这两种方法都可以获取当前元素到视口边界的高度，但是他们两个的区别是Intersection Observer在性能上会更好，因为它不会引起回..

原创 【面试题】Typescript的interface和type的区别

interface：接口声明总是引入指定的对象类型，接口可以在extends和implements子句中命名，接口创建一个到处使用的名称，一个接口可以有多个合并声明type：类型别名声明可以为任何类型（包括基元类型、联合类型、交集类型、引入名称），对象类型文字的类型别名不可以“扩展”或“实现”子句中命名，类型别名不创建新名称，不能有多个合并声明...

原创 【面试题】常见算法的时间空间复杂度

1、冒泡排序：冒泡排序的原理如下，从第一个元素开始，把当前元素和下一个索引元素进行比较。如果当前元素大，那么就交换位置，重复操作直到比较到最后一个元素，那么此时最后一个元素就是该数组中最大的数。下一轮重复以上操作，但是此时最后一个元素已经是最大数了，所以不需要再比较最后一个元素，只需要比较到 length - 1 的位置。该排序的时间复杂度为O(n*n)2、插入排序：插入排序的原理如下。第一个元素默认是已排序元素，取出下一个元素和当前元素比较，如果当前元素大就交换位置。那么此时第一个元素就是当前的最小数

原创 css3的权重以及新增属性选择器

原创 8个非常实用的Vue自定义指令（面试题）

1、v-copy需求：实现一键复制文本内容，用于鼠标右键粘贴。思路：动态创建textarea标签，并设置readOnly属性及移出可视区域 将要复制的值赋给textarea标签的value属性，并插入到body 选中值textarea并复制 将body中插入的textarea移除 在第一次调用时绑定事件，在解绑时移除事件const copy = { bind(el, { value }) { el.$value = value el....

原创 基本项目搭建

vue 2的脚手架创建项目:vue init webpcak 项目名搭建后台服务器：npm i express@next mongoose cors :创建express框架以及mongoose数据库以及可以跨域请求corsnpm init -y : 初始化项目生成package.josn文件

原创 node的事件循环阶段

原创 view-router多次跳转同一页面而不触发created和mounted解决方法

但是用路由跳转到页面时，只会在第一次跳转触发created和mounted钩子，如果想要多次跳转同个路由界面又要重新触发created和mounted钩子则需要加入以下语句： <router-view :key="key"></router-view>computed: { key() { return this.$route.name !== undefined? this.$route.name + +new Date(): this.$r

原创 vuex中getters的辅助函数mapgetters的使用

辅助函数仅仅是为了使用vuex中的计算属性getters，可以让组件中的计算函数直接使用先导入mapgetters函数：import {mapGetters} from 'vuex'记住是从vuex插件中直接导入后在vuex中的getters里进行定义:getters: { cartlength(state){ return state.newproduct.length } }最后在组件中的computed中直接注

原创 this.$nexTick()使用

this.$nextTick()将回调延迟到下次 DOM 更新循环之后执行。在修改数据之后立即使用它，然后等待 DOM 更新。它跟全局方法 Vue.nextTick 一样，不同的是回调的 this 自动绑定到调用它的实例上。夹在修改数据与更新DOM之间，会等到DOM更新之后执行。...

原创 vue中的updated和watch的区别

Vue中updated和watch的区别watch:1.仅仅是数据发生改变的时候会侦听到2.只是会检测到你写在watch里的那些属性,没写的就不会触发updated:1.执行到它的时候时候是数据发生变化且界面更新完毕3.所有的数据发生变化都会调用4.每次触发的代码都是同一个作者：坚持努力_573f链接：https://www.jianshu.com/p/73b1bf699d75来源：简书著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。...

原创 跳转路由小记

activated () { this.$refs.scroll.scroll.scrollTo(0,this.leavetop,0) this.$refs.scroll.scroll.refresh }, deactivated () { this.leavetop = this.$refs.scroll.getScrollY() },如图上面是进入到此路由则会调用该方法，而下面的函数则是在离开该所在的路由时调用的方法函数...

原创 vue的事件总线基本理解

EventBus 又称为事件总线。在Vue中可以使用 EventBus 来作为沟通桥梁的概念，就像是所有组件共用相同的事件中心，可以向该中心注册发送事件或接收事件，所以组件都可以上下平行地通知其他组件，但也就是太方便所以若使用不慎，就会造成难以维护的灾难，因此才需要更完善的Vuex作为状态管理中心，将通知的概念上升到共享状态层次。初始化事件总线可以使它初始化为一个Vue的实例即可在一个组件使用this.$bus.$emit进行发射需要监听的事件在另外需要监听事件的组件使用this.$bus.$o

原创 v-on修饰符小笔记

.stop:调用event.stop Propagation()。.prevent:调用event.preventDefault()..(keyCode|keyAlias):只当事件是从特定键触发时才触发回调。.native:监听组件根元素的原生事件.once:只触发一次回调

原创 better-scroll插件的应用

probeType:3,pullUpLoad:true,observeDOM:true,click:trueprobeType是侦测实时的页面滚动位置pullUpLoad是是否继续下拉加载observeDOM是监听DOM树结构变化的事件click因为 better-scroll 会阻止原生的 click 事件，所以是解决方法则是变为true。...

原创 ref的语法使用

ref如果是绑定在组件中，那么通过this.$refs.refsname可以返回组件对象ref如果是绑定在普通元素中，那么通过this.$refs.refsname可以返回元素对象

原创 Vue中的生命周期的created和mounted区别

created:在模板渲染成html前调用，即通常初始化某些属性值，然后再渲染成视图。mounted:在模板渲染成html后调用，通常是初始化页面完成后，再对html的dom节点进行一些需要的操作。其实两者比较好理解，通常created使用的次数多，而mounted通常是在一些插件的使用或者组件的使用中进行操作。也就是说想要在渲染成html代码或者是在el挂载之前进行操作的话则是用created；如果是要在渲染完成之后或者是el挂载完成之后则是使用mounted。...

原创 $emit的小记

$emit是用来在子组件与父组件通信的语法，将子组件的数据‘发射给’父组件也就是传数据给父组件，具体的语法如下：子组件传出数据：this.$emit('tabchange', index)父组件接收数据：@tabchange= "tabchange"并且在tabchange方法里面就可以使用数据： tabchange(index){ switch(index){ case 0: this.currenttype = '

原创 css中的sticky属性

position:sticky是css定位新增属性；可以说是相对定位relative和固定定位fixed的结合；它主要用在对scroll事件的监听上；简单来说，在滑动过程中，某个元素距离其父元素的距离达到sticky粘性定位的要求时(比如top：100px)；position:sticky这时的效果相当于fixed定位，固定到适当位置。使用：#sticky-nav {position : sticky ;top : 100px ;}设置position:sticky同时给一个(top,botto

原创 Vue中@与~的使用

@这是webpack设置的路径别名。 在build/webpack.base.conf这个文件里面定义。 vue项目中默认定义了@（最常用）和vue$两个别名，如果需要，可以自己添加。而且@默认定义的意思是src这个文件夹的路径。import navtabbar from '@/components/common/navtabbarcommon/navtabbar'如图则是@的使用方法~ 使用说明~是相对于其他路径（文件）的，类似于相对...

原创 记Vue报错Custom elements in iteration require ‘v-bind:key‘ directives.“错误解决

在使用v-for时会出现v-for报错 [vue/valid-v-for]Custom elements in iteration require ‘v-bind:key’ directives.eslint-plugin-vue解决方法则是加入key属性即可：<swiper-item v-for = "item in banner" :key="item.label">加入key属性之后则可以正常运行第二种解决方法：找到 文件->首选项->设置 里面输入：ve

原创 用axios实例封装进行网络请求数据

axios框架就是为了请求网络数据，具体的语法如下：import axios from 'axios'export function request(config){ const instance1 = axios.create({ baseURL:'http://123.207.32.32:8000', timeout:5000 }) instance1.interceptors.request.use(config=&gt...

原创 4x版本的Vue的slot具名插槽的使用

如图具名插槽的使用：2.6版本之前的具名插槽的用法：slot：‘xxx’2.6版本之后的用法：v-slot = xxx

原创 vuex中的actions属性基本使用语法

当mutation属性里面需要用到异步操作时，我们不能够直接在mutation直接使用异步操作，而是需要使用到actions属性来改变，如图：updateinfo(state){ state.stu[0].name = 'zhubin' } }, actions:{ aupdate(context,payload){ return new Promise ((resolve,reject)=>{

原创 vuex的一些核心属性使用

vuex有state、mutation、getters等核心属性，具体的用法如下：state是用来用来保存需要多次使用的数据，mutation则是需要改变state属性里面的数据，改变state的值只能通过mutation来改变，而getters是相当于组件的计算属性，简化步骤，这些属性的具体使用语法如下：export default new Vuex.Store({ state:{ counter:0, stu:[ {na.

原创 promise的基本使用以及了解

当使用异步操作进行网络请求时，可能会有遇到地狱请求的问题，所以为了解决这个问题使用promise来解决。具体的用法如下：promise.all的用法： Promise.all([ new Promise((resolve,reject)=>{ setTimeout(()=>{ resolve('aaa') },1000) }),

转载 apply、call、bind方法的大致理解

1.1三者的相同点：都是用来改变this的指向1.2 call()和apply()的区别：相同点：都是调用一个对象的一个方法，用另一个对象替换当前对象（功能相同）例如： B.call(A, args1,args2);即A对象调用B对象的方法F.apply(G, arguments);即G对象应用F对象的方法不同点：参数书写方式不同call()的第一个参数是this要指向的对象，后面传入的是参数列表，参数可以是任意类型，当第一个参数为null、undefined的时候，默认指向window；a

原创 prototype与_proto_和constrcutor的大致理解

①__proto__和constructor属性是对象所独有的；② prototype属性是函数所独有的，因为函数也是一种对象，所以函数也拥有__proto__和constructor属性。__proto__属性的作用就是当访问一个对象的属性时，如果该对象内部不存在这个属性，那么就会去它的__proto__属性所指向的那个对象（父对象）里找，一直找，直到__proto__属性的终点null，再往上找就相当于在null上取值，会报错。通过__proto__属性将对象连接起来的这条链路即我们所谓的原型链。p

原创 路由的懒加载方式

路由懒加载的好处：当打包构建应用时，JavaScript 包会变得非常大，影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就更加高效了。如图所示：import Vue from 'vue'import Router from 'vue-router'import home from '../view/home/home'import fenlei from '../view/fenlei/fenlei'import ...

原创 router-link属性补充

还有一些其他属性:tag:tag可以指定之后渲染成什么组件，比如渲染成一个button按钮replace:replace不会留下history记录，所以指定replace的情况下。后退键返回不能返回到上一个页面。active-class:当对应的路由匹配成功时，会自动给当前元素设置一个router-link-active的class，设置active-class可以修改默认的名称。比如actvie-class = 'active' 则可以将class的名称改为active，但这种方法只能给对

转载 导航守卫的解析

1 全局守卫。router.beforeEach当从一个路由跳转到另一个路由的时候触发此守卫，这个守卫也叫全局前置守卫，所以它是跳转前触发的。任何路由跳转都会触发。const router = new VueRouter({ ... })router.beforeEach((to, from, next) => { // ...})每个守卫都有三个参数：to：这是你要跳去的路由对象。from：这是你要离开的路由对象。next：是一个方法，它接受参数。这个方法必须调用要..

原创 关于路由跳转界面的小知识点

路由跳转可以

原创 遇到的小知识点

但需要动态绑定数据的时候就是需要v-bind或者是语法糖:来进行绑定，但是如果需要传递的数据是一个准确的数据比如字符串等的话则不需要用v-bind来进行动态绑定，直接传值即可<tabbar-item path = '/home'> <img slot="item-icon" src="./assets/img/tabbar/首页-选中.svg" alt=""> <img slot="item-icon-actvie" src="./asse

原创 前端路由修改url但是刷新界面返回数据请求的方法

修改前端路由url大体有两种方法：1.使用location.hash值来修改，2.使用history.state的栈来修改location.hash:具体语法为：

原创 webpack的小知识点

用commonjs的规范导出导入：module export{ name,}

原创 插槽slot的基本使用包括作用域插槽

slot是为了给组件的模板使用预留空间，让多次使用组件时可以修改内容，时组件有不同也有相同，下面是slot的使用slot修改

原创 $children与$refs的基本使用

在组件中访问子组件有两个种方法，一种是$children，另外一种是$refs，而这两个的用法又格外不同。$children：如图

原创 Vue组件之间的通信含父传子或者是子传父以及input中父子组件的双向绑定

父传子：当父组件的数据需要传给子组件时，则要用到props这个属性，在组件申请中添加这个props，如：

原创 记为什么Vue组件中data必须是一个函数

在学习Vu组件是可复用的vue实例，一个组件被创建好之后，就可能被用在各个地方，而组件不管被复用了多少次，组件中的data数据都应该是相互隔离，互不影响的，基于这一理念，组件每复用一次，data数据就应该被复制一次，之后，当某一处复用的地方组件内data数据被改变时，其他复用地方组件的data数据不受影响...

原创 记组件的一些小细节

在注册组件的构造器中的模板必须要将html内容嵌入到一个div中，不能直接使用