随笔分类 - vue
摘要：匹配某些值中的一个 type: { validator: function(value) { return ["success", "warning", "danger"].includes(value); } } 对象或数组默认值必须从一个工厂函数获取 list: { type: Array, default: () => [] }
阅读全文
摘要：[Vue warn]: Invalid default value for prop "dataParams": Props with type Object/Array must use a factory function to return the default value. 翻译：（props default 数组／对象的默认值应当由一个工厂函数返回） 错误代码： dataPa...
阅读全文
摘要：两个页面参数不同使用同一组件，默认情况下当这两个页面切换时并不会触发created或者mounted钩子。 方法一：通过watch $route的变化来做处理 watch: { $route() { if (this.$route) { ... } } }, 方法二：在 router-view上加上一个唯一的key，来保证路由切换时都会...
阅读全文
摘要：事件修饰符 说明 .stop 阻止单击事件继续传播（阻止冒泡） .prevent 阻止单击事件向上冒泡 preventDefault .capture 添加事件监听器时使用事件捕获模式 .self 在 event.target 是当前元素自身时触发处理函数 .once 事件将只会触发一次 .passive 滚动...
阅读全文
摘要：mixins是一种分发Vue组件中可复用功能的一种灵活方式。 mixins是一个JavaScript对象，可以包含组件中的任意选项，比如Vue实例中生命周期的各个钩子函数，也可以是data、components、methods或directives等。在Vue中，mixins为我们提供了在Vue组件中共用功能的方法。使用方式很简单，将共用的功能以对象的方式传入mixins选项中。当组件使...
阅读全文
摘要：局部过滤器（放在组件里） filters: { //局部过滤器 FormattingMoney:value=>{ return value==null? '0' : value/100 } }, 使用：{{money | FormattingMoney}} 全局过滤器（放main.js） Vue.filter("ellipsis", (str, ma...
阅读全文
摘要：局部过滤器（放在组件里） 使用： 全局过滤器（放main.js） 使用： 注：第一个参数默认为要过滤的值 当项目所用到的过滤器比较多时，把方法定义在一个js文件里面导出 /src/common/custom.js /src/main.js 然后在其他的.vue 文件中就可愉快地使用这些我们定义好的全
阅读全文
摘要：方法一:使用Vue.prototype //在mian.js中写入函数 Vue.prototype.getToken = function (){ ... } //在所有组件里可调用函数 this.getToken(); 方法二:使用exports.install+Vue.prototype // 写好自己需要的fun.js文件 exports.install = functio...
阅读全文
摘要：依赖路由的params参数获取写在created生命周期里面,因为相同路由二次甚至多次加载的关系 没有达到监听，退出页面再进入另一个页面并不会运行created组件生命周期，导致数据还是第一次进入的数据。 解决方法：watch监听路由是否变化 watch: { '$route' (to, from) { //监听路由是否变化 if(this.$route.params.id){//...
阅读全文
摘要：尝试将vue-cli 2.x的项目升级到3.x，记录一下升级过程，和遇到的坑 1. 直接复制替换src文件夹 2. 安装项目需要的依赖 (可以将原来package.json dependencies下需要的直接复制过来，然后运行npm i) 3. 安装完后运行npm run serve （如果启动服务不习惯npm run serve，可以将package.json的serve改成dev） ...
阅读全文
摘要：一直使用vue-cli 2.x来搭项目，最近看文档已经升级到3.0了，先试着安装一下 目前使用的npm v6.4.0,node v10.5.0 安装 npm install -g @vue/cli 检测安装： vue -V 创建项目 vue create hello-world 默认配置，还是自己配置（一般选第二个） 黄色的字提示，npm太慢了，要不要使用淘宝镜像，可...
阅读全文
摘要：vue实现消息向上无缝滚动效果 ... 样式 .new-list{ line-height: 28px; transition: top 0.5s; } .anim{ transition: all 0.5s; margin-top: -28px;//高度等于行高 }
阅读全文
摘要：基于vue-cli 2 首先将favicon.ico图片放在根目录下，通过以下两种方法使其显示正确。 方法一：修改index.html文件 缺点：打包后需要将favicon.ico复制到根目录 方法二：修改webpack配置文件 1、找到build下的webpack.dev.conf.js文件 new HtmlWebpackPlugin({ filename: ...
阅读全文
摘要：1.使用window.location.href window.location.replace() window.location.reload() 会出现空白，体验不是很好 2.先进入一个空路由，然后返回 reflashPage(){ let NewPage = '_empty' + '?time=' + new Date().getTime()/500; this.$r...
阅读全文
摘要：VUE 是单向数据流 当我们需要对一个 prop 进行“双向绑定”时 vue 修饰符.sync 子组件：this.$emit('update:visible', visible)， 使用update:my-prop-name 的模式触发事件 父组件： isVisible=val"> //简写 子组件： this.$emit("update:visible", true); ...
阅读全文
摘要：参数名 类型 说明 visible Boolean 是否显示，默认false title String 标题 update:visible Boolean 更新visible, 使用:visible.sync实现动态绑定 Modal.vue {{title}} ...
阅读全文
摘要：使用Promise模拟浏览器确认框，可自定义标题，内容，按钮文字和类型 参数名 类型 说明 title String 标题 content String 内容 yesBtnText String 确认按钮文字，默认‘确定’ cancelBtnText String 取消按钮文字，默认‘取消’ type ...
阅读全文
摘要：使用Vue.use()写一个自己的全局组件。 目录如下： 然后在Loading.vue里面定义自己的组件模板 Loading... 在loading文件夹下的index.js文件里面添加install方法 import Loading from './Loading.vue' Loading.install=function(Vue){ ...
阅读全文
摘要：消息弹框组件，默认3秒后自动关闭，可设置info/success/warning/error类型 效果图： 文件目录： Message.vue {{content}} index.js 给Vue添加$my_message方法, 判断参数，使用$mount()给组件...
阅读全文
摘要：父组件： 在子组件中加上ref即可通过this.$refs.ref.method(ref为引用组件时定义的值，如)调用
阅读全文
浙公网安备 33010602011771号