Vue
vue总结
最初都是小白
深深的话我们浅浅的说,未来长长的路我们慢慢的走。
展开
-
video 去掉播放按钮并循环播放 可替代gif
video代替gif原创 2022-10-12 20:25:20 · 1301 阅读 · 0 评论 -
vue中使用echarts拉伸缩放屏幕自适应
vue 使用echarts拉伸屏幕自适应原创 2022-09-27 17:08:29 · 969 阅读 · 0 评论 -
vue.使用popstate监听点击浏览器自带返回按钮
vue.使用popstate监听点击浏览器自带返回按钮原创 2022-06-27 11:42:56 · 1881 阅读 · 0 评论 -
解决fullPage中使用dialog时滑动冲突问题
解决fullPage中使用dialog时滑动冲突问题原创 2022-06-21 15:07:46 · 470 阅读 · 0 评论 -
vue数组分组递归(按数组加合分组,如小于等于100时分一组)
使用场景:(由数组a 得到 数组b)数组 a:[30,20,30,50,50,40,30]数组 b:[[30,20,30],[50,50],[40,30]] mounted(){ let a = [30,20,30,50,50,40,30] //原数组 let b = [] //新书组容器 let max = 100 //期望最大加合100为一组 let newArr = this.getArr(a,max,b) //新数组 } methods:{ // 分组方法:三个参数原创 2022-03-29 10:00:49 · 2238 阅读 · 0 评论 -
vue 移动端中使用WebSocket对话
效果:代码:import { Toast } from "mint-ui";export default { data(){ return{ websocket: null, keyWord:'', searchKey:'search_qa' } }, mounted(){ // 初始化WebSocket this.initWebSocket() }, methods:{ // 初始化 in原创 2022-03-17 15:08:04 · 3346 阅读 · 4 评论 -
vue中使用jquery 滑动到页面底部
期望点击按钮或其他操作时可以滚动到底部方法: // 滑动到底部 scrollToBottom(){ this.$nextTick(() => { //要滑动的高度= 当前dom的滑动高度 - 当前窗口可视区域高度 var height = $("#scrollBox")[0].scrollHeight - $(window).height(); $("#scrollBox").scrollTop(height)原创 2022-03-16 14:41:06 · 1708 阅读 · 0 评论 -
vue 数组分组递归(按个数分组,如3个一组)
使用场景:(由数组a 得到 数组b)数组 a:[1,2,3,4,5,6,7]数组 b:[[1,2,3],[4,5,6],7] mounted(){ let a = [1,2,3,4,5,6,7] //原数组 let b = [] //新书组容器 let num = 3 //期望3个为一组 let newArr = this.group(b,a,num) //新数组 } methods:{ // 分组方法三个参数分别是 新数组,原数组,几个分为一组 group(newA原创 2022-03-16 13:48:29 · 4216 阅读 · 0 评论 -
EventBus组件通信 vue 两个无关的组件间通讯
EventBus相当于系在两个组件的桥梁,两个页面通过EventBus进行传递参数,调用方法。示例: A页面调用B页面的方法第一步:建立EventBus文件在src下建立utils文件夹,utils文件夹下创立EventBus.js import Vue from 'vue'; /** * 事件总线 * @usage: * EventBus.$emit('event',payload); * EventBus.$on('on',(payload)=>{}); */ co原创 2022-03-10 14:12:35 · 1185 阅读 · 0 评论 -
vue移动端 滑动到底部加载文章,实现下拉文章分页加载效果
html:<template> <div class="rink"> <div class="top-list scroll-wrap" v-infinite-scroll="loadMore" infinite-scroll-disabled="loading" :infinite-scroll-immediate-check="true" infinite-scroll-distance="70"> <原创 2022-02-22 17:53:39 · 1302 阅读 · 2 评论 -
解决报错: `defaultValue` is invalid for `getFieldDecorator` will set `value`, please use `option...
报错原因:当我的input 绑定了v-decorator的时候,又设置了default-value默认值,如下: <a-input v-decorator="[ `name`]" default-value="默认文字" />就会报错:Warning: defaultValue is invalid for getFieldDecorator will set value, please use option.initialValue instead.解决办法:在v-deco原创 2022-02-21 16:15:17 · 5909 阅读 · 3 评论 -
Ant Design Vue Pagination分页组件的封装与使用
今天封装一个常用的组件 Pagination 分页因为是 Ant Design Vue 的组件,所以必须安装Ant Design Vue才能使用哦~使用组件(可参考Ant Design Vue 快速上手):$ npm i --save ant-design-vue第一步:首先创建一个组件文件Pagination.vue ,完整代码:<template> <div class="mz-antd-pagination"> <a-pagination原创 2021-05-21 16:30:25 · 5126 阅读 · 0 评论 -
当使用vue-cli创建项目报错信息为:“serve with message ‘spawn vue-cli-service ENO’...”时的解决方法
今天在做项目的遇到了一个这样的报错信息: 出现这个问题的场景是我通过vue3.0版创建项目,然后在创建完成后,我安装了一个element-ui按需加载的一个 babel-plugin-component 。 这个问题之前也遇到过,大概分析它是因为当你安装的时候可能用的npm进行安装,然后cli内部的有可能和它不一致,所以会报这个错。解决方法: 解决方法也很简单就是统一安装的方法:...原创 2019-06-20 17:00:17 · 8559 阅读 · 0 评论 -
vue 移动端调试工具Vconsole用法
npm 安装 npm install vconsole使用import VConsole from 'vconsole'new VConsole()原创 2021-12-30 21:54:40 · 674 阅读 · 0 评论 -
解决vue中在使用element-UI的MessageBox.confirm()时刷新页面就弹出提示框问题
问题:只要用到MessageBox.confirm(),在页面刷新时就会自动弹出正常应该是点击这个dialog的关闭才弹出解决办法:因为我是按需加载引用的element-ui :按需引用代码:import { MessageBox,} from "element-ui";Vue.component(MessageBox.name, MessageBox); //使用这种方法引用...原创 2020-05-18 11:34:09 · 6308 阅读 · 1 评论 -
vue 调后台接口实现导出excel表格功能
今天遇到了一个导出excel表格的功能(如图)实现导出分三步:第一步:定义API接口的时候添加 responseType: “blob” // 导出策略结果 downloadStrategyResult(params) { return request({ url: `/inspect/excel`, method: "post", data: params, baseURL: "/store", responseType:原创 2021-08-10 16:42:05 · 4715 阅读 · 8 评论 -
vue——element-ui项目中用如何点击导航菜单进行当前页面的router切换?图解只需三步!
先给大家模拟一下场景:想要的效果:下面来看需要配置项 使用element-ui的 NavMenu导航,里面的菜单属性里有详细的介绍。第一步配置属性,并把每一项的index改为想要跳转的path:第二步在Home页加上< router-view />插槽:第三步查看路由配置:...原创 2019-06-25 16:11:33 · 19591 阅读 · 28 评论 -
vue 动态渲染表格序号列
当前demo用的是 Vue + Ant Design Vue 框架的,如果用的是Element-UI 应该也是差不多的原理。总结三种方法:第一种:动态在表格数据添加一个index 序号字段template: <template> <div class="table-list"> <a-table :columns="columns" :data-source="tableData" :locale='{e原创 2021-05-20 14:55:45 · 1877 阅读 · 0 评论 -
vue如何设置反向代理
vue中设置反向代理:在vue.config中:原创 2020-05-20 16:47:26 · 1583 阅读 · 1 评论 -
用css样式【v-closk】解决Vue插值表达式的闪烁问题
解决方法:使用 属性选择器[ ] 把所有带有v-cloak属性的元素样式隐藏代码演示:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, init...原创 2019-04-29 14:35:02 · 501 阅读 · 0 评论 -
vue 返回上个页面
返回上一页:this.$router.go(-1);//返回上一层原创 2021-12-28 22:00:21 · 2972 阅读 · 0 评论 -
vue 页面加载完成后引用js文件
如果希望在页面加载完成之后引入某个js,需要把代码写在mounted里引用本地的js直接写 require(’./xxx.js’)即可 mounted(){ let nav = document.createElement('script')。//创建script标签 nav.type = 'text/javascript'; nav.src = require('./xxx.js') //静态资源 }引用外部链接,需要在src赋值后,通过appendChil原创 2021-12-24 17:23:18 · 3736 阅读 · 0 评论 -
vue this.$router.push 跳转新页面 传参
项目场景:点击首页搜索按钮,跳转到搜索落地页(新页面形式)跳转方法: let routeInfo = this.$router.resolve({ path: '/page/search',query:{keywords:value} }); window.open(routeInfo.href, '_blank');接收参数:this.$route.query.keywords 注意: 因为是跳转新页面,所以传递参数只能用query,用params传参在目标页面获取不到。...原创 2021-12-23 20:30:55 · 2762 阅读 · 0 评论 -
vue打印插件,使用教程
第一步:文件里新增一个print.js// 打印类属性、方法定义/* eslint-disable */const Print = function (dom, options) { if (!(this instanceof Print)) return new Print(dom, options); this.options = this.extend({ 'noPrint': '.no-print' }, options); if ((typeof dom) ===原创 2021-11-25 15:23:28 · 4197 阅读 · 0 评论 -
vue swiper 动态加载/插入数据时,默认跳到第0项,问题解决
需求场景:swiper默认展示第二项,然后在change的时候,判断如果当前项等于0 就给数组最前面插入一项最关键的两点:在swiper的最外层 加 v-if=“swipershow”<u-swiper v-if="swipershow" :list="list" :current="current" @change="change" :autoplay="false"></u-swiper>在改变swiper数据后重新渲染swiper组件在这里插入代码片原创 2021-05-14 01:53:51 · 1194 阅读 · 0 评论 -
vue中 ECharts 图表使用教程
ECharts 数据可视化图表有很多,今天就以饼图为例第一步: 先来安装echartsnpm install echarts --save第二步: 在main.js中全局引用ECharts,当然你也可以按需引用。 import echarts from 'echarts' //引入echarts Vue.prototype.$echarts = echarts //挂载在全局第三步: 接下来就可以使用了,首先在ECharts官网 找到你想要的效果实例点击进入实例详情:使用完整原创 2020-09-29 11:22:58 · 3828 阅读 · 0 评论 -
什么是Vue.js? —— 深度了解vue.js
Vue.js是一个轻巧、高性能、可组件化的MVVM库,同时有非常容易上手的API Vue.js是前端的主流框架之一,和Angular.js、React.js一起,并列成为前端的三大主流框架。 Vue.js是一套构建用户界面的 渐进式框架,与其他重量级的框架不同的是,Vue采用自底向上增量开发的设计,它的核心只专注视图层,非常容易与其他库或者是已有项目整合。另一方面,Vue完全有能力驱动...原创 2019-03-27 15:22:17 · 1648 阅读 · 0 评论 -
VUE指令及用法大全——(一)插值表达式
插值表达式原创 2019-04-08 13:35:17 · 11324 阅读 · 0 评论 -
VUE指令及用法大全——(二)v-bind属性绑定
语法:v-bind:(一般简写成一个冒号)使用时请注意:由于在开发中,属性绑定使用特别频繁 ,所以经常被简写成一个冒号 :代码演示:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="w...原创 2019-04-08 14:02:42 · 1568 阅读 · 0 评论 -
VUE指令及用法大全——(三)v-on事件绑定
语法:v-on:(一般简写成一个@)使用时请注意:代码演示:原创 2019-04-09 10:50:35 · 674 阅读 · 0 评论 -
VUE指令及用法大全——(四)v-model 双向数据绑定
语法:v-model:使用时请注意: 1. v-model 只能和表单元素进行绑定 2. v-model 是vue中唯一支持双向绑定的指令代码演示:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewp...原创 2019-04-29 13:51:44 · 393 阅读 · 2 评论 -
VUE指令及用法大全——(六、七)v-if、v-show 显示与隐藏的实现区别和原理
语法:v-if: / v-show:作用以及实现原理: 1.v-if 和 v-show 的作用都是切换界面上元素的显示或隐藏的 2. v-if 的实现原理:通过动态创建或移除元素实现元素的显示与隐藏 3. v-show 的实现原理:通过动态切换元素的display样式,来控制元素的显示与隐藏注意: v-if 有更高的切换消耗 而 v-show 有更高的初始渲染消耗-...原创 2019-05-08 16:59:16 · 1780 阅读 · 0 评论 -
VUE指令及用法大全——(五)v-for 循环
语法:v-for:使用时请注意: 1. 当Vue.js用v-for正在更新已渲染过的元素列表时,它默认用“就地复用”策略。 如果数据项的顺序被改变,Vue则不是移动DOM元素来匹配数据项的顺序,而是简单复用此处的每个元素,并且确保它在特定索引下显示已被渲染过的每个元素。 2.为了给Vue一个提示,以便它能跟踪每个节点的身份,从而重用和重新排序现有元素,需要为每项提供一个唯一的ke...原创 2019-05-06 18:14:12 · 2386 阅读 · 0 评论 -
v-for中key的作用:为什么使用v-for时必须添加唯一的key属性
key的作用: key是为了给Vue一个提示,以便它能跟踪每个节点的身份,从而重用和重新排序现有元素,需要为每项提供一个唯一的key属性。先来举个例子:一、没有加key:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name=...原创 2019-05-07 15:24:08 · 15386 阅读 · 2 评论 -
Vue生命周期函数图解(高清带翻译)
原创 2019-07-04 11:08:02 · 851 阅读 · 0 评论 -
MVVM思想,和MVC的区别,以及MVVM框架与VUE代码的对应关系
MVVM定义: MVVM是 Model-View-ViewModel 的简写。 即模型-视图-视图模型。模型: 指的是后端传递的数据。视图: 指的是所看到的页面。视图模型: mvvm模式的核心,它是连接view和model的桥梁...原创 2019-04-04 10:48:16 · 887 阅读 · 2 评论