自定义博客皮肤VIP专享

*博客头图:

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

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

博客底图:

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

栏目图:

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

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+

张木期的博客

仅仅用来记录学习和技术分享

  • 博客(159)
  • 收藏
  • 关注

原创 Vue父子组件执行的生命周期顺序

1. 加载渲染过程同步引入时生命周期顺序为:父组件的beforeCreate、created、beforeMount–> 所有子组件的beforeCreate、created、beforeMount–> 所有子组件的mounted–> 父组件的mounted总结:父组件先创建,然后子组件创建;子组件先挂载,然后父组件挂载若有孙组件呢?父组件先beforeCreate=> created=> beforeMount, 然后子组件开始beforeCreate=>c

2020-11-05 20:15:35 34

原创 Vue.nextTick()

官方文档Vue.nextTick() 在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法,获取更新后的 DOM。获取更新后的DOM言外之意就是什么操作需要用到了更新后的DOM而不能使用之前的DOM或者使用更新前的DOM会出问题,所以就衍生出了这个获取更新后的 DOM的Vue方法。所以放在Vue.nextTick()回调函数中的执行的应该是会对DOM进行操作的 js代码,比如Swiper扩展包的var swiper = new Swiper('.swiper-containe

2020-11-05 19:51:53 191

原创 Vue.observable()

官方文档 Vue.observable()vue2.6发布的一个新的api,可以处理简单的跨组件共享数据状态的问题 ,可以说是个精简版的vuex示例// /store/store.jsimport Vue from 'vue'export const store = Vue.observable({ count: 0 })export const mutations = { setCount (count) { store.count = count }}使用<t

2020-11-05 12:02:38 50

原创 Vue里的keep-alive

keep-alive官方文档官方讲的还是太简单,下面总结一下使用场景吧前言在Vue构建的单页面应用(SPA)中,路由模块一般使用vue-router。vue-router不保存被切换组件的状态,它进行push或者replace时,旧组件会被销毁,而新组件会被新建,走一遍完整的生命周期。但有时候,我们有一些需求,比如跳转到详情页面时,需要保持列表页的滚动条的深度,等返回的时候依然在这个位置,这样可以提高用户体验。在Vue中,对于这种“页面缓存”的需求,我们可以使用keep-alive组件来解决这个

2020-10-26 11:33:59 61

原创 调试神器debugger和console总结

一、打开和进入调试①打开debugger调试无论是web网页(F12)还是微信开发者工具里面,调试都是在source面板②在需要打断点的地方打上标签,如图 39 、47③F5刷新,重新执行,进入断点。如果没有进入断点,说明这个断点不是运行时触发或者需要点击等其他事件触发。二、调试工具说明①进入下个断点,快捷键F8,如果有多个断点,点击时可以直接进入下个断点,忽略断点内部所有逻辑。②忽略代码内部实现,进入下个方法,快捷键 F10,不关注方法内部逻辑,点击直接跳到当前断点的下个方法③

2020-10-26 10:05:22 66

原创 Vue路由传参页面刷新丢失

今天做一个项目,页面直接传递的参数都非常好,但是一刷新就各种报错,一查原来url后面的传递的参数丢失了,于是便去找解决方案,下面总结一下:Vue中给我们提供了三种路由传参方式,下面我们一个一个的来看一下:方法一:params传参:this.$router.push({ name:"admin",    //这里的params是一个对象,id是属性名,item.id是值(可以从当前组件或者Vue实例上直接取) params:{id:item.id}}) //这个组件对应的

2020-10-21 19:06:52 44

原创 confirm弹框内容如何换行?

今天做一个需求发现confirm里的换行实现不了,一路上找了很多方法踩了很多坑都解决不了,最终偶然发现了一个属性解决掉了,下面把我踩的坑总结一下总结一下换行方法,来源于网上可自行实践。1、\u000d 方法加\u000d<script language="JavaScript"> confirm("第一行 \u000d 第二行");</script>2、\r 方法加 \r —— 注意:\r 适用于谷歌浏览器<script language="JavaSc

2020-10-21 17:41:35 166

原创 Vue.use()

官方文档:Vue.use()vue.use(plugin, arguments) 语法参数:plugin(Function | Object)用法:如果vue安装的组件类型必须为Function或者是Object如果是个对象,必须提供install方法如果是一个函数,会被直接当作install函数执行install函数接受参数,默认第一个参数为Vue,其后参数为注册组件时传入的arguments先举个?我们先来看一个简单的事例首先我使用官方脚手架新建一个项目vue init webpac

2020-10-17 19:59:25 45

原创 Vue.filter()

官方实例:Vue.filter()文档介绍的过于简单,下面稍微总结一下吧~vue中的过滤器分为两种:局部过滤器和全局过滤器1、定义无参全局过滤器 Vue.filter('msgFormat', function(msg) { // msg 为固定的参数 即是你需要过滤的数据 return msg.replace(/单纯/g, 'xxx') })完整示例 <div id="app"> <p&g

2020-10-17 16:04:32 25

原创 Vue.delete()

官方文档 Vue.delete和Vue.set()一起总结一下吧我们平常使用vue进行开发时,会遇到vue生成实例之后,再次给数据赋值的时候,数据不会更新到视图上的情况,vue文档上说明实例创建之后添加新的属性到实例上,它不会触发视图更新。例如:<template> <div> <ul> <li v-for="item in array">{{item.name}}:{{item.age}}{{item.hobby}}<

2020-10-14 21:10:19 99

原创 Vue.set()

当我们使用vue开发时经常会遇到当vue实例已经创建好了,有时候需要再次给数据赋值时,并不能在视图中改变在vue文档中注意事项写着如果在实例创建之后添加新的属性到实例上,它不会触发视图更新因此比如我们修改一个数组其中的一个值,或者添加一条数据时,不管用。<div id="app"> <p v-for="item in items" v-once>{{item}}</p> <button @click="btn()">添加</button>

2020-10-14 20:44:31 36

原创 Vue里ref($refs)的用法

在Vue中一般很少会用到直接操作DOM,但不可避免有时候需要用到,这时我们可以通过ref和$refs这两个来实现,本文我们就来详细的介绍下这个内容ref   ref 被用来给元素或子组件注册引用信息, 引用信息将会注册在父组件的 $refs 对象上,如果是在普通的DOM元素上使用,引用指向的就是 DOM 元素,如果是在子组件上,引用就指向组件的实例。$refs     $refs是一个对象,持有已注册过 ref的所有的子组件。详细可看此篇文章比较通俗易懂 Vue教程(ref和$refs的使用)

2020-10-14 18:59:28 107

原创 Vue.extend()

Vue.extend属于Vue的全局API,在实际业务开发中我们很少使用,因为相比常用的 Vue.component写法使用 extend步骤要更加繁琐一些。但是在一些独立组件开发场景中,Vue.extend + $mount这对组合是我们需要去关注的。官方文档学习开始之前我们先来看一下官方文档是怎么描述的。Vue.extend( options )参数:{Object} options用法:使用基础 Vue 构造器,创建一个“子类”。参数是一个包含组件选项的对象。data选项是特

2020-10-14 15:49:21 84 1

原创 js如何实现多线程和异步编程?

今天看到一道面试题,问js如何实现多线程?下面来总结一下:因为 JS是一种单线程语言,即使是一些异步的事件也是在JS的主线程上运行的。像setTimeout、ajax的异步请求,或者是dom元素的一些事件,都是在JS主线程执行的,这些操作并没有在浏览器中开辟新的线程去执行,而是当这些异步操作被操作时或者是被触发时才进入事件队列,然后在JS主线程中开始运行。首先说一下浏览器的线程,浏览器中主要的线程包括,UI渲染线程,JS主线程,GUI事件触发线程,http请求线程。JS作为脚本语言,它的主要用途是与

2020-09-28 11:45:43 78

原创 vue路由案例详解

1.能够说出什么是路由2.能够说出前端路由的实现原理3.能够使用Vue-Router实现前端路由4.能够实现嵌套路由,动态路由5.能够实现命名路由以及编程式导航6.理解并实现后台管理案例1.路由的概念路由的本质就是一种对应关系,比如说我们在url地址中输入我们要访问的url地址之后,浏览器要去请求这个url地址对应的资源。那么url地址和真实的资源之间就有一种对应的关系,就是路由。路由分为前端路由和后端路由1).后端路由是由服务器端进行实现,并完成资源的分发2).前端路由是依靠hash

2020-09-27 17:44:25 51

原创 Array.from ()方法详解

Array.from()方法就是将一个类数组对象或者可遍历对象转换成一个真正的数组,也是ES6的新增方法。那么什么是类数组对象呢?所谓类数组对象,最基本的要求就是具有length属性的对象。1、将类数组对象转换为真正数组: let arrayLike = { 0: 'tom', 1: '65', 2: '男', 3: ['jane','john','Mary'], 'length': 4 } let arr = Array.from(arrayL

2020-09-25 11:44:15 79

原创 es6展开运算符详解

在项目中,你肯定遇到过将多个数组进行结合的情况,一般的用法可以使用 Array 的concat()方法:const links = ['link-1','link-2','link3'];const submits = ['submit-1'];const elements = links.concat(submits);你可能想过这样的做法:const elements = [links, submits];// [Array[3], Array[1]]它实际上会把links数组放入到e

2020-09-25 11:09:40 60

原创 .prettierrc文件的作用

当我们使用右键格式化的时候,就会自动帮我们补全符号,但是,有些符号在eslint中就会报语法错误,那我们需要怎么办呢?可以通过.prettierrc来进行文件配置我们常见的几行代码如下{ "semi": false, // 使用分号, 默认true "singleQuote": true, // 使用单引号, 默认false(在jsx中配置无效, 默认都是双引号) "bracketSpacing": true // 对象中的空格 默认true}下面看一下详细

2020-09-24 20:17:10 34

原创 Vuex全网最简单教程

本文内容1.Vuex概述2.Vuex基本使用3.使用Vuex完成todo案例1.Vuex概述Vuex是实现组件全局状态(数据)管理的一种机制,可以方便的实现组件之间的数据共享使用Vuex管理数据的好处:A.能够在vuex中集中管理共享的数据,便于开发和后期进行维护B.能够高效的实现组件之间的数据共享,提高开发效率C.存储在vuex中的数据是响应式的,当数据发生改变时,页面中的数据也会同步更新2.Vuex的基本使用创建带有vuex的vue项目,打开终端,输入命令:vue ui当项目仪表

2020-09-24 16:59:18 36

原创 npm ERR! code EPERM npm ERR! syscall unlink npm ERR! ERRNO -4048

今天在git上clone了一个新项目,然后运行npm i 安装node_modules报了如下错误然后网上找解决方法这是由于npm 版本不对造成的,只需更新 npmnpm -v 查看当前版本为6.13.4npm view npm version 查看npm最新版本为6.14.8npm install -g npm@6.14.8 更新最新版本npm i 最后再重新安装vue项目就成功了...

2020-09-21 10:10:35 292

原创 Vue组件详解

Vue组件详解组件组件 (Component) 是 Vue.js 最强大的功能之一组件可以扩展 HTML 元素,封装可重用的代组件注册全局注册Vue.component(‘组件名称’, { }) 第1个参数是标签名称,第2个参数是一个选项对象全局组件注册后,任何vue实例都可以用组件基础用<div id="example"> <!-- 2、 组件使用 组件名称 是以HTML标签的形式使用 --> <my-component>

2020-09-18 17:01:24 55

原创 Vue中computed和watch的用法和区别

computed用来监控自己定义的变量,该变量不在data里面声明,直接在computed里面定义,然后就可以在页面上进行双向数据绑定展示出结果或者用作其他处理;computed比较适合对多个变量或者对象进行处理后返回一个结果值,也就是数多个变量中的某一个值发生了变化则我们监控的这个值也就会发生变化,举例:购物车里面的商品列表和总金额之间的关系,只要商品列表里面的商品数量发生变化,或减少或增多或删除商品,总金额都应该发生变化。这里的这个总金额使用computed属性来进行计算是最好的选择comp..

2020-09-18 15:36:36 90

原创 js保留固定位数小数

js保留两位小数,直接想到的就是toFixed(2),如果直接使用该方法,不够两位数的会在数字后面补0;如果不想补0 的话,需要先取两位数,然后再取浮点数,这样就能实现了,例如:// num1的位数>=两位数时var num1= 11.111;parseFloat(num1.toFixed(2)) //11.11// num2的位数<两位数时var num2= 11.1;parseFloat(num2.toFixed(2)) //11.1...

2020-09-17 20:55:18 29

原创 keyCode键盘码

下次记不住了来查查吧keyCode 8 = BackSpace BackSpacekeyCode 9 = Tab TabkeyCode 12 = ClearkeyCode 13 = EnterkeyCode 16 = Shift_LkeyCode 17 = Control_LkeyCode 18 = Alt_LkeyCode 19 = PausekeyCode 20 = Caps_LockkeyCode 27 = Escape EscapekeyCode 32 = spacekeyC

2020-09-16 19:31:46 46

原创 你要查的js数组操作都在这里了

1)concat方法:不会改变原数组,会返回一个拼接后的新数组 var arr1 = [1,2,3]; var arr2 = [3,4]; arr1.concat(arr2); console.log(arr1.length); // 3 console.log(arr1); // [1, 2, 3] console.log(arr2); // [3, 4] console.log(arr1.concat(arr2)) // [1, 2, 3, 3, 4]2)slice方法:

2020-09-12 17:27:06 59

原创 js调用函数加不加括号的区别

发现自己的基础有点薄弱了啊,今天写代码居然会因为函数后面加了括号而搞错,居然找了半天的bug.a.onmouseover = fn1; a.onmouseout = fn2; function fn1(){ div.className = "erweima show"; } function fn2(){ div.className = "erweima hide"; }

2020-09-04 17:32:52 39

原创 ERROR Invalid options in vue.config.js: “baseUrl“ is not allowed

今天复制了别人的vue.config.js文件,修改了baseURL老是报错,找了半天,无果,同事看了错误说,肯定是这个baseURL被废除了,你搜一下就知道了,果然,唉,前端真的要看经验啊.下面把睬的坑记录下来vue项目我的这个版本是 3.10.0module.exports = { baseUrl: process.env.NODE_ENV === 'production' ? './' : '/'}这里面是一个坑在vue-cli.3.3版本后 baseUrl被废除了,

2020-09-03 16:27:42 29

原创 echarts看完这篇就会了

echarts属性大全// 全图默认背景 // backgroundColor: ‘rgba(0,0,0,0)’,// 默认色板color: ['#ff7f50','#87cefa','#da70d6','#32cd32','#6495ed', '#ff69b4','#ba55d3','#cd5c5c','#ffa500','#40e0d0', '#1e90ff','#ff6347','#7b68ee','#00fa9a','#ffd700', '#6699FF','#ff6

2020-09-01 17:18:23 50

原创 scoped 和/deep/的作用

今天在写代码时,要更改element ui 的组件样式,调试了半天发现更改都没作用,后来请教了同事,他说你需要用到深度选择器 ,我用了一下,瞬间生效.下面总结一下何为深度选择器吧./deep/ 深度选择器/deep/的意思大概为深入的,深远的。在vue中,我们为了避免父组件的样式影响到子组件的样式,会在style中加<style scoped>,这样父组件中如果有跟子组件相同的class名称或者使用选择器的时候,就不会影响到子组件的样式。父组件:<template>

2020-08-31 11:21:56 60

原创 vue里的export default

相信大家看Vue项目肯定会看到各种导入导出,下面来介绍一下.Vue 的模块机制Vue 是通过 webpack 实现的模块化,因此可以使用 import 来引入模块,例如:  此外,你还可以在 bulid/webpack.base.conf.js 文件中修改相关配置:  意思是,你的模块可以省略 “.js”,".vue",“.json” 后缀,weebpack 会在之后自动添加上;可以用 “@” 符号代替 “src” 字符串等。   export 用来导出模块,Vue 的单文件组件通常需要导出

2020-08-19 10:49:30 240

原创 Vue父子组件的传值和传方法实例

自定义的私有组件,不能访问vm实例中的数据1、父组件向子组件传值在使用私有组件的时候,通过属性绑定的形式,把需要传递给子组件的数据,以属性绑定的形式传递到私有组件中<div id="app"> <!-- 1、在使用组件的时候,使用绑定命令,将所需要的VM实例数据绑定到私有组件中 --> <com1 v-bind:parentmsg="msg"></com1> </div> <script&

2020-08-07 17:43:48 108

原创 find()和findIndex()函数详解

今天我在拿数组中的存在的某一项索引时,我用了filter(),结果折腾了半天还是没求出索引,结果询问同事,他说你直接用findIndex()就可以了,一语点醒梦中人,可能平时ES6的这些函数用的少,根本就想不起来用这个。find直接就找出这项了,何必用filter过滤拿呢?话不多说,下面总结一下这2个方法~ES6为Array增加了find(),findIndex函数。find()函数用来查找目标元素,找到就返回该元素,找不到返回undefined,而findIndex()函数也是查找目标元素,找到就返回

2020-07-30 16:48:12 553

原创 vue-cli工程中各个文件和文件夹的作用

build文件夹:存放webpack的相关配置以及脚本文件,在实际开发过程中只会偶尔用到webpack.base.conf.js,配置less、babel等编译器2.config文件夹:常用到此文件夹下 config.js(index.js) 配置开发环境的 端口号、是否开启热加载 或者 设置生产环境的静态资源相对路径、是否开启gzip压缩、npm run build 命令打包生成静态资源的名称和路径等。3. node_modules:存放npm install命令下载的开发环境和生产环境的各种..

2020-07-23 17:36:23 147

原创 v-bind详解

v-bind就是用于绑定数据和元素属性的var app = new Vue({ el:'.app', data:{ url:"https://www.baidu.com", }});<div class="app"> <a v-bind:href="url">click me</a></div> 注意:v-bind后面是:属性名=,我的理解是表示绑定这个属性,绑定之后,对应的值要去vue的数据里面

2020-07-23 16:01:06 115

原创 数组对象的常用处理方法

何为数组对象?即数组里面包含的对象。比如: let someArr4 = [{ id:1, name:'bb' },{ id:4, name:'cc' },{ id:1, name:'dd' }] 1、filter() 方法创建一个新的数组,新数组中的元素是通过检查指定数组中符合条件的所有元素。原数组不变不会对空数组进行检

2020-07-23 12:01:40 69

原创 CSS超链接里的“love hate“

css定义超链接是要有先后顺序的。否则,在某些浏览器里面有可能会出现某个样式不起作用的bug。不能正确显示想要的效果。CSS属性的排列顺序: L-V-H-A 。 为了便于记忆我们常用love hate来记忆,但是也要记住原理,别到时候只记住love hate ,却不知道代表着什么,那就适得其反了。L-V-H-A是link、visited、hover、active的简写。它们分别表示A:link 超链接的默认样式A:visited 访问过的(已经看过的)链接样式A:hover 鼠标处于鼠标悬停状态

2020-07-20 09:20:44 84

原创 Git分支的意义和使用方法

今天上手了公司的一个项目由于是多人合作的,前后端数据算法的开发人员全部都在一个项目里,而且项目已经上线,进行功能迭代了,所以用到了git分支功能,下面来总结一下。为什么要创建分支?比如我们开发完了一个app上线了,接下那就是迭代功能开发了,如果上线的app出现了一个严重的bug,要你放下手头新功能的开发去解决这个bug,然后在发布一个新版本,如果你要是就在你要迭代功能的项目上进行修改发布的话,那肯定是不行的,且先不谈有没有新的bug出现,时间是也是不允许的,发布的前提还要把新功能完善好才行,要是删掉新功

2020-07-17 17:15:22 281

原创 npm如何配置淘宝镜像

现在大部分公司都局域网开发,GitHub上不了,npm走不通,所以设置国内镜像,下面是是网上搜来的,亲测可用!镜像使用方法(三种办法任意一种都能解决问题,建议使用第三种,将配置写死,下次用的时候配置还在):1.通过config命令npm config set registry https://registry.npm.taobao.org npm info underscore (如果上面配置正确这个命令会有字符串response)2.命令行指定npm --registry https://r

2020-07-15 16:21:26 581

原创 TypeScript中的泛型简单介绍

typeScript中的泛型泛型的定义泛型函数泛型类泛型接口泛型:软件工程中,我们不仅要创建一致的定义良好的API,同时也要考虑可重用性。 组件不仅能够支持当前的数据类型,同时也能支持未来的数据类型,这在创建大型系统时为你提供了十分灵活的功能。在像C#和Java这样的语言中,可以使用泛型来创建可重用的组件,一个组件可以支持多种类型的数据。 这样用户就可以以自己的数据类型来使用组件。通俗理解:泛型就是解决 类 接口 方法的复用性、以及对不特定数据类型的支持(类型校验)//只能返回strin

2020-05-29 10:47:01 83

原创 TypeScript中的接口用途

typeScript中的接口属性类接口函数类型接口可索引接口类类型接口接口扩展接口的作用:在面向对象的编程中,接口是一种规范的定义,它定义了行为和动作的规范,在程序设计里面,接口起到一种限制和规范的作用。接口定义了某一批类所需要遵守的规范,接口不关心这些类的内部状态数据,也不关心这些类里方法的实现细节,它只规定这批类里必须提供某些方法,提供这些方法的类就可以满足实际需要。 typescrip中的接口类似于java,同时还增加了更灵活的接口类型,包括属性、函数、可索引和类等

2020-05-28 10:19:13 749

空空如也

空空如也

空空如也

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

TA关注的人 TA的粉丝

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