D321xiaoding的博客

vue基础知识总结、测试遇到的前端bug分析原因

限制数字前面不能输入多余的0，例如00123 00.12import Vue from 'vue'Vue.directive('number', { bind(el) { el.onkeyup = () => { if (el.value) { if (parseInt(el.value) == parseFloat(el.value) && !el.value.includes('.')) { if (paeseI

Vue开发规范细节一、必要的1、组件名为多个单词组件名应该始终是多个单词的，根组件 App 以及 、 之类的 Vue 内置组件除外。这样做可以避免跟现有的以及未来的 HTML 元素相冲突，因为所有的 HTML 元素名称都是单个单词的。例如：Vue.component(‘todo-item’, {// …})export default { name: ‘TodoItem’, // … }2、组件数据组件的 data 必须是一个函数。当在组件中使用 data property 的时候

应用场景当系统打开多个页签时，多个页签之间切换去做缓存，关闭页签重新打开该页签不缓存。解决方案更改 vue keep-alive源码1、制造一个唯一的key值，在路由参数里面加一个时间戳1.1 因keep-alive 使用组件名称name值作为唯一的key值去做条件缓存，但是该项目因书写不规范导致组件的name值不是唯一的。在路由的参数 里面增加一个时间戳 // 当点击系统左侧菜单的时候加时间戳 select(url) {

什么时候用到keep-alive如果没有缓存，每点击一次导航，内容区就会创建一个组件，该组件会经历整个生命周期，每点击一次，就会创建一个组件，比较浪费性能，这时，我们就要考虑到是否能将点击过的已创建的组件进行缓存，当再次点击已访问过的组件时，这时，就会从缓存中获取该组件，而不会重新创建，这就用到keep-aliveProps：include - 字符串或正则表达式。只有名称匹配的组件会被缓存。exclude - 字符串或正则表达式。任何名称匹配的组件都不会被缓存。max - 数字。最多可以缓存多

比如说，你有一个方法好多文件都会用到，但你不想在各个文件中都写这个方法，这个时候你就可以用混入建一个独立的专门写混入的文件夹mixins在mixins文件及里面写一个index.js文件index.js文件中写入你的混入。一个index.js中可以写多个混入，const formatterNum = { methods:{ formatterNum(num) { //正常写你的方法 } }}//如果你想在这个文件中再写另一个混入，那就再定义一个const formatte

vue自定义指令：金额保留两位小数并且每三位逗号分割可以专门建一个filter.js文件，统一做vue的一些自定义指令，方便以后维护。建的filter.js在main.js中引用。当然你直接在main.js里写也没有问题，只是后期不好维护。这里使用filter.js文件首先在filter.js中引入Vueimport Vue from 'vue'//保留两位小数并用逗号分隔Vue.filter('sumFilter', function(num) { if(num) { if(!isNaN

vue prop 会接收不同的数据类型，这里列出了 常用的数据类型的设置默认值的写法。其中包含： Number, String, Boolean, Array, Function, ObjectrefAge: { type: Number, default: 0},refName: { type: String, default: ''},hotDataLoadi...

首先使用 router.beforeEach 注册一个全局前置守卫：const router = new VueRouter({ ... }) router.beforeEach((to, from, next) => { // ...})当一个导航触发时，全局前置守卫按照创建顺序调用。守卫是异步解析执行，此时导航在所有守卫 resolve 完之前一直处于 等待中。每个守卫...