随笔分类 - vue随笔
摘要：相比较于函数的封装，规模更大一点的便是组件的封装，组件包含了模版、脚本以及样式的代码，在实际开发中组件的使用频率也是非常大的，我们项目中的每一个页面其实都可以看作是一个父组件，其可以包含很多子组件，子组件通过接收父组件的值来渲染页面，父组件通过响应子组件的回调来触发事件。 封装一个组件主要包含两种方
阅读全文
摘要：在生活中，重复的机械劳动会消耗我们的时间和精力，提高生产成本，降低工作效率。同样，在代码世界中，编写重复的代码会导致代码的冗余，页面性能的下降以及后期维护成本的增加。由此可见将重复的事情复用起来是提高生产效率、降低维护成本的不二之选。 在 Vue 项目中，每一个页面都可以看作是由大大小小的模块构成的
阅读全文
摘要：该配置文件便是 Vuex 的配置文件，主要有 4 个核心点：state、mutations、actions 及 getter，详细的介绍大家可以参考官方文档：[核心概念](https://vuex.vuejs.org/zh/guide/state.html)，这里我用一句话介绍就是：**我们通过 a
阅读全文
摘要：关于文件名：必须以如下方式命名，不要乱起名，也无需专门手动控制加载哪个文件 .env 全局默认配置文件，不论什么环境都会加载合并 .env.development 开发环境下的配置文件 .env.production 生产环境下的配置文件 关于文件内容： 注意：属性名必须以VUE_APP_开头，比如
阅读全文
摘要：<keep-alive>是Vue的内置组件，能在组件切换过程中将状态保留在内存中，防止重复渲染DOM。 <keep-alive> 包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。 <keep-alive> 与 <transition>相似，只是一个抽象组件，它不会在DOM树中渲染(真实或者虚
阅读全文
摘要：vue封装子组件，直接在父组件中写@click=function点击没反应，写 @click.native=function就可以了。@click.native是给组件绑定原生事件
阅读全文
摘要：<一> keepAlive的基础知识点 <1>在动态组件上使用 keep-alive 如果希望那些标签的组件实例能够被在它们第一次被创建的时候缓存下来。为了解决这个问题，我们可以用一个 <keep-alive> 元素将其动态组件包裹起来。 <!-- 失活的组件将会被缓存！--> <keep-aliv
阅读全文
摘要：1、准备两个页面 为兄弟关系 <User> <UserInsert/> </UserTable/> </User> 2、table页面写上ref 3、insert页面添加完数据调用table页面的刷新方法insert页面内 user页面内
阅读全文
摘要：$attrs的使用 vue $attrs是在vue的2.40版本以上添加的。 项目中有多层组件传参可以使用$attrs，可以使代码更加美观，更加简洁，维护代码的时候更方便。如果使用普通的父子组件传参prop和$emit，$on会很繁琐；如果使用vuex会大材小用，只是在这几个组件中使用，没必要使用v
阅读全文
摘要：一、概念解析 成对出现：provide和inject是成对出现的 作用：用于父组件向子孙组件传递数据 使用方法：provide在父组件中返回要传给下级的数据，inject在需要使用这个数据的子辈组件或者孙辈等下级组件中注入数据。 使用场景：由于vue有$parent属性可以让子组件访问父组件。但孙组
阅读全文
摘要：在VUE中路由遇到Error: Avoided redundant navigation to current location:报错显示是路由重复 在router文件夹下的index.js中加入如下代码，错误消失 const originalPush = VueRouter.prototype.p
阅读全文
摘要：基本类型 typescript可以理解为就是加了类型标注的javascript。 这样就可以在写代码的时候帮助们进行代码的校验，主要是数据格式的校验，不过最终typescript的代码还是需要转成javascript，这样才能在浏览器中运行，转换暂时不用考虑，vue开发环境支持编译typescrip
阅读全文
摘要：vue要实现动画很简单，同时他提供了很多种实现方式，为了快速入门，这里只讲一种最简单实用的方法，就是结合 animate.css 这个css动画库。 https://animate.style 准备工作 安装animate.css npm install animate.css --save 在ma
阅读全文
摘要：之前项目遇到个情况，npm run build打包之后上传到服务器后，index.html打开一片空白，资源都加载了，但是就是不显示。 然后百度找了原因，修改了两处地方 一、修改 assetsPublicPath 在config/index.js里面，有个 assetsPublicPath 属性，源
阅读全文
摘要：keep-alive 有时候我们不希望组件被重新渲染影响使用体验；或者处于性能考虑，避免多次重复渲染降低性能。而是希望组件可以缓存下来,维持当前的状态。这时候就可以用到keep-alive组件。 官网解释：<keep-alive> 包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。和 <tra
阅读全文
摘要：<a-select @change="value => handleChange(value, param)"> </a-select> handleChange的value参数即为默认参数，param为自定义参数，handleChange为方法
阅读全文
摘要：1、父组件可以使用 props 把数据传给子组件。2、子组件可以使用 $emit,让父组件监听到自定义事件 。 vm.$emit( event, arg ) //触发当前实例上的事件 vm.$on( event, fn );//监听event事件后运行 fn； 例如：子组件： <template>
阅读全文
摘要：setCursor 方法的使用 codeMirror.focus() setTimeout(()=>{ codeMirror.setCursor({line:1,ch:5}) },0)
阅读全文
摘要：var data=[ {id:1001,icon:"img/1.png",name:"餐饮0",num:1,price:10,a:1}, {id:1002,icon:"img/2.png",name:"餐饮1",num:1,price:20,a:2}, {id:1002,icon:"img/2.pn
阅读全文
摘要：let idarry=[]; let newarry=[]; for (var i=0;i<js.length;i++){ let idx=idarry.indexOf(js[i].applicationId); if(idx 1) { idarry.push(js[i].applicationId
阅读全文
浙公网安备 33010602011771号