随笔分类 -  vue

vue3-异步加载/延迟动画
摘要：1.在setup方法前添加async 2.新建延迟函数 3.在数据展示前添加延迟函数 4.在添加组件区域添加Suspense 有点像react中的Suspense 5.Progress.vue 阅读全文

posted @ 2020-09-01 16:03 秃了头也不退休 阅读(1672) 评论(0) 推荐(1)

vue3-setup 的参数
摘要：<template> <div id="app"> <p>姓名：{{name}}</p> <p> <button @click="changeAge(-1)">-</button> 年龄：{{age}} <button @click="changeAge(1)">+</button> </p> <p 阅读全文

posted @ 2020-09-01 11:23 秃了头也不退休 阅读(9179) 评论(0) 推荐(0)

vue3-reactive(响应式对象)和toRefs
摘要：<template> <div id="app"> <p>姓名：{{name}}</p> <p> <button @click="changeAge(-1)">-</button> 年龄：{{age}} <button @click="changeAge(1)">+</button> </p> <p 阅读全文

posted @ 2020-09-01 11:17 秃了头也不退休 阅读(11046) 评论(1) 推荐(2)

vue3-setter/getter和计算属性
摘要：<template> <div id="app"> <p>姓名：{{name}}</p> <p> <button @click="changeAge(-1)">-</button> 年龄：{{age}} <button @click="changeAge(1)">+</button> </p> <p 阅读全文

posted @ 2020-09-01 11:06 秃了头也不退休 阅读(1450) 评论(0) 推荐(0)

vue3-setup（引用和方法）
摘要：setUp函数 使用Composition API 的入口 在beforeCreate之前调用 在setup中没有this 返回对象中的属性刻在模板中使用 <template> <div id="app"> {{name}} <p>{{age}}</p> <button @click="plusOn 阅读全文

posted @ 2020-09-01 10:39 秃了头也不退休 阅读(41247) 评论(0) 推荐(0)

vue-复制
摘要：1.安装vue-clipboard2 npm install --save-dev vue-clipboard2 2.main.js中添加 import VueClipboard from 'vue-clipboard2' VueClipboard.config.autoSetContainer = 阅读全文

posted @ 2020-08-27 16:46 秃了头也不退休 阅读(243) 评论(0) 推荐(0)

Nprogress-进度条
摘要：引入 nprogress yarn add nprogress import NProgress from 'nprogress' import 'nprogress/nprogress.css' //这个样式必须引入 router.beforeEach((to,from,next) => { NP 阅读全文

posted @ 2020-08-27 14:43 秃了头也不退休 阅读(512) 评论(0) 推荐(0)

vue-directive(自定义指令)
摘要：<button @click="$router.push('/login')" v-botton>directive</button> export default { name: "directive", directives: { botton: { bind: function (el,bin 阅读全文

posted @ 2020-08-27 14:30 秃了头也不退休 阅读(811) 评论(0) 推荐(0)

vue与react当路由页面跳转时滚动位置不对的处理
摘要：在我们开发react或者vue项目的时候会发现当切换路由进行页面跳转的时候如果在前一个页面将滚动条滚到了最下面然后进行跳转那么接下来的那个页面也会默认滚动在最下面。这个时候我们就需要处理一下。 在处理之前我们首先需要知道原因在哪里： 原因是因为虚拟dom的算法问题，导致不会更新scroll 解决方法 阅读全文

posted @ 2020-08-14 17:26 秃了头也不退休 阅读(765) 评论(0) 推荐(0)

vue-vuex整理
摘要：1.结构不复杂时的结构和用法 import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) export default new Vuex.Store({ state: { userCode:'admin', }, mutations: { 阅读全文

posted @ 2020-08-14 10:53 秃了头也不退休 阅读(190) 评论(0) 推荐(0)

vue-fastclick
摘要：移动端点击延迟事件 1. 移动端浏览器在派发点击事件的时候，通常会出现300ms左右的延迟 2. 原因: 移动端的双击会缩放导致click判断延迟 解决方式 1. 禁用缩放 `<meta name = "viewport" content="user-scalable=no" > ` 缺点: 网页无 阅读全文

posted @ 2020-05-06 09:42 秃了头也不退休 阅读(1612) 评论(0) 推荐(0)

vue-网页支付 --支付宝和微信支付
摘要：1.微信支付 网页的微信支付返回的是一串链接，使用qrcode把链接生成二维码 让客户扫描 import QRCode from 'qrcode'QRCode.toDataURL(res.content) .then(url=>{ console.log(url,'生成的为base64的二维码图片' 阅读全文

posted @ 2020-04-24 17:40 秃了头也不退休 阅读(2572) 评论(0) 推荐(0)

vue-触底加载更多
摘要：方法一：插件 vue-infinite-scroll <template> <div> <div class="demo1" v-for="index of count" :key="index"> demo </div> <div v-infinite-scroll="loadMore" infi 阅读全文

posted @ 2020-04-24 17:10 秃了头也不退休 阅读(2950) 评论(1) 推荐(0)

vue-组件之间互相出发事件
摘要：1.子组件出发父组件事件 子组件触发：@click="$emit('cancel')" 父组件传入：@cancel="showModal=false" 2.父组件触发子组件事件 父组件：<child ref="mychild"></child> this.$refs.mychild.parentHa 阅读全文

posted @ 2020-04-23 10:04 秃了头也不退休 阅读(1551) 评论(0) 推荐(0)

vue-插槽 slot
摘要：子组件放置 <slot name="body"></slot> 父组件 <template v-slot:body> <p>商品添加成功！</p> </template> 阅读全文

posted @ 2020-04-22 17:16 秃了头也不退休 阅读(199) 评论(0) 推荐(0)

vue-知识点
摘要：1.设置代理 vue.config.vue module.exports={ devServer:{ host:'localhost', proxy:{ '/api':{ target:'http://mall-pre.springboot.cn', changeOrigin:true, pathR 阅读全文

posted @ 2020-04-17 11:01 秃了头也不退休 阅读(162) 评论(0) 推荐(0)

导航