VUE
关注
分享
扫一扫
Poppy_LYT
这个作者很懒，什么都没留下…
展开
-
VUE—发送请请求参数去空字符串 空对象 空数组
1、utils index.js filterParams(obj) { const keys = Object.keys(obj) keys.forEach(key => { const value = obj[key] if (this.isObject(value)) this.filterParams(value) // 如果是对象再调一遍该方法 if (this.isEmpty(value)) delete obj[key]原创 2021-08-30 14:45:44 · 1048 阅读 · 1 评论 -
VUE—搜索列表 关键字标红高亮
<p class="item-detail__title" v-html="replaceKeywordColor(item.name)" />methods: { replaceKeywordColor(val) { if (val.includes(keyword) && keyword !== '') { return val.replace( keyword, '<font color=原创 2021-08-30 14:16:06 · 1025 阅读 · 0 评论 -
VUE—跨页面锚点（nuxt同样适用）
a页面点击某个位置跳转到b页面的相对应的位置1、a页面<nuxt-link to="/bpage#c"></nuxt-link><router-link to="/bpage#c"></router-link><nuxt-link to="/bpage#d"></nuxt-link><router-link to="/bpage#d"></router-link><nuxt-link to="/bp原创 2021-08-30 14:13:50 · 1195 阅读 · 0 评论 -
VUE—类似选房软件的多选条件组件
1、点击列表选中项目回显样式 已选条件列表更新2、已选条件为单选 超出两个显示清除全部3、点击清除全部按钮列表已选条件清空，选中项全都回归选中全部4、超出一行显示更多按钮 点击更多显示剩余全部1、MultipleSelect文件夹新建MultipleSelect.vue和MultipleSelectItem.vueMultipleSelect.vue<template> <div class="multiple-select-wrap"> // 用来放Multip.原创 2021-08-30 14:02:51 · 543 阅读 · 0 评论 -
VUE—van-tab切换不同样式的组件 使用v-if 解决闪动问题以及分页问题（吐血踩坑）
<template> <div class="content-wrap"> <van-tabs v-model="tabId" @change="changeTab"> <van-tab title="tab1" /> <van-tab title="tab2" /> <van-tab title="tab3" /> </van-tabs> <van-li原创 2021-08-25 13:33:42 · 2864 阅读 · 0 评论 -
VUE—动态循环list，item文字较多四行折行省略号，展示全文/收起按钮
1、<div class="card-item__mid-msg"> <p ref="msg" :class="{'ellipsis-4': !isMsgPack}">{{ item.context }}</p> <p v-if="isOverflow" class="card-item__mid-pack" @click="isMsgPack = !isMsgPack" >原创 2021-03-17 11:04:20 · 660 阅读 · 0 评论 -
VUE—h5移动端使用vconsole（调试工具）
1、npm install vconsole -D2、App.vueimport Vconsole from 'vconsole’mounted() { new Vconsole()}原创 2021-03-17 10:57:39 · 816 阅读 · 0 评论 -
VUE—keep-alive缓存并记录滚动位置（列表页进入详情页时缓存并记录滚动位置，返回列表页面不重新请求数据并滚动到离开时的位置）
1、使用van-list分页加载列表<template> <div> <van-list ref="list" v-model="loading" // 是否处于加载状态，加载过程中不触发load事件 :finished="finished" // 是否已加载完成，加载完成后不再触发load事件 一般axios请求数组为空设置finished为true即可 finished-text="没有更多了" ...原创 2020-12-17 14:44:47 · 2201 阅读 · 0 评论 -
VUE—router动画
App.vue<transition name="transitionRouter" mode="out-in"> <router-view /></transition>// 动画 style样式.transitionRouter-enter, .transitionRouter-leave-to{ opacity: 0;}.transitionRouter-enter-to, .transitionRouter-leave{ op原创 2020-12-14 16:23:07 · 491 阅读 · 0 评论 -
VUE—filters过滤器的使用
1、新建filters文件夹2、写入方法（例如：手机号脱敏）3、main.js引入import * as filters from '@filters'Object.keys(filters).forEach((key) => { Vue.filter(key, filters[key])})4、页面中使用data() { return { number: '1234444321', formatNumber: '' } },直接原创 2020-12-14 16:20:45 · 200 阅读 · 0 评论 -
VUE—全局引入公共css文件
1、新建style文件夹2、在base.less中写入一些公共样式可以写一些公共样式和公共类3、在app.vue引入原创 2020-12-14 16:14:41 · 1383 阅读 · 1 评论 -
VUE—vue3使用less 颜色变量
1、安装依赖vue add style-resources-loader vue-cli-plugin-style-resources-loader -D2、vue.config.js引入pluginOptions: { 'style-resources-loader': { preProcessor: 'less', patterns: [ path.resolve(__dirname, './src/style/theme.less原创 2020-12-14 16:09:24 · 1860 阅读 · 0 评论 -
VUE—watch 某个值发生变化执行的操作（首次绑定便执行）
watch: { $route: { handler: 'getSelectedId', // 当路由变化时候执行methods里的getSelectedId方法 immediate: true // 但当值第一次绑定的时候，不会执行监听函数，只有值发生改变才会执行。如果我们需要在最初绑定值的时候也执行函数，则就需要用到immediate属性，需要设置immediate为true }},methods: { getSelectedId() { ...... }}...原创 2020-12-14 15:58:53 · 1673 阅读 · 0 评论 -
VUE—mac安装脚手架失败（path /usr/local/lib/node_modules/@vue/cli/node_modules/_apollo@2.27.0@apollo/node_mo）
找到文件夹usr/local/lib/node_modules/@vue 里面有一个cli删除cli文件夹之后重新输入命令没有报错之后vue -V查看版本原创 2020-09-14 17:25:37 · 1582 阅读 · 0 评论 -
VUE—vue中判断元素是否有该类名，若没有为该元素添加类名
if (!headerDom.getAttribute('class').includes('not-top')) { headerDom.className = 'header-container not-top'}原创 2020-07-09 10:43:13 · 4208 阅读 · 0 评论 -
VUE—屏幕向上滚动到一定高度，导航栏向上慢慢消失（动画）
<div ref="header" class="header-container"> // header 设置refmounted() { document.addEventListener('scroll', this.onScroll) }, beforeDestroy() { document.removeEventListener('scroll', this.onScroll) }, methods: { onScroll() {原创 2020-07-09 10:40:54 · 2059 阅读 · 0 评论 -
VUE—封装弹窗组件并且点击空白出消失
封装弹窗的vue页面 起名叫PosterModal<div v-if="visible" class="modal-mask" catchtouchmove='true' @click="closeModal"> <div class="modal-content" @click.stop="openModal”> // .stop阻止冒泡 </di...原创 2020-04-22 14:42:18 · 989 阅读 · 0 评论 -
VUE—缓存keep-alive（图文详情）
VUE—缓存keep-alive <keep-alive :include="['Work']"> <router-view></router-view> </keep-alive>例如我需要缓存的路由，那么我就用keep-alive将路由包裹起来，但是我不想所有路由都被缓存，（里面有三个子路由），所以用inclu...原创 2019-08-03 21:44:15 · 140 阅读 · 0 评论 -
VUE—v-for循环时获取下标并对dom节点进行操作（图文）
VUE—v-for循环时获取下标并对dom节点进行操作案例：v-for循环创建了很多按钮，点击每个按钮都会改变样式，利用ref每个button都绑定一个点击事件并传一个下标值，（从0开始），通过ref和$refs对dom节点进行操作，改变字体颜色...原创 2019-08-08 18:44:36 · 4122 阅读 · 0 评论 -
VUE—仿照淘宝历史记录的添加和删除（图文）
VUE—仿照淘宝历史记录的添加和删除第一步： html<template> <div> <div class="list"><!-- 例如淘宝推荐的热门搜索--> <h3>列表</h3> <ul> <li ref="list" @click...原创 2019-08-13 19:03:26 · 741 阅读 · 0 评论 -
VUE—同级路由传值（图文）
VUE—同级路由传值方向： My_collect_new 传值一个num给 My_collect重点就是圈起来的那句话，其余的自己写的其他内容绑定一个点击事件，方法名为finishnew，执行完成之后我将num这个值传给接收的同级路由，这时候可以发现地址栏发生了变化我传的值这个时候已经进入了我的接收这个值的同级路由My_collect了this.$route.query.num这...原创 2019-08-13 19:09:45 · 990 阅读 · 0 评论 -
VUE—底部导航路由切换时更换图片（图文）
VUE—底部导航路由切换时更换图片第一步： 布局给每个底部导航路由都绑定一个点击事件，不要绑定在router-link上，那样会不生效，并且动态的添加图片路径v-for也行，那样需要动态的绑定方法，可参考v-for时动态绑定函数<mt-tab-item> <router-link to="/Home"> <div ...原创 2019-08-13 19:24:24 · 2817 阅读 · 0 评论 -
VUE—v-for循环动态添加背景颜色
VUE—v-for循环动态添加背景颜色v-for循环：data：原创 2019-08-07 15:21:11 · 9080 阅读 · 2 评论 -
VUE—axios配置项例如baseURL外部使用（图文）
VUE—axios配置项例如baseURL外部使用第一步： 新建http文件夹，并在里面新建一个index.js用来写外部axios配置项里面的内容为import axios from 'axios' // 一定要安装并引入axioslet server = axios.create({ baseURL: 'http://121.31.30:aa/', // 将全部完整路径例如...原创 2019-08-14 11:07:49 · 998 阅读 · 0 评论 -
VUE—移动端点击分类按钮的选择和取消（图文）
VUE—移动端点击分类按钮的选择和取消效果如下，一进入便是全部标签被选中，点击其他标签全部标签取消样式，点击全部时其他标签全部取消样式，并且只剩最后一个标签时无法取消第一步：写一下布局，用的element ui抽屉 <!--抽屉--> <el-drawer title="至少选择一个标签" :visible.sync="dra...原创 2019-08-09 22:38:24 · 2073 阅读 · 0 评论 -
VUE—删除当前dom节点
VUE—删除当前dom节点第一步：v-for循环dom节点，每个li都有一个删除按钮，并绑定删除事件 <ul> <li ref="li" v-for="(item, index) in datahistory" :key="index"> {{item}} <button @click="deleteF...原创 2019-08-15 14:00:04 · 12623 阅读 · 0 评论 -
VUE—父路由的样式被子路由抢走，怎么解决
VUE—父路由的样式被子路由抢走，怎么解决子路由的路径前配上父路由的路径即可，例如{ path: '/Home', name: 'Home', component: Home, children: [ { path: '/Home/Home_attention', name: 'Home_attention', component: ...原创 2019-08-12 13:52:52 · 157 阅读 · 0 评论 -
VUE—点击换一批就更换一批内容
VUE—点击换一批就更换一批内容<template> <div id="home_ui"> <div class="content" ref="wrapper"> <div> <button @click="change">换一批</button> <ul cla...原创 2019-08-12 14:49:54 · 3227 阅读 · 0 评论 -
VUE—用keep-alive进行缓存之后，返回到父级路由，再次进入时内容照样消失，怎么解决（图文）
用keep-alive进行缓存之后，返回到父级路由，再次进入时内容照样消失，怎么解决本身创建了四个工作台，用了keep-alive所以可以缓存，同级路由下进行切换内容不会消失，比如我点击切换到了我的文档这个路由，然后再点击我的工作台，会发现内容没有消失，但是我点击首页，也就回到了父级路由，再次进入我的工作台会发现内容消失了解决方法如下：首先我在我的工作台这个vue里定义了一个方法add（...原创 2019-08-16 19:18:58 · 1320 阅读 · 0 评论 -
VUE—项目优化之懒加载（vue异步组件优化、webpack分割js）
VUE—项目优化之懒加载（vue异步组件优化、webpack分割js）什么是懒加载？当页面进入某个模块的时候，对应加载当前模块的js即可，不需要一次性的把所有的js都进行加载。默认情况下 webpack会把所有的css、js一次性整合在一起，页面初始化的时候全部加载好，这样会造成性能的影响，我们通过配置实现一个懒加载， 初始化进入的时候只加载当前需要的js和css即可。懒加载把不同的路...原创 2019-08-16 19:57:59 · 808 阅读 · 0 评论 -
VUE—父子组件传值、改值、调用方法。。。。
VUE—父子路由传值（控制显示隐藏）方法一：子路由<input @click="changed" readonly type="text">methods: { changed () { this.$emit('changedFn', true) // 参数一：事件名 参数二：传递的值 } }父路由 <Inp...原创 2019-09-04 05:32:19 · 2810 阅读 · 2 评论 -
VUE—使用自定义外部js方法（示例：localstorage）
VUE—使用自定义外部js方法1、在src文件夹中新建lib文件夹再在其中新建一个util.js文件用来存储自定义的js方法，在这里示范的是localstorage的读写方法let local = { get: function (key) { // 存储进去的是字符串所以get的也是字符串，因此要转换成对象 return JSON.parse(localStorage.g...原创 2019-09-04 07:51:55 · 874 阅读 · 0 评论 -
VUE—用vuex进行状态管理，小demo（模拟下拉列表各种传参）
VUE—用vuex进行状态管理1、cnpm install vuex -D2、在src中新建store文件夹（公共状态管理库）并新建index.js文件，并输入import Vue from 'vue'import Vuex from 'vuex'Vue.use(Vuex)export default new Vuex.Store({ state: { // 存放公共变量 ...原创 2019-09-05 00:09:58 · 381 阅读 · 0 评论 -
VUE——axios的interceptor拦截器实现加载数据前显示几秒loading页面后消失（图文详情）
VUE——interceptor拦截器demo示例：在请求成功之前拦截，显示loading蒙层，在请求成功之后loading蒙层消失，并console.log出请求的内容需要用到1、 // 添加请求拦截器axios.interceptors.request.use2、// 添加响应拦截器axios.interceptors.response.use第一步：创建一个loading.vu...原创 2019-08-02 11:10:27 · 2517 阅读 · 1 评论 -
VUE—axios的all并发请求（图文详情）
VUE—all并发请求<script> import axios from 'axios' export default { name: "all", methods: { getUrl () { return axios.get('https://www.easy-mock.com/mock/5d41580a1a802c0d5e...原创 2019-08-02 10:27:58 · 993 阅读 · 0 评论 -
VUE—axios自定义请求配置—7、validateStatus状态码（图文详情）
VUE—axios自定义请求配置—7、validateStatus状态码<script> import axios from 'axios' // axios配置 let http = axios.create({ baseURL: 'https://www.easy-mock.com/mock/5d41580a1a802c0d5e53dcc2/example/...原创 2019-08-02 10:06:03 · 8659 阅读 · 0 评论 -
VUE—assets/static区别（图文详情）
VUE—assets/static区别自己的放在assets别人的放在staticimg推荐放在assets，若动态引入图片需要用require原创 2019-07-31 19:17:22 · 1684 阅读 · 0 评论 -
VUE—ref和$refs的使用（图文详情）
VUE—ref和$refs的使用通俗易懂的来讲：ref写在需要用到的dom节点上$refs用来调用这个dom节点mt-loadmore是mint ui的组件，不用管他，放在任何一个div里都可以我需要用到的就是这个节点，我就在这个dom节点写一个ref，再起个名字叫做loadmore，一点要取名字，因为下面要用到。然后我就可以直接这样写获取到名字叫loadmore的dom节点了...原创 2019-08-04 02:20:32 · 546 阅读 · 0 评论 -
VUE—v-for循环时通过data动态添加路由路径（图文详情）
VUE—v-for循环时通过data动态添加路由路径第一步：定义变量存储路径，并在data中引入例如：let datacontent = [ { pic: require('@/assets/img/my1.jpg'), title: '我的创作', path: '/My_produce' }, { ...原创 2019-08-04 00:50:29 · 1215 阅读 · 0 评论 -
VUE—引入背景图片（图文详情）
VUE—引入背景图片background: url("../../assets/img/my_right.jpg") no-repeat right center;我的文件夹位置…/从当前文件出去到了my再…/是从my出去到了src所以…/…/assets是src下的assets文件夹...原创 2019-08-04 00:41:59 · 3978 阅读 · 0 评论