vue2
vue2
都挺好,刚刚好
慢下来反而会更快,慢就是快,快就是慢。
展开
-
vue的孙组件获取祖组件数据的方法(this.$parent)
vue的孙组件获取祖组件数据的方法原创 2023-09-20 10:39:14 · 429 阅读 · 0 评论 -
Vue组件传值-设置默认值
Vue组件传值-设置默认值原创 2023-09-15 17:34:53 · 554 阅读 · 0 评论 -
[vue] await nextTick();
[vue] await nextTick();原创 2023-09-07 17:12:08 · 235 阅读 · 0 评论 -
Vue动态添加路由(addRoutes) 校验用户是否登录且排除白名单页面
Vue动态添加路由(addRoutes) 校验用户是否登录且排除白名单页面转载 2023-09-01 11:26:33 · 135 阅读 · 0 评论 -
v-loading.fullscreen.lock
v-loading.fullscreen.lock原创 2023-08-23 15:06:30 · 891 阅读 · 0 评论 -
vue calc的使用
vue calc的使用原创 2023-08-08 17:36:28 · 261 阅读 · 0 评论 -
vue全局遮罩
vue全局遮罩原创 2023-07-31 22:50:00 · 1219 阅读 · 0 评论 -
vue中this.$nextTick()的用法
vue中this.$nextTick()的用法转载 2023-07-23 15:48:07 · 76 阅读 · 0 评论 -
Element UI下拉列表el-option中的key、value、label含义
Element UI下拉列表el-option中的key、value、label含义转载 2023-05-31 16:07:21 · 725 阅读 · 0 评论 -
el-option在项目中的使用
el-option原创 2022-07-25 15:17:51 · 250 阅读 · 0 评论 -
vue 文件中 name 的作用
vue 文件中 name 的作用原创 2023-05-30 09:16:27 · 104 阅读 · 0 评论 -
Vue之keep-alive
Vue之keep-alive转载 2023-05-18 10:32:20 · 2782 阅读 · 0 评论 -
setStorage 与setStorageSync的区别,什么时候使用setStorage 什么时候使用setStorageSync
setStorage 与setStorageSync的区别,什么时候使用setStorage 什么时候使用setStorageSync原创 2023-04-11 16:56:47 · 899 阅读 · 0 评论 -
Vue刷新页面的三种方式
Vue刷新页面的三种方式原创 2023-04-11 10:15:01 · 949 阅读 · 0 评论 -
vue的style标签里面设置变量
vue的style标签里面设置变量原创 2022-10-08 22:05:54 · 6292 阅读 · 0 评论 -
vue事件中传入$event,使用event.target和event.currentTarget有什么区别?
event.target指向事件发生时的元素event.currentTarget指向事件绑定的元素小程序开发 event对象中 target和currentTarget 属性的区别。```css首先本质区别是:event.target返回触发事件的元素event.currentTarget返回绑定事件的元素p包含在div内在outer上点击时,target跟currentTarget是一样的,都是div,而在inner上点击时,e.target是p、e.currentTarget是di原创 2021-09-05 16:59:45 · 1662 阅读 · 0 评论 -
父子组件通信的属性验证 validator
父子组件通信的属性验证 validator原创 2022-08-05 15:25:31 · 328 阅读 · 0 评论 -
组件通信 $parent/$children 与 ref
$parent/$children 与 ref转载 2022-07-29 12:02:58 · 299 阅读 · 0 评论 -
vue组件通信 $attrs/$listeners
vue组件间通信六种方式(完整版)转载 2022-07-29 11:37:37 · 287 阅读 · 0 评论 -
beforeDestroy与destroyed的使用
beforeDestroy与destroyed的使用原创 2022-07-29 09:38:45 · 2217 阅读 · 0 评论 -
vue 深度选择器 >>> 或 /deep/ 或 ::v-deep
vue 深度选择器 >>> 或 /deep/ 或 ::v-deep转载 2022-06-01 14:26:56 · 478 阅读 · 0 评论 -
vue之绑定类(对象形式)
原创 2022-05-22 14:25:56 · 512 阅读 · 0 评论 -
vue 两个方法 按顺序执行
new Promise(res=>{ setTimeout(()=>{ console.log(1) res() },1)}).then(res=>{ console.log(2)})原创 2022-05-10 09:24:16 · 2594 阅读 · 0 评论 -
vue调试工具vue-devtools的安装
1.vue-detools是什么1.vue-devtools是一款基于chrome浏览器的插件,用于vue应用的调试2.这款vue调试神器可以极大地提高我们的调试效率。帮助我们快速的调试开发vue应用。1.第一步:我们可以先从github上找到vue-devtools的项目,下载到本地。下载vue-devtools链接。克隆方法:git clone https://github.com/vuejs/vue-devtools.git2.第二步:解压下载好的文件,进入到vue-devto转载 2022-04-29 13:57:03 · 1499 阅读 · 1 评论 -
vue项目使用this.$forceUpdate();强制渲染页面
解决vue this.$forceUpdate() 处理页面刷新问题(v-for循环值刷新等)问题描述:在使用Vue框架开发时,在函数中改变了页面中的某个值,在函数中查看是修改成功了,但在页面中没有及时刷新改变后的值:解决:**运用 this.forceUpdate()强制刷新∗∗∗∗添加this.forceUpdate()强制刷新****添加this.forceUpdate()强制刷新∗∗∗∗添加this.forceUpdate();进行强制渲染,效果实现。搜索资料得出结果:**因为数据层次原创 2022-04-29 12:09:07 · 567 阅读 · 0 评论 -
vue class&style 绑定与computed
1. class绑定<div :class="['el-notification', customClass, horizontalClass]"</div> computed: { typeClass() { return this.type && typeMap[this.type] ? `el-icon-${ typeMap[this.type] }` : ''; }, horizontalClass原创 2022-04-29 12:05:52 · 836 阅读 · 0 评论 -
Vue项目中使用 .sync修饰符与$emit(update:xxx)
Vue项目中使用 .sync修饰符与$emit(update:xxx)我们常见的父与子组件之间的通信,一般都是父组件自定义属性,子组件通过子props接收,如果想修改父组件传递过来的变量,一般使用this.$emit(事件名,参数,…)的形式进行事件提交.sync是vue中用于实现简单的“双向绑定”的语法糖..sync修饰符的作用vue的prop是单向下行绑定:父级的prop的更新会向下流动到子组件中,但是反过来不行可是有些情况,我们需要对prop进行“双向绑定”。这个时候,就可以用.s转载 2022-04-29 12:04:58 · 553 阅读 · 0 评论 -
vue项目.sync的使用
1.组件中使用控制显示与隐藏1.首先来到父组件中<VersionWindow :visible.sync="visible" @renew="handleRenew"></VersionWindow>data中声明visible: true2.然后是子组件中接受数据<view class="win-dialog" v-if="visible">props: { visible:{ type: Boolean, default:false原创 2022-04-27 13:43:17 · 1256 阅读 · 0 评论 -
vue通过class绑定来控制显示不同图片
1.HTML<div class="header" :class="{'bg1':header1,'bg2':header2}">2.style<style lang="scss" scoped>@import './DataCenterStyle.scss';.bg1 { background-image: url('../../assets/images/bigScreen/top.png');}.bg2 { background-image: url('原创 2022-04-27 11:34:58 · 373 阅读 · 0 评论 -
vue之style样式处理
1.对象语法<div v-bind:style=" {color: activecolor, fontsize: fontsize } "></div>2.数组语法<div v-bind: style=" [ basestyles,overridingstyles] "></div>3.示例<!DOCTYPE html><html lang="en"><head> <meta charse原创 2022-04-27 11:31:29 · 833 阅读 · 0 评论 -
:visible.sync和v-if的搭配使用原理
<!-- :visible指的是属性绑定,表示弹框的显示隐藏,值为true显示 .sync指同步动态双向的来表示visible的值,当弹窗发生变化同步修改visible的值 当与v-if搭配使用时,即当退出弹框时会销毁子组件的变量,实现子组件初始化--> <el-drawer title="数据信息" :visible.sync="drawer" size="35%" :wrapperClosable="false.原创 2022-04-27 11:25:27 · 955 阅读 · 0 评论 -
vue class绑定对象和数组简化
1.HTML <div v-bind:class='arrClasses'>class绑定值得简化操作-数组</div> <div v-bind:class='objClasses'>class绑定值得简化操作-对象</div>2.style <style> .active { border: 1px solid red; width: 100px;原创 2022-04-27 11:21:28 · 320 阅读 · 0 评论 -
vue class样式绑定中对象语法跟数组混合使用
1.HTML<div id="app"> <div class="static" v-bind:class="['test',{ active: isActive, 'text-danger': hasError }]"> </div></div>2.CSS<style>.active { width: 100px; height: 100px; background: green;}.text-danger原创 2022-04-27 11:09:08 · 330 阅读 · 0 评论 -
vue之class绑定数组形式
1.html结构 <div id="app"> //这里填写的是data里的key值 <div :class="[activeClass,errorClass]">测试样式</div> <button @click="handle">切换</button> </div> 2.style <style> .active {原创 2022-04-27 10:58:51 · 1263 阅读 · 0 评论 -
vue中class绑定之对象形式
比如我们要实现点击一次为红色,再点击还原,再点击红色,再点击还原,如此反复的效果给div绑定一个class,这个class是否显示取决于isActivated,如果isActivated是false那就不显示,如果是true就显示,但是这个demo有个问题,当点了一次变红后就一直是红色,换不了原了,因此代码要修改 <div id="app"> <div @click="handleClick" :class="{activated:isActivated}">原创 2022-04-27 10:53:32 · 1697 阅读 · 0 评论 -
vue项目引入图片
1.html2.data中引入alarmImg: require("@/assets/screen/alarm.png")3.第三种写法 let img = new Image(); img.src = require("./assets/imgs/drag.png");3.第四种写法 <img :src="require('@/assets/img/alarm/alarm.png')" alt="图片" />...原创 2022-04-25 11:26:47 · 857 阅读 · 0 评论 -
vue组件里定时器销毁问题
我在a页面写一个定时器,让他每秒钟打印一个1,然后跳转到b页面,此时可以看到,定时器依然在执行。这样是非常消耗性能的。方案1(推荐):该方法是通过$once这个事件侦听器器在定义完定时器之后的位置来清除定时器。const timer = setInterval(() => { // 定时器操作}, 1000)// 通过$once来监听定时器,在beforeDestroy钩子可以被清除。this.$once('hook:beforeDestroy', () => {转载 2022-04-14 22:57:07 · 2733 阅读 · 0 评论 -
vue父组件如何调用子组件里面的方法
在vue里,父组件要调用子组件里边定义的方法,可以通过ref属性来获取到子组件的方法并执行,下面直接贴上子组件和父组件的代码吧!父组件代码:<template> <div class="parent"> <div class="parent-wrapper"> <button @click="parentMethod">我是父组件的按钮,但是我可以调用子组件的方法</button> </div>转载 2022-03-26 17:16:17 · 16383 阅读 · 0 评论 -
计算属性传参
vue中computed计算属性无法直接进行传参如果有传参数的需求比如说做数据筛选功能可以使用闭包函数(也叫匿名函数)实现普通计算属性使用<div>{{newChannel}} {{tipTimeFormat}}</div> newChannel(){ switch(this.channel){ case 1: return '右摄像头'; case 2: return '后摄像头';原创 2022-03-07 22:09:01 · 3990 阅读 · 0 评论 -
VUE之v-if语句多个条件判断时的写法
v-if满足某个条件condition = 0时,我们常见写法为:v-if="condition === 0"假如我想同时满足多个条件时,要怎么写呢?[ 普通写法]v-if="condition === 0 || condition === 1 || condition === 2"[ 简洁写法]v-if="[0, 1, 2].includes(condition)"<!--括号里可以是字符串和数字-->[ 复杂写法]标签中: v-if="matchState转载 2022-02-23 12:18:35 · 12122 阅读 · 1 评论