随笔分类 - vue
vue
摘要：一、需求：下拉框支持远程搜索，根据用户输入字符，调接口获取数据渲染到下拉列表上，供用户选择。 二、为什么要做 防抖控制？在做远程搜索时，如果每输入1个字就调用1次接口，就会频繁地掉接口请求数据，假设我们的查询是"12345"，不考虑用户输入错误的情况，至少会请求5次。很明显这样频繁地查询数据库是不合
阅读全文
摘要：1. axios全局设置网络超时 axios.defaults.timeout = 30 * 1000; // 30s 2. 单独对某个请求设置网络超时 2. 单独对某个请求设置网络超时 axios.post(url, params, {timeout: 1000}) .then(res => {
阅读全文
摘要：1. 前言 nextTick 是 Vue 中的一个核心功能，在 Vue 内部实现中也经常用到 nextTick。在介绍 nextTick 实现原理之前，我们有必要先了解一下这个东西到底是什么，为什么要有它，它是干嘛用的。 2. nextTick到底是什么 官方文档对 nextTick 的功能如是说明
阅读全文
摘要：最近在使用vue-router的beforeEach钩子时候遇到了一个问题，就是在beforeEach()中设置好判断条件后出现了无限循环的问题代码如下： // isLogined 用来判断用户是否已登录 router.beforeEach((to, from, next) => { if(isLo
阅读全文
摘要：项目需求 有个多路搜索框（从服务器搜索），可支持同时根据关键字搜索科室和医生，页面左侧是科室树，右侧是医生列表表格，当选择关键字搜索结果的某个科室（可获取到科室id），需要触发选中左侧的科室节点，并查询出相应的科室所有医生信息。所以这个不适合直接采用element-ui的节点过滤搜索框来过滤节点，而
阅读全文
摘要：<el-form v-on:submit.native.prevent></el-form> 在 form 表单中，加上 v-on:submit.native.prevent
阅读全文
摘要：1. vue-router 在 Vue 中的生命周期： 这是 vue 生命周期的图： 在路由中分别定义A页面和B页面 A页面: <template> <div> <router-link to="/test2">去B页面</router-link> </div> </template> <scrip
阅读全文
摘要：一、缓存淘汰策略： 由于 <keep-alive> 中的缓存优化遵循 LRU 原则，所以首先了解下缓存淘汰策略的相关介绍。 由于缓存空间是有限的，所以不能无限制的进行数据存储，当存储容量达到一个阀值时，就会造成内存溢出，因此在进行数据缓存时，就要根据情况对缓存进行优化，清除一些可能不会再用到的数据。
阅读全文
摘要：1. router-link： <router-link> 比起写死的 <a href="..." rel="external nofollow" rel="external nofollow" > 会好一些，理由如下： 无论是 HTML5 history 模式还是 hash 模式，它的表现行为一致
阅读全文
摘要：问题描述：input 输入框， 绑定计算属性时，没法双向响应，可以和value绑定，再通过input事件，获取dom的value。 解决办法1： 用computed,不用v-model 单号： <el-input id="orderNumValue" :value.trim="orderNum" p
阅读全文
摘要：Vue Router 是Vue官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。vue-router 默认 hash 模式，还有一种是history模式。 hash模式 hash模式的工作原理是hashchange事件，可以在window监听hash的变化。我们在u
阅读全文
摘要：vuex 中，action 及 mutation 均为操作数据的作用而存在，既然二者均可改变数据，为什么要分成两个方法来处理呢，因为： Mutation 必须是同步函数 现在想象，我们正在 debug 一个 app 并且观察 devtool 中的 mutation 日志。每一条 mutation 被
阅读全文
摘要：一、真实DOM和其解析流程？ 浏览器渲染引擎工作流程都差不多，大致分为5步，创建DOM树——创建StyleRules——创建Render树——布局Layout——绘制Painting 第一步，用HTML分析器，分析HTML元素，构建一颗DOM树(标记化和树构建)。 第二步，用CSS分析器，分析CSS
阅读全文
摘要：前言 Vue-Router导航守卫 在本期文章中，我将为大家梳理弄明白以下几个事情: 1:导航守卫的执行顺序是怎么样的？ 2:导航守卫中的next的用处？ 3:为什么afterEach守卫没有next？ 4:beforeEach是否可以叠加？ 5:路由跳转经历了哪几部分？ 正文 1、transiti
阅读全文
摘要：可以使用 v-cloak 指令设置样式，这些样式会在 Vue 实例编译结束时，从绑定的 HTML 元素上被移除。 当网络较慢，网页还在加载 Vue.js ，而导致 Vue 来不及渲染，这时页面就会显示出 Vue 源代码。我们可以使用 v-cloak 指令来解决这一问题。 html： <div id=
阅读全文
摘要：之前的做法一直是在 created 钩子之后手动调用一次 后来在翻阅文档的时候发现一个属性 immediate 这样在初始化的时候也会触发 ——》该回调将会在侦听开始之后被立即调用
阅读全文
摘要：Vuex是一个专为Vue服务，用于管理页面数据状态、提供统一数据操作的生态系统。它集中于MVC模式中的Model层，规定所有的数据操作必须通过 action - mutation - state change 的流程来进行，再结合Vue的数据视图双向绑定特性来实现页面的展示更新。统一的页面状态管理以
阅读全文
摘要：本文由浅入深观摩vue-router源码是如何通过hash与History interface两种方式实现前端路由，介绍了相关原理，并对比了两种方式的优缺点与注意事项。最后分析了如何实现可以直接从文件系统加载而不借助后端服务器的Vue单页应用。 随着前端应用的业务功能越来越复杂、用户对于使用体验的要
阅读全文
摘要：几种通信方式无外乎以下几种： Prop（常用） $emit (组件封装用的较多) .sync语法糖 （较少） $attrs & $listeners (组件封装用的较多) provide & inject （高阶组件/组件库用的较多） slot-scope & v-slot （vue@2.6.0+）
阅读全文
摘要：一、v-model： 先上段简单的 vue 代码： 以上是我们最常见的 input 使用 v-model 的一段代码。现在我们将代码修改如下： 改造后的代码可以实现和改造之前一样的双向数据绑定的效果，但是改造之前的示例示例代码，改造之后的代码主要修改了两个地方： 1、将 input 标签上的 v-m
阅读全文
浙公网安备 33010602011771号