2020年10月_一晌贪欢i

原创 Vue里的keep-alive

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

2020-10-26 11:33:59 917

原创调试神器debugger和console总结

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

2020-10-26 10:05:22 3979

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

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

2020-10-21 19:06:52 3014 1

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

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

2020-10-21 17:41:35 13484

原创 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 1791

转载 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 898

原创 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 14527

原创 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 2786

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

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

2020-10-14 18:59:28 17800

原创 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 1106 1

张木期的博客