vue
关注
分享
扫一扫
旺仔萝卜
这个作者很懒，什么都没留下…
展开
-
Vue3使用vxe-table表格虚拟滚动 安装方法
使用vxe-table表格虚拟滚动做一个table，想要渲染上千万条数据，一般表格会导致浏览器卡顿或崩溃，这时我们可以使用插件解决。但是在安装vxe-table的时候，运行不起来，一直报错，后来才发现是版本的问题。安装的时候参照官网全局安装的写法会出现错误，不知道你们会不会npm install xe-utils@3 vxe-table@next还有注意这里版本要切换成最新的后面找了很多方法，改成这种方式下载包：npm install xe-utils vxe-table@next这样原创 2022-01-06 16:26:45 · 4226 阅读 · 4 评论 -
vant库 如何引用本地图片
vantjs组件库，若要引入本地的图片会获取不到。会没有显示图片。 <van-card :title="item.goodsName" :desc="item.spec" :num="item.number" :thumb="getImg()" > <!-- <div slot="num" @click.stop="return false">原创 2021-02-22 23:22:29 · 3092 阅读 · 2 评论 -
解决vue修改数据页面无效的问题
项目开发的过程中，经常会遇到这种情况：为data中的某一个对象添加一个属性。如下案例：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title>原创 2021-01-05 15:41:00 · 3804 阅读 · 1 评论 -
vue-aioxs interceptors拦截器的实际应用
axios的拦截器 interceptors的用途axios的拦截器有什么作用呢？可以在请求之前做点什么操作，一般有三种：修改请求头的一些配置项给请求添加参数给请求的过程添加一些请求的图标全局拦截器 axios.interceptors.request.use(config=>{ console.log(1234); return config },err=>{ console.log(err) }) axios({ url:"./原创 2020-12-24 11:24:58 · 533 阅读 · 0 评论 -
vue框架的.native修饰符：将原生事件绑定到组件
vue的.native：将原生事件绑定到组件的理解阅读官网时，看到这里很懵，查了一些资料才理解.native的用法：通俗一点解释，就是再我们自己写的一些组件上面，正常的话是用不了原生事件的，比如点击事件click、聚焦focus等，比如这样：my-component组件是我们自己写的，直接使用原生事件click，这时点击是触发不了outClick函数的。所以我们要加上.native修饰符：<div> <my-component @click.native="outClick原创 2020-12-11 16:11:39 · 354 阅读 · 0 评论 -
vue中使用 lodash Debounce防抖不生效原因
最近项目需要做这样一个需求：基于element-ui框架的vue项目，输入input框实现实时搜索后台响应的数据。但用户每次按下键盘就发送请求会导致系统性能不好等问题，这时需要考虑到用防抖去解决这个问题。所以我考虑使用输入框监听+lodash库https://www.lodashjs.com/docs/lodash.debounce的防抖来实现。步骤简单：首先引入+使用import {debounce} from 'lodash';<el-form-item label="" prop=""&原创 2020-12-03 10:49:07 · 11892 阅读 · 0 评论 -
vue cli4.0 快速搭建项目详解
1.进入一个目录，创建项目vue create project-name2.我们这里选择手动配置按 ↓ 选择“Manually select features”，再按 Enterhttps://www.cnblogs.com/sese/p/11712275.html3.选择你需要的配置项通过↑ ↓ 箭头选择你要配置的项，按 空格 是选中，按 a 是全选，按 i 是反选。具体每个配置项表示什么意思在下面会有说明。复制代码? Check the features needed for your原创 2020-11-27 17:25:01 · 131 阅读 · 0 评论 -
关于Vue的api中的this.$nextTick()
参数：{Function} [callback]用法：将回调延迟到下次 DOM 更新循环之后执行。在修改数据之后立即使用它，然后等待 DOM 更新。它跟全局方法 Vue.nextTick 一样，不同的是回调的 this 自动绑定到调用它的实例上。//第一个例子<template> <div> <div ref="hello"> <h1>{{value}}</h1> </div> &l原创 2020-10-20 18:30:27 · 389 阅读 · 0 评论 -
Vue中mixin的用法详解
mixin：混入，提供了一种非常灵活的方式，来开发Vue组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项。引用例子：目录结构：//mixin.js文件export default { data(){ return { name: 'mixin' } }, created: function(){ this.hello()原创 2020-10-19 22:43:04 · 538 阅读 · 0 评论 -
组件化和模块化的区别
什么是组件和模块 组件和模块的区别 为什么要使用组件化和模块化什么是组件和模块组件把重复的代码提取出来合并成为一个个组件，组件最重要的就是重用（复用），位于框架最底层，其他功能都依赖于组件，可供不同功能使用，独立性强。模块 分属同一功能/业务的代码进行隔离（分装）成独立的模块，可以独立运行，以页面、功能或其他不同粒度划分程度不同的模块，位于业务框架层，模块间通过接口调用，目的是降低模块间的耦合，由之前的主应用与模块耦合，变为主应用与接口耦合，接口与模块耦合。模块就像有多个US..原创 2020-08-02 22:27:20 · 979 阅读 · 0 评论 -
关于使用vue-awesome-swiper，轮播图不能播放和分页器没显示的解决方法
vue-awesome-swiper在2020年做了更新，早上想使用vue-awesome-swiper完成vue项目的轮播图，发现一些轮播图不能播放和分页器没显示，经过一个上午，在老师的协助下终于解决了：原来是包版本太高的问题，肯能导致一些不兼容。后来我指定了版本号，下回低版本cnpm i vue-awesome-swiper@3重启基本上就可以了，但要注意的是在阅读官网的时候最好采用定义组件方式写轮播图，用指令方式可能会出问题。<swiper ref="mySwiper" :optio原创 2020-07-15 14:14:41 · 4675 阅读 · 3 评论 -
Vue组件通信
Vue组件通信八种方式props和$emit父组件向子组件传递数据是通过prop传递的，子组件传递数据给父组件是通过$emit触发事件来做到的。$attrs和$listeners第一种方式处理父子组件之间的数据传输有一个问题：如果父组件A下面有子组件B，组件B下面有组件C,这时如果组件A想传递数据给组件C怎么办呢？如果采用第一种方法，我们必须让组件A通过prop传递消息给组件B，组件B在通过prop传递消息给组件C；要是组件A和组件C之间有更多的组件，那采用这种方式就很复杂了。Vue 2.原创 2020-07-13 23:59:22 · 719 阅读 · 0 评论 -
关于vue-lic脚手架使用less和sass的配置
配置less修改webpack.config.js配置文件{ test: /\.less$/, use: [ 'style-loader', 'css-loader', 'less-loader' ] }npm下载安装包，-D代表使用依赖cnpm i style-loader less-loader -D.vue文件添加样式，加上scoped是为了在当前vue文件下原创 2020-07-10 16:50:32 · 692 阅读 · 0 评论