随笔分类 - vue
摘要：在vue项目调试的时候，代码里面标注debugger。 注：有文档说需要在config/index.js中设置devtool: '#source-map'才有效，经测试不设置也是可以调试成功的。 会自动跳到具体页面 方法二： 直接找到对应的文件。在chrome用 ’ctrl(command) + p
阅读全文
摘要：build命令后占体积最大的是.map文件，webpack如何设置不让编译出.map文件呢？ map文件的作用：项目打包后，代码都是经过压缩加密的，如果运行时报错，输出的错误信息无法准确得知是哪里的代码报错。 有了map就可以像未加密的代码一样，准确的输出是哪一行哪一列有错。 解决办法：去confi
阅读全文
摘要：Vue数据相关实例方法 vm.$watch 观察vue实例变化的一个表达式或计算属性函数。回调函数得到的参数为新值和旧值。表达式只接受监督的键路径。对于更复杂的表达式，用一个函数取代。 //写法一： this.$watch('a.b.c', function (newVal, oldVal) {})
阅读全文
摘要：VUE相关 1、 export和export default的区别 export default xxx import xxx from './' export xxx import {xxx} from './' 在一个文件或模块中，export、import可以有多个，export defaul
阅读全文
摘要：1、路由如何设置404页面 注：配置404页面一定要在路由表的最后一个，放在*的下面路由是不起作用的 2、给路由增加公共前缀 (1)给静态资源加前缀有两种方法： 在config / index 文件里修改dev(npm run dev本地启动项目时)和build(npm run build 打包时)
阅读全文
摘要：问题描述： Vue项目在chrome内核浏览中显示正常，但在360兼容性模式下（ie内核）无法显示，直接白屏，查看控制台发现如下错误。 原因及处理过程： 原因基本锁定ie浏览器无法解析es6。网上查了很多解决方案，比如：（下图方法一般兼容性问题确实可以解决） 比如： 但很遗憾，都没有能解决问题。跟我
阅读全文
摘要：问题描述： 数据使用el-table加载，大概有1万多条。页面非常卡，查看内存占用到1.1个G，存在严重的性能问题。 考虑思路： 1、用table或者pl-table替换el-table。尝试后发现性能提升不大，仍然占用大量内存。 2、网上很多解决方案是说通过分页来加载，但我们的列表数据有关联，不能
阅读全文
摘要：Vue项目中图片存放位置 vue项目中可以有static和src/assets两个文件夹存放图片。 static中的图片不会被打包，也不会被压缩，一般来说存放的是第三方资源。而且vue-cli3中已经不存在static目录。 虽然都可以放图片，但建议项目资源文件统一存放在assets文件夹中。 部署
阅读全文
摘要：一、为什么使用mockjs 使用mockjs模拟后端接口，拦截 Ajax 请求，随机生成所需数据。官网地址 在已有接口文档的情况下，我们可以直接按照接口文档来开发，将相应的字段写好，在接口完成之后，只需要改变url地址即可 二、mock优点 1.前后端分离 2.可随机生成大量的数据 3.用法简单 4
阅读全文
摘要：什么是插槽？ 插槽就是子组件中的提供给父组件使用的一个占位符，用<slot></slot> 表示，父组件可以在这个占位符中填充任何模板代码，如 HTML、组件等，填充的内容会替换子组件的<slot></slot>标签。 如下代码： 1. 在子组件中放一个占位符 2. 在父组件中给这个占位符填充内容：
阅读全文
摘要：需求：下图div用v-for做了列表循环，现在想要span也一起循环，应该怎么做？ 有3种方法可以实现 ①：直接用v-for对span也循环一次（该方法虽然可以使用，但不要用这种方式，因为以后你会哭） ②：在div和span外面包裹一个div，给这个div加循环（该方法会额外增加一个多余的div标签
阅读全文
摘要：<ul @click ="clickfun($event)"> <li></li></ul> methods: { clickfun(e) { e.target //是你当前点击的元素 e.currentTarget //是你绑定事件的元素 //获得点击元素的前一个元素 e.currentTarge
阅读全文
摘要：页面中多次弹出message框，客户体验度非常不好。 main.js中 重写$message方法 import ElementUI, { Message } from 'element-ui' // 为了实现Class的私有属性 const showMessage = Symbol('showMes
阅读全文
摘要：左侧菜单栏时，发现点击路由跳转相同地址会有这个报错 Uncaught (in promise) NavigationDuplicated {_name: "NavigationDuplicated", name: "NavigationDuplicated"} router.js(或者router文
阅读全文
摘要：在Vue中要给input设置焦点，需要注册自定义指令。 main.js中 Vue.directive('focus', function (el, option) { var defClass = 'el-input', defTag = 'input'; var value = option.va
阅读全文
摘要：页面第一行就报错。 打开文件--首选项--设置中搜索Vetur，拉到最底部，把这三块的勾去掉。（如果只去除最后一个，或者只在setting.json中增加"vetur.validation.template": false，则问题还是存在） 重新打开页面，显示正常。
阅读全文
摘要：Vue.prototype 官网地址 如果需要设置全局变量，在main.js中，Vue实例化的代码里添加。 不想污染全局作用域。这种情况下，你可以通过在原型上定义它们使其在每个 Vue 的实例中可用。 Vue.prototype.$appName = ‘My App’ 这样 $appName 就在所
阅读全文
摘要：实现场景：点击输入框，弹出自定义数字键盘，输入数字后点击确定，输入框中显示对应数字。如果输入框中有值，则默认带到小键盘中。 其中：数字键盘为子组件。输入框公用该子组件。 效果图如下： 难点： 1、props传入数字键盘组件中的值，无法直接修改。需要通过计算属性进行修改。 2、公用键盘时，保证符合预期
阅读全文
摘要：计算属性 vs 方法 <p>Computed reversed message: "{{ reversedMessage }}"</p> //计算属性 <p>Reversed message: "{{ reversedMessage() }}"</p> //方法 computed: { // 计算属
阅读全文
摘要：第一：props参数是实时更新的，而created和data仅会执行一次【当每次重新跳转到当前页面的时候，这也是为什么叫做当前页面或当前组件声明周期】！ 第二：props参数无法修改【要修改只能赋值给在data中增加一个中间变量，修改data中的这个属性！或直接发射事件给父中间来修改 通常还是以发射
阅读全文
