VUE
文章平均质量分 72
vue1.0,2.0
吃瓜群众欢乐多
菜鸟烦恼多
展开
-
vue2如何给孙辈传递slot,孙如何给父传递参数
vue2如何给孙辈传递slot,孙如何给父传递参数1、父亲辈parent.vue<!-- 引用子组件 --><child-list> <template slot="search_item_display_time" slot-scope="{search}"> <div>{{search}}</div> </template></child-list>2、子辈ch原创 2022-04-13 16:00:43 · 3344 阅读 · 0 评论 -
用vue3实现抽奖模板设置
效果图代码<template> <div> <h4>抽奖模板设置</h4> <div class="container"> <ul class="ul-box"> <li v-for="(item,index) in list" :key="item.id" @click.stop="handleClickItem原创 2021-12-24 11:11:34 · 723 阅读 · 0 评论 -
Demo-Vue实现双向绑定的核心-Object.defineProperty()讲解
Object.defineProperty() 方法会直接在一个对象上定义一个新属性,或者修改一个对象的现有属性, 并返回这个对象。原创 2020-03-20 17:14:14 · 169 阅读 · 0 评论 -
给el-table筛选条件设置默认筛选条件(设置默认过滤值)
我们在实际需求中,表格会有默认过滤值,那么如何设置这个默认过滤值呢官网demo地址在js中加上关键代码mounted() { this.setDefaultFilterValue(); }, methods: { setDefaultFilterValue(){ this.$refs.filterTable.columns[3].filtere...原创 2020-01-09 18:42:21 · 9039 阅读 · 0 评论 -
vue手写一个简单日历demo
实现效果左右拖拽实现切换月份,PC端自行改为左右点击实现切换v-touch:swipe.left 左右切换,用的插件:vue2-touch-eventstransition-group 切换动画效果 官网查看使用方法逻辑获取当前时间new Date(),然后据此获取当前年月日,日历需要两个关键值根据年份判断某月有多少天获取当月第一天是周几<script>...原创 2019-12-06 17:44:04 · 957 阅读 · 1 评论 -
element的table列筛选,调用后端接口过滤数据显示
官方讲解 #筛选但是官网举的例子是对已知table数据的筛选,但是在实际运用中,我们当前页面只显示20条数据,获取不到所有的数据。。。。。我们想将选中的时间传递到后台返回筛选结果。:filter-multiple=“false” false表示单选,true为多选@filter-change=“filterChange” :选中后调用的方法<el-table ref="f...原创 2019-08-20 17:54:40 · 5971 阅读 · 0 评论 -
父子组件之间传递Function,在vue组件中callback的应用
父子组件传递Function在用element,el-autocomplete这个组件时我看到有一种cb的方法,又get到一点知识点,平时使用中父子组件传参一般都是Object,Array,Boolean,String类型,如果想要传递Function,并且保证他们之间的通信如何做到呢?例子<!DOCTYPE html><html lang="en">&l...原创 2019-07-26 17:12:43 · 5106 阅读 · 0 评论 -
提高VUE性能优化的九种方式
1、函数形组件(functional)2、子组件拆分(利用组件内部运行,不影响其他外部组件)3、局部变量 (多赋值给局部变量,减少不断计算)4、用v-show,不用v-if(v-if操作dom结构,性能低)5、用keep-alive(缓存页面)6、用mixins(mixins引入的js后执行,延迟装载Defer)7、time slicing 分批处理(用requestAnimation...原创 2019-07-22 17:39:33 · 3402 阅读 · 0 评论 -
vue项目上传图片到Linux服务器并预览
.vue<form action="/api/upload" method="post" enctype="multipart/form-data"> <input type="file" name="logo"> <input type="submit" value="提交"> </form>app.jsco...原创 2019-07-16 16:00:31 · 1516 阅读 · 0 评论 -
element ui中table的v-show失效,但是v-if正常
v-show起作用的本质是display:none,而因为td的display: table-cell;权限高于display:none,所以v-show失效原创 2019-07-15 17:01:27 · 5682 阅读 · 0 评论 -
vue原理1-实现observer
关键属性:有兴趣的点击链接查看具体讲解:Object.defineProperty let data = {name:'my name'}; observe(data); function observe(data) { if(!data ||typeof data !=='object'){ return; } ...原创 2019-04-23 16:11:45 · 716 阅读 · 0 评论 -
vue通过style或者class改变样式
通过style改变样式<div :style="{ 'min-height': size + 'px' }"></div><div :style="[{ 'min-height': size + 'px' },{color:'red'}]"></div><div :style="{ 'opacity': value ? 0.5 :...原创 2018-10-30 11:40:30 · 2365 阅读 · 0 评论 -
vue2的tab栏切换不能自动刷新如何解决?
this.$forceUpdate(); //强制刷新,解决页面不会重新渲染的问题<template> <div> <el-card> <ul class="list-style-none title-list"> <li v-for="item in titleList" v-bind:class...原创 2018-10-09 11:34:10 · 8799 阅读 · 0 评论 -
vue+elementUI input框之过滤显示
效果图如下:<el-form-item label="Test Filter: "> <el-autocomplete class="inline-input" v-model="form.filter" :fetch-suggestions="querySearch" placeholder="请输入内容" ...原创 2018-09-03 16:30:09 · 8337 阅读 · 0 评论 -
vue-组件之间通信3种实例+“双向绑定”+v-model传值
vue的父组件与子组件实现数据通信的5种方式一、父=>子父:<div> <child :child-str="data"></child></div>import child from './school-child';export default { name: "parent", compon...原创 2018-09-05 15:55:59 · 1083 阅读 · 0 评论 -
vue.js遇到的问题-数组数据改变,页面不能实时显示
对于这种表单,有删除,上移,下移等操作在上移下移时会遇到一个问题,见官方文档由于 JavaScript 的限制,Vue 不能检测以下变动的数组:当你利用索引直接设置一个项时,例如:vm.items[indexOfItem] = newValue 当你修改数组的长度时,例如:vm.items.length = newLength因此,我的移动操作代码是,以下移为例...原创 2018-04-04 16:20:46 · 5524 阅读 · 0 评论 -
layui上传图片,预览图片,删除图片,放大预览
界面选择图片后如下显示:点击每张图片的时候,放大预览var upload = layui.upload;关键代码:选择图片后 choose: function (obj) { //将每次选择的文件追加到文件队列 var files = obj.pushFile(); //预读本地文件,如果是多文件,则会遍历。(不支持ie8...原创 2018-04-04 15:58:06 · 11954 阅读 · 6 评论 -
vue+element-自定义指令,防止重复提交及重复发送http请求;节流throttle与防抖debounce举例说明
方法一、控制标签全局directive的写法// 提交以后禁用按钮一段时间,防止重复提交import Vue from 'vue';Vue.directive('noMoreClick', { inserted(el, binding) { el.addEventListener('click', e => { el.classList.add('is-d...原创 2018-12-11 14:10:01 · 8038 阅读 · 1 评论 -
Angular,Vue,React三者的区别-个人理解
题外话:学习了jQuery后,就在公司接触了Angular,第一次接触的时候,简直一脸懵逼呀,对于曾经习惯了对DOM元素进行操作的我真的好难好难,对于曾经没工作经验的我,Angular1入门还是比较难的,还好,努力克服了这个坎。在一次公司的开会中,领导提出了一点问题,controller中的各种变量、方法声明乱七八糟的,代码看起来一点都不规范,然后提到了一点,就是关于代码模块化(即声明全部堆在一块...原创 2018-04-26 11:23:24 · 27592 阅读 · 6 评论 -
vue+element导航栏高亮显示的问题
用导航菜单时遇到的一些问题:点击打开官网例子问题1:页面强制刷新,按F5时,页面如果没有好好设置的话,导航栏默认叠起来,而且无高亮显示;刷新后导航栏显示和之前不一致,如图所示解决:html关键代码设置 :default-active="defaultUrl"这儿的原理就是defaultUrl跟#/后面的一致,也就是说跟router.js中的path一致才行(rou...原创 2018-09-04 17:14:31 · 8166 阅读 · 5 评论 -
element - NavMenu 导航菜单,针对于复杂的导航栏(不定级、多级)动态渲染的组件开发
针对于多级导航菜单栏的遍历的组件开发实现效果如图所示,1、router.js// Layout.vue 和 Main.vue 都是vue容器, 前者为全空的容器import Vue from 'vue'import Router from 'vue-router'import Login from '../views/Login.vue'import Layout from '...原创 2019-06-14 17:19:43 · 6071 阅读 · 3 评论 -
关于vue生命周期的理解
一、打开页面1、beforeCreate可以理解为啥都没有2、createddata被初始化,3、beforeMountdata初始化,el初始化4、mounteddata挂载到dom上此时页面渲染完毕二、页面渲染成功后进行页面交互以下是对页面的修改5、beforeUpdate修改data成功之后的状态6、updated修改data成功,dom挂...原创 2019-04-23 19:00:46 · 163 阅读 · 0 评论