![](https://img-blog.csdnimg.cn/20201014180756919.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
Vue
LeviAckerman_Js
立志成为一名高级前端工程师
展开
-
Get和Post请求
params 是用于拼接 url 的,get 请求传参就是拼到 url 中,而 data 是放在 request body 中的,用于 post原创 2021-11-19 13:53:55 · 248 阅读 · 0 评论 -
可编辑表格
<template> <div class="edit-table-container"> <el-row> <el-row type="flex" justify="space-between"> <el-row type="flex" align="bottom"> <slot /> </el-row> <el-row原创 2021-10-29 13:47:37 · 316 阅读 · 0 评论 -
问题十七:table中使用checkBox状态不改变
问题是我在table列表里面使用checkBox,当我点击要修改状态的时候,值发生了改变,但是视图没有更新根据打印值是发生了改变的,视图不更新解决办法:在checkBox上面绑定一个change方法,给Table绑定的值给一个splice方法Change (event) { this.tableList.splice() },...原创 2021-09-29 11:29:09 · 622 阅读 · 0 评论 -
问题十六:el-row 的宽度溢出修复
当我们在使用饿了么UI的时候利用el-row布局时,偶尔会出现下方滚动条,这是el-row宽度溢出导致的解决方法 修复多余滚动条 //这个样式添加到el-row的父级中 overflow-x: hidden; padding: 0 30px; box-sizing: border-box;原因是容器没有设置足够的padding,所以会造成el-row宽度变长从而出现滚动条...原创 2021-09-18 09:55:10 · 1405 阅读 · 0 评论 -
vue里面v-model的语法糖
v-model语法糖 <date-time v-model='data'></date-time>等同于:<date-time :value="something" @input="value => { data= value }"></date-time>如何实现双向绑定watch:{ newValue(){ this.$emit('input', this.newValue) }}...原创 2021-09-09 14:34:14 · 177 阅读 · 0 评论 -
问题十三:x-www-form-urlencoded发送请求的问题
x-www-form-urlencoded发送请求的要求解决办法//前端在传参时需要新建一个URLSearchParams对象,然后将参数append到这个对象中const params = new URLSearchParams();params.append(‘username’, this.username);params.append(‘password’, this.userpwd);//然后就可以将此参数传递到接口参数中...原创 2021-09-07 15:56:13 · 2019 阅读 · 0 评论 -
vue当背景图需要切换的时候
当一个页面的背景图需要根据,你的变化而变化的时候,需要吧背景图片设置为一个变量,那么该怎么做呢?原创 2021-08-17 16:45:54 · 165 阅读 · 0 评论 -
问题十二:el-row 和el-col导致排版问题
el-row 和el-col导致排版问题解决办法.el-row { display: flex; flex-wrap: wrap;}原创 2021-08-03 16:29:28 · 3031 阅读 · 0 评论 -
vue props传递对象参数时可以实现双向绑定
vue props传递对象参数时可以实现双向绑定使用props向子组件传递对象属性的时候,是可以实现子组件数据修改父组件也能随之改变的原因其实是props接收的是对象的地址,所以父子组件共同指向的是一个堆里面的对象,所以一个改变都改变了注意:只有引用类型可以这样做,基本数据类型是不行的,毕竟props是单向数据流...原创 2021-07-20 17:06:38 · 984 阅读 · 1 评论 -
Vue中Prop默认值为什么要为工厂函数的形式返回?
Vue中Prop默认值为什么要为工厂函数的形式返回?看过一篇文章:原文说Object与数组类型default需要用一个函数返回,但是Type可以为Function,Function不也是Object吗?Function类型得default直接default:()=>{}就行了,为啥不需要default:()=>()=>{}有人说是为了不影响父组件,可是你用不用默认值修改引用类型得prop都会改变父组件得啊,文档中得Object不知道到底包不包括Function,关于子组件修改P原创 2021-07-20 15:59:48 · 1893 阅读 · 1 评论 -
Promise并发做异步请求
并发做异步请求,限制频率举个例子,有 8 张图片 url,你需要并发去获取它,并且任何时刻同时请求的数量不超过 3 个。也就是说第 4 张图片一定是等前面那一批有一个请求完毕了才能开始,以此类推。var urls = [ 'https://www.kkkk1000.com/images/getImgData/getImgDatadata.jpg', 'https://www.kkkk1000.com/images/getImgData/gray.gif', 'https://www.kk原创 2021-07-19 17:56:39 · 321 阅读 · 0 评论 -
Promise 面试题整理
基础输出题题目1const promise = new Promise((resolve, reject) => { console.log(1) resolve() console.log(2)})promise.then(() => { console.log(3)})console.log(4)// 1 2 4 3记住 new Promise 里的参数函数,是同步被执行的,故而先输出 1,2.resolve 后还需要等待进入下一原创 2021-07-19 17:54:02 · 745 阅读 · 1 评论 -
问题九:两个v-for中,内for无法调用外for对象
两个v-for中,内for无法调用外for对象解决办法:把v-if 写在template 标签上原因:首先 vue官方都不推荐 v-if 和 v-for写在一个标签上 (原因:就算写了v-if v-for还是会循环 只是v-for返回的是一个空的值 这样就造成了性能浪费)...原创 2021-07-19 16:33:53 · 362 阅读 · 0 评论 -
问题八:element下拉框<transition-group> children must be keyed: <ElTag>
children must be keyed: 我在添加行的时候完select里面添加了一个数组里面包空对象原创 2021-07-07 16:57:17 · 857 阅读 · 0 评论 -
问题七:vue+ts The left-hand side of an assignment expression may not be an optional property?
用ts定义了一个变量,并且用接口做类型定义的,但是赋值的时候就报错???解决办法:解决的办法是 赋值之前先判断是否存在原创 2021-06-30 20:36:31 · 1661 阅读 · 0 评论 -
问题六:vue使用scoped引入外部样式还是造成样式污染
1.使用@import引入外部样式就算加scoped,如果还是有一样的类名还是会造成样式污染原因@import引入文件并不是直接将文件中的代码引入到使用的文件中来,而是发起一个请求,获得相应的资源,这个时候是没有scoped的解决办法<style src="./style.css" scoped></style>...原创 2021-06-28 16:03:57 · 1063 阅读 · 1 评论 -
问题五:一个对象push到数组中此时改变原对象数组中的数据也会被修改是为什么
直接上domo<template> <div class=""> <form action=""> <p>姓名:<input type="text" v-model="user.name" /></p> <p>年龄:<input type="text" v-model="user.age" /></p> <p>爱好:<input ty原创 2021-06-08 14:58:06 · 3270 阅读 · 6 评论 -
(三):Vue3的v-for和v-if一起用的变化
1.作用:v-if指令 作为一个条件渲染,当他为true的时候才会渲染出当前的节点v-for指令 是基于一个数组来渲染列表 ,v-for 指令需要使用 item in items 形式的特殊语法,其中 items 是源数据数组或者对象,而 item 则是被迭代的数组元素的别名 在v-for的时候都会被要求设置Key值,而且每一个Key值都是独一无二的。2.优先级Vue2中v-for和v-if是可以一起用的因为v-for的优先级比v-if的高<div v-for="item in原创 2021-05-13 18:23:04 · 16831 阅读 · 10 评论 -
(一):vue3.x初探之v-model的详细使用
1.用于自定义组件时,v-model的prop和默认事件名更改了,并且移除了model选项//父组件<template> <div> <Child v-model="message" /> <div>绑定的值:{{message}}</div> </div></template>//子组件<template> <div> <input转载 2021-05-12 11:30:01 · 415 阅读 · 0 评论 -
vue2数据响应式的缺陷
<template> <div class="home"> <img alt="Vue logo" src="../assets/logo.png" /> <!-- <HelloWorld msg="Welcome to Your Vue.js App"/> --> <div> <p v-for="(item, index) in list" :key="index">原创 2021-05-11 17:39:17 · 979 阅读 · 0 评论 -
vue的router-view
different router the same component vue。真实的业务场景中,这种情况很多。比如我创建和编辑的页面使用的是同一个component,默认情况下当这两个页面切换时并不会触发vue的created或者mounted钩子,官方说你可以通过watch $route的变化来做处理,但其实说真的还是蛮麻烦的。后来发现其实可以简单的在 router-view上加上一个唯一的key,来保证路由切换时都会重新渲染触发钩子了。这样简单的多了。<router-view :key.原创 2021-04-23 14:22:31 · 279 阅读 · 0 评论 -
Vue无限滚动加载组件封装
vue组件的封装<template> <div class="infinite-list-wrapper" ref="scrollView" style=""> <ul class="list" v-infinite-scroll="load" infinite-scroll-disabled="disabled" > <!-- <li v-for="i in count" class="l原创 2021-04-21 15:40:24 · 597 阅读 · 0 评论 -
Vue数组去重并反转排序
原创 2021-04-21 15:14:26 · 619 阅读 · 0 评论 -
vue watch
watch监听对象要进行深度监听 deep:true原创 2021-04-14 16:47:42 · 75 阅读 · 0 评论 -
你真的了解Vue2.0的生命周期执行顺序吗?
探索1:生命周期在平级子组件和父组件中的执行顺序我首先创建了两个子组件:CompOne 和 CompTwo,分别在两个组件中写入了mounted方法和created方法。<template> <div> <h2>子组件1</h2> </div></template><script> export default { mounted原创 2021-04-08 14:58:37 · 573 阅读 · 0 评论 -
说说函数节流和防抖?有什么区别?如何实现?
一、是什么本质上是优化高频率执行代码的一种手段如:浏览器的 resize、scroll、keypress、mousemove 等事件在触发时,会不断地调用绑定在事件上的回调函数,极大地浪费资源,降低前端性能为了优化体验,需要对这类事件进行调用次数的限制,对此我们就可以采用throttle(防抖)和debounce(节流)的方式来减少调用频率定义节流: n 秒内只运行一次,若在 n 秒内重复触发,只有一次生效防抖: n 秒后在执行该事件,若在 n 秒内被重复触发,则重新计时一个经典的比喻:想原创 2021-04-07 16:02:34 · 189 阅读 · 0 评论 -
总结Vue性能优化方式及原理
一:使用计算属性 计算属性最大的一个特点就是它是可以被缓存的,这个缓存指的是只要它的依赖的不发生改变,它就不会被重新求值,再次访问时会直接拿到缓存的值,在做一些复杂的计算时,可以极大提升性能<template> <div>{{superCount}}</div></template><script> export default { data() { return { count: 1原创 2021-04-07 15:07:15 · 230 阅读 · 0 评论 -
vue slot 插槽里面传递事件 调用外层的函数
vue开发过程中会有很多相似的页面开发,所以我们就想着用插槽的办法 写一个模版组件在组件文件夹下新建文件 我命名为vSlot组件里面定义一个具名插槽 名字为head 这里捆绑了2个属性 data 跟done 其中done 是个方法<template> <div class="hello"> <slot name="head" :data="testData" :done="done"></slot> </div><原创 2021-04-06 18:16:59 · 2618 阅读 · 0 评论 -
HTML复选框设置为只读
这两种办法完美解决了复选框设置会变灰色的状况方法一<input type="checkbox" onclick="return false;"/>这是因为click事件返回的false会停止执行链的继续在javascript中放回false会阻止单击或键处理程序继续执行链。与复选框的状态无关方法二<input type="checkbox" onclick="this.checked=!this.checked;">这种方法您必须验证服务器上的数据,以确保数据没有改原创 2021-04-02 16:30:38 · 415 阅读 · 0 评论 -
element布局容器怎么占满屏幕
.homeWrap { position: absolute; top: 0; left: 0; width: 100%; height: 100%;}.main_container { height: 100%;}原创 2021-03-22 18:02:11 · 3294 阅读 · 4 评论 -
element表单提交跳转到未输入的input框
element表单提交跳转到未输入的input框这里我直接引用element表单提供的源码<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm"> <el-form-item label="活动名称" prop="name"> <el-input v-model="ruleForm.name"></el-inp原创 2021-03-18 11:57:50 · 891 阅读 · 0 评论 -
vue图片点击放大预览v-viewer
图片放大预览功能1、安装依赖npm install v-viewer --save2、全局引入(main.js内)import Viewer from 'v-viewer'import 'viewerjs/dist/viewer.css'Vue.use(Viewer)3、使用<viewer :images="photo"> //photo 一定要一个数组,否则报错 <img v-for="(src,in原创 2021-03-17 16:52:13 · 170 阅读 · 0 评论 -
Vue动态组件渲染
子组件封装动态切换的子组件一<template> <div> 我是多行文本框{{ config.name }} <div> <input type="text" /> </div> </div></template><script>export default { name: 'rx-textarea-config', props: { con原创 2021-03-16 16:59:26 · 921 阅读 · 0 评论 -
Vue脚手架中默认的margin怎么清除
# 问题情景开发中发现我的项目四周有白边,但是该清除的默认样式都清除了 # 问题原因vue脚手架中静态文件夹public中的index.html造成的 # 解决实现1. 找到vue脚手架中index.html页面<!-- 解决vue脚手架默认margin:8px问题 --><style> body { margin: 0; }</style>...原创 2020-11-27 11:21:32 · 1322 阅读 · 0 评论