vue
vue相关的一些知识点
温柔于心动
来点干货吧,直面问题答案
展开
-
vue2和vue3中 ref/refs 使用示例
举例的都是方法,参数的话是大同小异,可以自己动手试试!原创 2023-10-01 09:45:00 · 324 阅读 · 0 评论 -
vant 使用deep修改样式不好使解决方案
【代码】vant 使用deep修改样式不好使解决方案。原创 2022-11-19 17:57:41 · 1262 阅读 · 0 评论 -
svg修改图标颜色
我们可以在style中设置fill:#00A0FF。原创 2022-08-15 14:42:45 · 725 阅读 · 8 评论 -
vue页面文本禁止复制
vue页面文本禁止复制。原创 2022-08-05 10:05:38 · 2684 阅读 · 1 评论 -
前端网页自动刷新的3种方法
1.页面自动刷新把如下代码加入区域中。2.页面自动跳转把如下代码加入区域中。3.页面自动刷新js版。原创 2022-07-27 15:43:37 · 11364 阅读 · 1 评论 -
关闭页面时向后台发送消息
不管是刷新页面还是关闭页面,后台都能接收到前端发送过来的请求,完美实现需求。当用户代理成功把数据加入传输队列原创 2022-07-27 15:29:44 · 771 阅读 · 2 评论 -
vue 修改当前网页标题
vue 直接修改当前页面标题原创 2022-06-11 18:54:42 · 586 阅读 · 1 评论 -
鼠标移入标签上时展示所有内容
一般在文本做完超出...样式处理后,想要鼠标移入时提示所有内容可用此方法。<p title="全部内容">全部...</p>注:title里是要展示的所有内容,不限于P标签,很多标签都可以使用。原创 2022-04-13 11:52:41 · 2522 阅读 · 2 评论 -
Echarts图表变形与自适应解决方案
原因:是Echarts在初始化实例的时候,对应dom元素的宽高还没有确定。1. 监听对应dom元素,如果大小发生变化,调用resize()方法。let chartDom = document.getElementById('myChart');let myChart = echarts.init(chartDom);// 若dom尺寸变化,则resizeconst chartObserver = new ResizeObserver(() => { myChart.res.原创 2022-04-12 14:38:28 · 3346 阅读 · 4 评论 -
vue-treeselect插件
npm install @riophae/vue-treeselect --save //安装import Treeselect from '@riophae/vue-treeselect' //导入import '@riophae/vue-treeselect/dist/vue-treeselect.css' //导入components: { Treeselect } //定义<treeselect:options="orgData" //接口请求回来的数据fiel...原创 2022-03-23 15:04:31 · 1263 阅读 · 2 评论 -
节流防抖简化版
节流function throttle(fn, delay) { let last = 0 // 上次触发时间 return (...args) => { const now = Date.now() if (now - last > delay) { last = now fn.apply(this, args) } }}// 测试function task() { console.log('run task')}转载 2022-01-29 14:13:40 · 120 阅读 · 0 评论 -
Promise.all或者Promise.race处理并发请求
Promise.all处理请求时全部成功,才会成功,否则失败。顺序是从前到后Promise.race 处理请求时有一个请求成功,就会成功。哪个快就先返回哪个 模板: let 创建的变量 = 导入的接口组件.组件内封装的接口名字('上传的参数') let num1 = interfaceFile.role('aaa') let num2 = interfaceFile.role('bbb') Promise.all([num1, num2]).then(res => { /.原创 2022-01-24 16:54:57 · 1090 阅读 · 2 评论 -
regular 正则校验
const validateNumber = (rule, value, callback) => { //script中定义 if (!/^[.0-9]+$/.test(value)) { // /^[.0-9]+$/ 是正则 return callback(new Error('请输入数字')) } else { callback() } } ruleValidate: { //data - return中 'ubs_...原创 2022-01-19 15:04:59 · 616 阅读 · 1 评论 -
for...of判重
for (const item of this.duplicateRemoval) { if (item.user_id === sendData['user_id'] && item.cloud_resource_pool_id === sendData['cloud_resource_pool_id']) { this.$Message.success('请勿重复添加') retur...原创 2021-12-12 18:10:47 · 330 阅读 · 0 评论 -
mounted钩子函数中请求数据导致页面闪屏问题
其实就是加载时机问题,放在created里会比mounted触发早一点,如果在页面挂载完之前请求完成的话就不会看到闪屏了原创 2021-11-05 14:31:56 · 744 阅读 · 0 评论 -
v-html展示出来数据怎么修改样式
我们可以用/deep/穿透去实现<template> <div> <p class="text" v-html="data.msg"></p> </div></template><style scoped lang="scss"> .text /deep/{ display: flex; img{ float: left;原创 2021-10-20 09:40:45 · 515 阅读 · 0 评论 -
Vue绑定数据 绑定属性
<template> //视图 <div> <p>{{msg}}</p> //帮定数据 <img v-bind:src="logo" alt=""/> //绑定属性 <img :src="logo" alt=""/> //绑定属性简写 </div></template> <script> //业务逻辑export default { data().原创 2021-10-18 21:42:13 · 116 阅读 · 0 评论 -
props接收参数定义
props: { dzpImgList: { //字符串 type: String, default: '' }, dzpImgList: { //数值 type: Number, default: 0 }, dzpImgList: { //布尔值 type: Boolean, default: true }, dzpImgList: { //数组 t...原创 2021-10-13 15:31:54 · 659 阅读 · 2 评论 -
vue项目中接口api的封装
在utils下的axiosAPI.js在src下的api文件夹中创建每个页面的api在页面中可以直接使用了原创 2021-09-06 15:52:04 · 289 阅读 · 0 评论 -
vue项目中遇到的难点
input中type为number时 max-length 失效 解决:input type="tel" vue组件中click事件失效 解决:使用了bette-scroll插件做滚动。加.native也不好使,发现better-scroll的配置中没有设置 click:true,设置过之后click事件成功。 不同商品页,id变化,商品不变 监听$route变化,然后获取id重新去取数据。 修改完数据点击提交后,数据变了 页面数据没有更新 原因:因为v...原创 2021-09-03 17:50:47 · 4483 阅读 · 2 评论 -
el-input 禁止输入特殊字符
<el-input size="small" v-model="city" placeholder="请输入" @blur="addCity(scope.$index)" @keyup.native="btKeyUp" @keydown.native="btKeyDown"></el-input>原创 2021-08-26 10:44:46 · 1090 阅读 · 3 评论 -
Element-ui 设置弹窗取消关闭
在main.js中配置如下代码即可ElementUI.Dialog.props.closeOnClickModal.default = false; Vue.use(ElementUI)原创 2021-08-15 08:07:17 · 1513 阅读 · 0 评论 -
TS中的数据类型
typescript中为了使写的代码更加规范,更有利于维护,增加了类型校验,ts中提供了以下类型布尔类型(boolean) true false var flag:boolean = true //必须指定类型flag = 'str' //错误写法flag = flase //正确写法 只能复制布尔型数字类型 (number) var a:number = 123 //必须指定类型a ...原创 2021-07-25 10:49:14 · 723 阅读 · 0 评论 -
TS安装及编译
安装:开始的前提 要安装好node.js首先打开dos命令 npm install -g typescript 或者 cnpm install -g typescript验证是否安装成功 重新打开dos命令 tsc helloworld.ts编译:因浏览器不支持ts语法所以需要编译成es5新建index.ts文件 , cd进入目录 输入 tsc index.ts 回车 目录里就会多个index.js //代码编写还是在ts里在index.ts里写完代码之后...原创 2021-07-24 22:43:39 · 675 阅读 · 1 评论 -
window.location.href打开新窗口
window.location.href="URL"; 表示重新定向到新页面,同时刷新打开的这个页面;例子:window.location.href="http://www.baidu.com"//也可以直接放接口window.open("URL",'top'); 只是表示打开这个页面,并不是打开并刷新页面;...原创 2021-07-24 22:05:59 · 30245 阅读 · 2 评论 -
选项卡(精致版)
<template> <div class="box"> <!--省市区--> <div class="addBody" v-show="flag"> <ul > <li v-for="(item,index) in head" :key="index" v-bind:class="{act:active == index}" @click="active = index">{{ite.原创 2021-07-24 16:37:42 · 130 阅读 · 0 评论 -
vue 强制更新视图(视图不跟新的解决方案)
方案一:this.$set(this.obj,'key','value') //把数据放进去方案二:利用Object.assign({},this.obj)创建新对象方案三:this.$forceUpdate(); //可以直接使用**这个是强制更新 但不推荐使用调用强制更新方法this.$forceUpdate()会更新视图和数据,触发updated生命周期。...原创 2021-07-24 16:29:23 · 1244 阅读 · 0 评论 -
vue2组件的书写方法
<template> <div> //页面基本布局 </div></template><script>export default {components: { },//导入的子组件要在此注册 name: '',//当前组件的名字 data() { return {};//可以定义数据及变量 }, mounted() {},//页面初始化显示数据调用 methods: {},//存放方法.原创 2021-06-22 16:42:15 · 642 阅读 · 0 评论 -
Vue2 Vue3中scoped样式穿透修改样式
在vue组件样式中使用scoped,相当于将样式私有化,即样式只用于与当前组件。通过该属性,可以使得组件之间的样式不互相污染。原创 2021-05-15 17:28:59 · 2172 阅读 · 0 评论 -
2021前端面试题总结(精简版)
vuev-if和v-show的区别 v-if和v-for的优先级微信小程序微信小程序生命周期 / 页面的生命周期 小程序开发与网页开发的区别 微信小程序优化原创 2021-05-08 14:07:40 · 1298 阅读 · 10 评论 -
什么是重绘和重排
重绘不一定需要重排(比如颜色的改变),重排必然导致重绘(比如改变网页位置)重排(Reflow):当渲染树的一部分必须更新并且节点的尺寸发生了变化,浏览器会使渲染树中受到影响的部分失效,并重新构造渲染树。重绘(Repaint):是在一个元素的外观被改变所触发的浏览器行为,浏览器会根据元素的新属性重新绘制,使元素呈现新的外观。比如改变某个元素的背景色、文字颜色、边框颜色等等如何引发重排1.添加、删除可见的dom2.元素的位置改变3.元素的尺寸改变(外边距、内边距、边框厚度、宽高、等.原创 2021-05-07 11:51:26 · 664 阅读 · 0 评论 -
vue自定义指令
全局: vue.directive:{"",{}}局部:directives:{指令名:{钩子函数}}bind(){} 只调用一次,指令第一次绑定到元素时调用inserted(){} 被绑定元素插入父节点时调用update(){} 被绑定元素所在的模板更新时调用,而不论绑定值是否变化componentUpdated(){} 被绑定元素所在模板完成一次更新周期时调用unbind(){}只调用一次, 指令与元素解绑时调用...原创 2021-05-07 11:46:24 · 161 阅读 · 0 评论 -
vue中的filter
过滤器是实现变量的格式化输出 。过滤器分为局部过滤器还有全局过滤器全局过滤器 是在多个实例中可以使用的过滤器 语法: Vue.filter(“名”,function(value){ // value是调用过滤器的属性的值 }) 调用: 在v-bind中或者{{ 属性|过滤器名}}局部过滤器 只是在当前的组件或者实例中使用 filters:{ 名:function(val){}}注意:过滤器可以串联 但是后面的肯定是以前面的为基础 变量|过滤器1|过滤器2...原创 2021-05-06 21:42:11 · 386 阅读 · 0 评论 -
Vue 虚拟Dom diff算法
虚拟dom是利用js描述元素与元素的关系,好处:是可以快速的渲染和高效的更新元素,提高浏览器的性能diff算法: 基础虚拟DOM完成节点更新的方法 用js对象来表示真是的DOM树结构,创建一个虚拟DOM对象 当数据发生改变的时候,创建一个新的js的虚拟DOM对象 比较新旧对象的差异,记录下来,最终更新到真实的DOM树结构上。 总结:总的来说就是减少DOM,重绘和回流。...原创 2021-05-06 21:38:31 · 243 阅读 · 0 评论 -
vue常用修饰符
.stop 阻止事件冒泡 .capture 设置事件捕获 .self 只有当事件作用在元素本身才会触发 .prevent 阻止默认事件,比如超链接跳转 .once 事件只能触发一次.native 触发js原生的事件 .number 把文本框的内容转换为数字 .trim 去除文本框左右空格.keyup.enter .keyup.space...原创 2021-05-06 21:25:53 · 178 阅读 · 0 评论 -
vue中methods,computed, watch 的区别
computed 具有缓存性,依赖于属性值,只有属性发生改变的时候才会重新调用methods 是没有缓存的,只要调用,就会执行,一般结合事件来使用watch 没有缓存性 监听data中的属性 属性值只要发生变化就会执行 可以利用他的特性做一些异步的操作...原创 2021-05-06 21:20:58 · 214 阅读 · 0 评论 -
keep-alive 作用以及应用场景
keep-alive是Vue提供给我们一个内置组件,作用:保存我们路由切换时组件的状态 , 比如列表页面进入详情,我们想保存列表滚动的位置,我们就可以 使用keep-alive保存列表页面的滚动位置。组件使用keep-alive以后会新增两个生命周期 actived() 组件激活时触发 deactived() 组件销毁时触发有两个参数 include - 包裹的组件名会被缓存 exclude 包裹的组件名都不会被缓存...原创 2021-05-06 21:17:00 · 727 阅读 · 0 评论 -
vue中prop 验证 和默认值
props:会接收不同的数据类型,常用的数据类型的设置默认值的写法例如:Number, String, Boolean, Array, Function, Objectprop 数据单项传递,父不影响子,子不影响父不能再组件中直接修改prop传递的值,Vue会发出警告...原创 2021-05-06 21:13:06 · 563 阅读 · 0 评论 -
vue常用的指令
v-model 实现双向数据绑定v-for 循环数组v-show 显示内容 ,通过display=block/none来控制元素隐藏出现v-hide 隐藏内容 同上v-if 显示与隐藏v-else-if 必须和v-if连用v-else 必须和v-if连用 不能单独使用 否则报错 模板编译错误v-bind 动态绑定 作用: 及时对页面的数据进行更改v-on:click 给标签绑定函数,可以缩写为@, 函数必须写在methods里面v-text 解析文本v-html 解析html标签v..原创 2021-05-06 20:46:37 · 179 阅读 · 0 评论 -
梦学谷管理系统总结
团队协作/开发规范/统一开发规范命名规范 (方法名,变量名 。。)封装规范 (功能,参数,返回值,如何使用 。。。)项目规范(主要模块,功能模块 ,组件,路劲,位置。。。)开发项目每日进度例会 / 检查进度汇报项目拆分领取任务时间预估小结:梦学谷项目这里是团队开发的,我负责的模块是商品管理,首先就是API的封装,和拦截器的配置API封装import axios from 'axios'axios.defaults.baseURL = "http:/原创 2021-05-05 18:26:14 · 1042 阅读 · 4 评论