写点什么

vue 遇到的坑,linux 网络编程 pdf 百度云

作者:Java高工P7
  • 2021 年 11 月 10 日
  • 本文字数:1336 字

    阅读完需:约 4 分钟

created() {


this.intervalid = setInterval(() => {


this.layerError = "";


this.Timer = null;


}, 100000);


}


beforeDestroy( ){


//我通常是把 setInterval( )定时器赋值给 this 实例,然后就可以像下面这么暂停。


clearInterval(this.intervalid);


}


2.Vue 路由拦截浏览器后退实现草稿保存类似需求


场景一 :为了防止用户突然离开,没有保存已输入的信息。


解决方法 :


//在路由组件中:mounted(){},


beforeRouteLeave (to, from, next) {


if(用户已经输入信息){


//出现弹窗提醒保存草稿,或者自动后台为其保存


}else{


next(true);//用户离开


}


}


3.自定义组件添加 click 等事件不生效


场景一 :一些自定义组件,需要额外添加一些事件来实现一些特定需求


<template>


<el-progress type="circle" :percentage=“0" @click=“stopProgress”></elprogress>


</template>


<script>


export default {


methods:{


stopProgress() {


console.log('停止')


}


}


}


</script>


解决方法:使用.native 修饰符


<template>


<el-progress type="circle" :percentage=“0" @click.native=“stopProgress”></el-progress>


</template>


<script>


export default {


methods:{


stopProgress() {


console.log('停止')


}


}


}


</script>


4.手动操控自定义组件


场景一 :一些自定义组件,需要去获取组件对象进行一些其他的 Dom 操作


解决方法 :使用 ref 属性暴露组件获取句柄


<template>


<el-progress type="circle" :percentage="O" ref="progress"></el-progress></template>


<s


《Android学习笔记总结+最新移动架构视频+大厂安卓面试真题+项目实战源码讲义》
浏览器打开:qq.cn.hn/FTe 免费领取
复制代码


cript>


this.$refs.progress //组件对象实例, 可以手动调用组件的内置方法和属性


this.el //组件 对象的最外层 dom 元素


</script>


5.深度作用选择器


场景一 : scoped 的样式,希望影响到子组件的默认样式


在样式中设置完 scoped 在浏览器解析为如下图这样,a 是个 div,a div 里面包含一个组件里面解析完了 div 的样式名字为 b,想在父组件影响到子组件的默认样式。解决方法:


<style scoped>


.a >>> .b { /* ... */ }


</style>


//有些像 Sass 之类的预处理器无法正确解析>>>。这种情况下你可以使用/deep/操作符取而代之- - - -这是一个>>>的别名,同样可以正常工作。 <style scoped lang=“scss”>


.a /deep/ .b { /* ... */ }


</style>


6.Vue 数组/对象更新视图不更新


场景一 :很多时候我们习惯于这样操作数组和对象


data() {


return {


arr: [1,2,3],


obj:{


a: 1,


b: 2


}


};


},


// 数组更新视图不更新


this.arr[0] = 'OBKoro1';


this.arr.length = 1;


console.log(arr);// ['OBKoro1'];


// 数据更新,对象视图不更新


this.obj.c = 'OBKoro1';


delete this.obj.a;


console.log(obj); // {b:2,c:'OBKoro1'}


解决方法 :


this. $set(你要改变的数组/对象,你要改变的位置/key,你要改成什么 value)


数组原生方法触发视图更新( vue 官网可查):


整体替换数组/对象


7.Vue Filters 过滤器的使用


场景一 :常见的数据文本的格式化


<div>{{ message | DateFormat }}</div> //展示正确时间


<div v-bind:id="rawId | formatId"></div>


Demo:一个日期过滤器返回 yyyy- MM-ddhh:mm:ss 的样式


引入一个提前写好日期格式化的 js import dayjs from ‘dayjs';


export default {


data() {


return {


//时间毫秒


message:18324798324789


}


},

用户头像

Java高工P7

关注

还未添加个人签名 2021.11.08 加入

还未添加个人简介

评论

发布
暂无评论
vue遇到的坑,linux网络编程pdf百度云