![](https://img-blog.csdnimg.cn/20201014180756922.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
Vue
战南城
学习笔记,不喜勿喷!
展开
-
真机调试时发现v-if没有重新渲染
解决方法:使用key标识不同的div(或组件),同时使用v-if, v-else-if,v-else指令如果只使用key标识,不使用v-if,v-else等指令组合而是单单使用 v-if会失败,即不重新渲染。正确的示例如下:<div class="content" :key="111" v-if="page == 1"></div><div class="content" :key="222" v-else-if="page==2"></div&g原创 2021-05-24 17:54:30 · 693 阅读 · 0 评论 -
better-scroll的使用
我把better-scroll写成了一个组件,需要使用的时候直接import使用即可<template> <div class="wrapper" ref="wrapper"> <div class="content"> <ul> <slot></slot> <li class="content-more">没有更多数据啦~</li> // .原创 2021-03-18 18:10:30 · 92 阅读 · 0 评论 -
vue项目真机调试时,利用scrollTop获取高度渐渐显示的header消失不见
原因请见注释:<template> <div> <router-link tag="div" to="/" class="header-abs" v-show="showAbs" > <div class="iconfont header-abs-back"></div> </router-link> <div原创 2020-12-28 11:24:02 · 189 阅读 · 0 评论 -
vue-awesome-swiper重新渲染时,图片不能轮播问题
vue-awesome-swiper封装的是swiper插件,swiper插件官网vue-awesome-swiper使用v-show命令导致不能拖拽是因为重新渲染时swiper插件不能正常计算高度所导致的,尝试设置参数observeparent,observer可以解决这个问题...原创 2020-12-27 16:52:08 · 549 阅读 · 0 评论 -
vue中的路由按需加载
import Vue from 'vue'import Router from 'vue-router'import Home from './pages/home'// import Login from './pages/login'import Index from './pages/index'// import Product from './pages/product'// import Detail from './pages/detail'// import Cart from原创 2020-07-12 19:22:30 · 159 阅读 · 0 评论 -
vue项目中常用npm插件
1.qrcode将url地址转换为二维码2.vue-infinite-scroll滚动条滑动到距底部一定距离时加载更多数据 , 用于分页3.vue-lazyload实现图片懒加载(减少带宽,图片使用cdn方式加载 -快)注:各插件使用方法可在 添加链接描述 查询...原创 2020-07-12 16:19:53 · 387 阅读 · 0 评论 -
Vue局部应用ElementUI的Pagination组件
原创 2020-07-12 11:59:34 · 189 阅读 · 0 评论 -
Vue中使用ElementUI中的Message组件(按需引入)时任何页面刷新都跳出弹框
跳出弹框如下:检查发现是info类型的消息弹框,而在项目中并未设置这个类型的弹框解决方法:按需引入要 使用 Vue.component(Message.name, Message)原创 2020-07-10 16:35:08 · 1715 阅读 · 1 评论 -
vue中的非父子组件传值
<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>非父子组件传值(BUS/总线/发布订阅模式/观察者模式)</title> <script src="js/vue.js" type="text/javascript...原创 2020-05-11 18:15:00 · 46 阅读 · 0 评论 -
vue使用better-scroll插件实现原生app的拖拽效果,并解决初始化页面时拖拽失效的问题
…原创 2020-12-26 20:40:52 · 309 阅读 · 1 评论 -
在vue中使用辅助工具-stylus(如果报错,可能是版本问题)
stylus类似于less,sass,帮助我们在css中使用变量,mixin,快速编写代码使用方法:npm install stylus --savenpm install stylus-loader --save原创 2020-05-14 21:30:00 · 139 阅读 · 0 评论 -
Vue中关于vue-awesome-swiper插件使用以及要注意的 “坑”
1,使用方法:设置一个swiperOptions对象,对象的值是一个数组,该数组由Swiper的相关参数组成(Swiper的相关参数,详情请看官网:[https://www.swiper.com.cn/api/index.html])(https://www.swiper.com.cn/api/index.html))如下图2.要注意的坑:([https://www....原创 2020-07-01 18:45:00 · 420 阅读 · 0 评论 -
vue中使用vue-awesome-swiper时,默认为最后一张幻灯片
这个bug是由于初次渲染数据时,list没有数据,待ajax获取数据后,swipe组件重新渲染数据所致。使用if判断可解决这个bug,如上。原创 2020-12-26 16:57:39 · 955 阅读 · 0 评论 -
设置文字溢出显示省略号失效
设置文字超出显示省略号overflow: hiddenwhite-space: nowraptext-overflow: ellipsis尝试设置min-width:0原创 2020-12-26 14:23:08 · 704 阅读 · 0 评论 -
vue-awesome-swiper中修改小圆点的颜色(即在当前组件中修改子组件的样式,使用‘>>>‘ ,表示穿透)
原创 2020-12-26 12:45:12 · 2559 阅读 · 1 评论 -
Vue中目录的别名,如src目录的@别名
如下,给src/assets/styles目录起了一个叫styles的别名在样式中引入其他样式需要使用@import引入,如果想使用src目录的别名@,需要加 ~如: @import ‘~@/assets/styles/varibles.styl’或者使用以上定义的styles别名,如: @import ‘~styles.varibles.styl’...原创 2020-12-26 10:04:02 · 1470 阅读 · 0 评论 -
vue中使用stylus一直报错
报错信息如下:不要尝试安装最新版本的stylus和stylus-loader,使用老版,如:“stylus”: “0.52.4”,“stylus-loader”: “^2.5.0”原创 2020-12-25 18:15:05 · 308 阅读 · 0 评论 -
vue中使用fastClick解决移动端的300毫秒点击延迟bug,报错
直接安装fastclick第三方库pip install fastclick --save原创 2020-12-25 16:21:58 · 172 阅读 · 0 评论 -
非父子组件之间的传值
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>非父子组件间的传值(Bus/总线/发布订阅模式/观察者模式)</title> <script src="./原创 2020-12-24 15:01:51 · 113 阅读 · 0 评论 -
监听子组件的原生事件
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>组件参数校验</title> <script src="./vue.js"></script&g原创 2020-12-24 14:45:57 · 123 阅读 · 0 评论 -
组件参数校验
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>组件参数校验</title> <script src="./vue.js"></script&g原创 2020-12-24 14:37:54 · 92 阅读 · 0 评论 -
vue1.0 mock数据
参考博客:添加链接描述还可以使用mock.js。原创 2020-09-21 15:48:26 · 72 阅读 · 0 评论 -
搭建vue开发环境,解决vue init慢的问题
先安装淘宝镜像,配置cnmpnpm install -g cnpm --registry=https://registry.npm.taobao.orgcnpm -v 检查是否安装成功npm config set registry https://registry.npm.taobao.org 更换nmp镜像为淘宝源(解决vue init慢的问题)安装vuecnpm install vue安装vue的脚手架工具cnpm install -g @vue/cli...原创 2020-12-13 10:59:47 · 1430 阅读 · 0 评论 -
vue中set的使用(改变数据,页面数据也相应改变)
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Vue实例生命周期钩子</title> <script src="./vue.js"></scr原创 2020-12-24 13:09:46 · 698 阅读 · 0 评论