03 2022 档案
摘要：样式穿透又叫做深度作用选择器。使用场景：比如我们在vue项目中使用了第三方UI组件，但是由于需求，必须修改组件中未提供的样式，比如以下案例，这时要用到样式穿透解决。 环形进度条的文字颜色修改案例： 1、修改前： <van-circle v-model:current-rate="currentRat
阅读全文
摘要：关于scope，我们都知道它的作用是让样式只在本组件中生效，不影响其它组件。 但是它的原理是什么呢，接下来我们就通过案例截图展示一下： 当我们使用了scope的时候，会给元素节点新增自定义属性：data-xx，然后在css中通过属性选择器的方式给元素添加样式，这就是scope的原理。
阅读全文
摘要：我们都知道nextTick是用来实现异步更新dom的。下边通过小案例一步步分析。 案例之前先插入一段内容，来证明nextTick确实是异步任务。 没毛病，先执行同步，后执行了异步nextTick。 1、当我们设置 ref，通过this.$refs修改dom元素的内容时，会输出什么？ <button
阅读全文
摘要：场景：在 App.vue文件中通过watch全局监听本地中是否有 token，若没有，则跳转到登录页；若有，则return。 1 app.vue代码 2 3 watch: { 4 $route() { 5 if (!localStorage.getItem("token")) { 6 this.$r
阅读全文
摘要：结果是：http://localhost:8100/#/ 改变为 http://localhost:8100/?#/ 导致路由跳转出现问题。 原因：这里是 form 表单，点击了button 按钮，触发了他的默认事件，就是触发了提交这个行为。 解决方案：使用@click.prevent 阻止默认事件
阅读全文
