![](https://img-blog.csdnimg.cn/20201014180756754.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
Vue框架
more名奇妙
青山不改,绿水长流。
展开
-
vue3 动态监听浏览器窗口变化
去监听这个 属性值的变化,如果发生变化则讲这个 val 传递给 this.screenWidth。在 vue mounted 的时候 去挂载一下 window.onresize 方法。这样screenWidth就跟随浏览器的窗口大小动态变化了。定义一个属性记录宽度。原创 2023-01-04 11:50:38 · 8593 阅读 · 0 评论 -
vue项目中,el-input type=“number“可以输入字母e . -的问题解决
input的v-model修改为v-model.number,type修改为tel,input事件用字符串的replace()方法将非数字的内容替换为空即可,然后input就只可以输入正整数了。原创 2022-12-29 17:07:16 · 3426 阅读 · 1 评论 -
给data里面的变量增加属性
【代码】给data里面的变量增加属性。原创 2022-12-28 15:46:27 · 151 阅读 · 0 评论 -
Vue2的12种组件通信
要注意的是 provide 和 inject 传递的数据不是响应式的,也就是说用 inject 接收来数据后,provide 里的数据改变了,后代组件中的数据不会改变,除非传入的就是一个可监听的对象。可以帮我们实现父组件向子组件传递的数据的双向绑定,所以子组件接收到数据后可以直接修改,并且会同时修改父组件的数据。如果在子组件上,引用的指向就是子组件实例,然后父组件就可以通过 ref 主动获取子组件的属性或者调用子组件的方法。子组件通过派发事件的方式给父组件数据,或者触发父组件更新等操作。原创 2022-10-27 22:11:55 · 901 阅读 · 0 评论 -
vue项目部署时路由加前缀
1.在config / index 文件里修改dev(npm run dev本地启动项目时)和build(npm run build 打包时)下的 assetsPublicPath:”/前缀”2.在npm run build打好的dist包里 ,/dist/config/index.js文件中修改 [‘domain’]=“/前缀” 也可以。router.js里:export default new Router({ base:”/前缀" , })给路由加前缀:而且路由模式用的是hash,原创 2022-10-27 21:52:14 · 2117 阅读 · 1 评论 -
nextTick的作用和使用场景
第一种:有时需要根据数据动态的为页面某些dom元素添加事件,这就要求在dom元素渲染完毕时去设置,但是created与mounted函数执行时一般dom并没有渲染完毕,所以就会出现获取不到,添加不了事件的问题,这回就要用到nextTick处理。第二种:在使用某个第三方插件时 ,希望在vue生成的某些dom动态发生变化时重新应用该插件,也会用到该方法,这时候就需要在 $nextTick 的回调函数中执行重新应用插件的方法,例如:应用滚动插件better-scroll时。原创 2022-10-26 21:35:17 · 795 阅读 · 0 评论 -
computed、methods、watch区别
3.计算属性在第一次使用时的结果会缓存起来,直到属性中依赖的data数据发生变化计算属性的结果才会重新求值。2.如果计算属性用到了data中的数据,当data数据发生变化时,就会立即重新计算这个计算属性的值。在computed中,属性有一个get方法和一个set方法,可以看作是 computed 和 methods 的结合体;1. 计算属性在使用时不需要加(),直接写名称即可。methods 方法表示一个具体的操作,主要书写业务逻辑;4.如果computed属性的。原创 2022-10-26 20:50:35 · 310 阅读 · 0 评论 -
vue函数式组件
vue函数式组件是一个不包含状态和实例的组件;该组件不支持响应式,并且不能通过this关键字引用,用于定义没有响应数据,也不需要有任何生命周期的场景,只接受一些props来显示组件。原创 2022-10-19 15:13:59 · 487 阅读 · 0 评论 -
自定义指令
属性名为自定义指令名,值为对象,内容为各个阶段执行的函数(钩子函数和参数同上)。-update(),所在组件的VNode跟新时调用,可能触发多次。oldValue,指令绑定的前一个值,仅在update()和componentUpdated()钩子中使用。-bind(),只调用一次,指令在第一次绑定到元素身上时调用。-inserted(),被绑定元素插入到父节点时调用(父节点存在即可调用,不必存在于dom中)。value,指令的绑定值。第一个参数:永远是el,表示绑定此自定义指令的元素,是个元素的js对象。原创 2022-10-13 19:36:51 · 362 阅读 · 0 评论 -
异步更新是如何完成的
5.flushCallbacks()遍历callbacks的数据执行每一个callbacks函数,在callbacks数组中调用传入的刷新队列方法,执行watcher.run()方法触发render()渲染或者执行用户传入的回掉函数。4.nextTick()将刷新队列的方法以回调函数的方式添加到 刷新callbacks数组中 通过timeFunc()方法将flushCallbacks()放在浏览器的异步队列中。notify()方法执行对于dep(单个属性)的update()方法进行更新。原创 2022-10-12 11:20:47 · 376 阅读 · 0 评论 -
数组方法总结、vue组件通讯(父子,隔代,兄弟)、 如何封装组件、 axios 与ajax比较、对async await理解、 对媒体查询的理解、null和undefined区别
d)遇到复杂html时候 一套无法满足时 隐藏html显示htmlaxios 比 ajax对async await理解。原创 2022-10-08 16:37:43 · 99 阅读 · 0 评论 -
pinia和vuex的区别 Vuex 和 Pinia 的优缺点 何时使用Pinia,何时使用Vuex
(1)pinia它没有mutation,他只有state,getters,action【同步、异步】使用他来修改state数据(2)pinia他默认也是存入内存中,如果需要使用本地存储,在配置上比vuex麻烦一点(3)pinia语法上比vuex更容易理解和使用,灵活。(4)pinia没有modules配置,没一个独立的仓库都是definStore生成出来的(5)pinia state是一个对象返回一个对象和组件的data是一样的语法。原创 2022-10-08 14:57:20 · 22084 阅读 · 0 评论 -
jQuery(javascript) 与Vue有什么区别
1.jQuery根据业务逻辑操作DOM,注重实现过程,亲历亲为。vue根据Model数据变化驱动View视图的变化。Vue组件、打包压缩 => 单文件HTML页面,前后端分离(后端只负责API接口、前端实现视图逻辑)3.jQ需要配合后台服务器端渲染php/jsp/aspx,前后端不分离。2.jQ兼容性很好兼容到IE6,vue最低兼容到IE8。原创 2022-10-08 10:31:14 · 817 阅读 · 0 评论 -
vue2与vue3区别
vue2.0比较的过程是全量的比较,也就是每个节点都会彼此比较。有些节点中的内容是不会发生改变的,那我们对其进行比较就肯定消耗了时间。在Vue3.0当中,就对这部分内容进行了优化:在创建虚拟DOM树的时候,会根据DOM中的内容会不会发生变化,添加一个静态标记。那么之后在与上次虚拟节点进行对比的时候,就只会对比这些带有静态标记的节点。组合式api的出现改善处理同一事件的逻辑却要分开的问题(改善业务逻辑的割裂),组合式适合大型项目。原创 2022-10-08 10:09:17 · 2713 阅读 · 0 评论 -
Vue3 + elementplus 分页组件英文改为中文
【代码】Vue3 + elementplus 分页组件英文改为中文。原创 2022-10-07 21:00:12 · 615 阅读 · 0 评论 -
VueX/Pinia的优缺点
1、由于VueX/Pinia都是在浏览器内存中生成一个实例对象储存数据,一旦刷新页面,Vuex/Pinia重新初始化数据,无法持久化存储数据。持久化插件:pinia-plugin-persistedstate。VueX/Pinia的优点是什么?持久化插件:vuex-persistedstate。1、解决了非父子组件消息传递,共享状态的问题。VueX/Pinia的缺点是什么?2、减少ajax的异步请求次数。原创 2022-09-30 10:56:54 · 710 阅读 · 0 评论 -
webpack与vite对比
vite开箱即用,更加简单,基于浏览器esm,使得hmr更加优秀,达到极速的效果;webpack更加灵活,api以及插件生态更加丰富。webpack是bundle,自己实现了一套模块导入导出机制。vite是利用浏览器的esm能力,是bundless。:分析各个模块之间的依赖=>然后进行编译打=>打包后的代码在本地服务器渲染。:启动服务器=>请求模块时按需动态编译显示。模块规范来执行代码,不需要打包编译成。:模块以及模块依赖的模块需重新编译。:浏览器重新请求该模块即可。模块即可在浏览器运行。原创 2022-09-27 22:31:56 · 5371 阅读 · 0 评论 -
路由守卫
路由守卫就是路由跳转过程中的一些钩子函数 ,在路由跳转的时候,做一些判断或其它的操作。类似于组件生命周期钩子函数。原创 2022-09-27 10:01:49 · 6453 阅读 · 0 评论 -
vue-router的两种模式,hash和history模式。
当#后面的hash发生变化,对于hash模式会创建hashHistory对象,在访问不同的路由的时候会发生两件事件 使用push将新路添加到路径后面后者使用replace()替换到当前的路由。原创 2022-09-27 09:24:39 · 868 阅读 · 0 评论 -
使用路由中的meta实现一部分网页不登陆就可以访问,而一部分网页必须要登录才可以访问。
如果每个都写得话太麻烦 meta: { requiresAuth: true },设置之后不仅一级路由 /article设置了其children 二级路由 默认也是 meta: { requiresAuth: true } 比如去/article/tag就需要登录 ,但我给二级路由list单独设置了meta: { requiresAuth: false },那么就不需要登录也能跳转到/article/list这个页面。原创 2022-09-26 23:06:38 · 743 阅读 · 1 评论 -
Vue2和Vue3在创建Vue实例上的区别
而Vue3通过createApp方法可以返回一个提供应用上下文的应用实例。不同实例注册的组件无法在不同的实例下使用。Vue3更适合在大型的开发环境中使用,不同开发人员可以完全独立地使用不同的实例。Vue2的组件系统设计中,所有Vue实例是共享一个Vue构造函数对象的,包括全局指令/全局组件,无法做到相互隔离。,其他的单文件组件创建的 Vue实例都会成为它的。也就是说我们整个项目中,只有一个。,构造函数的方式来创建实例。原创 2022-09-26 22:45:07 · 1045 阅读 · 0 评论 -
vue2事件总线event bus
vue2事件总线event bus。原创 2022-09-26 16:56:53 · 1058 阅读 · 0 评论 -
vue2 route包含的信息和router使用的详细介绍 vue3 useRouter和useRoute 使用以及三种传参方式
传递和接收方式不同外显式query会很明显的跟在新的url上,而隐式params不会隐式params在刷新后可能会消失,我们可以在它存在的时候存如缓存中,如localstorage,而query不会隐式params比显式query相对而言更安全,不会将参数直接暴露给用户。原创 2022-09-26 13:16:36 · 8970 阅读 · 0 评论 -
v-bind用法详解
因此,在v-bind 用于 style 时,Vue.js 专门增强了它。v-bind 主要用于属性绑定,比方你的class属性,style属性,value属性,href属性等等,只要是属性,就可以用v-bind指令进行绑定。值得一提的是 当在一个自定义组件上使用 class 属性时,这些类将被添加到该组件的根元素上面。(3)甚至我们可以在数组中用三元运算符,你也想根据条件切换列表中的 class,可以用三元表达式。(2)我们可以把一个数组传给 v-bind:class,以应用一个 class 列表。原创 2022-09-24 23:11:56 · 4765 阅读 · 0 评论 -
双向绑定,v-model原理,vue2/3双向绑定的区别;
在 Vue2 中, v-model其实是一个语法糖,它背后本质上是包含两个操作:1.v-bind绑定一个value属性2.v-on指令给当前元素绑定input事件在 Vue3 中, 在自定义组件上使用v-model, 在vue2的基础上还相当于传递一个modelValue属性, 同时触发一个。原创 2022-09-24 22:46:19 · 441 阅读 · 0 评论 -
mutation 与 action 的区别?
相应视图—>修改State”拆分成两部分,视图触发Action,Action再触发Mutation。:专注于修改State,理论上是修改State的唯一途径。:可以异步,但不能直接操作State。基于流程顺序,二者扮演不同的角色。角色不同,二者有不同的限制。:业务代码、异步请求。原创 2022-09-24 00:33:09 · 222 阅读 · 0 评论 -
对vuex的理解 什么时候该使用 vuex其组成 具体用法
确实是如此——如果您的应用够简单,您最好不要使用 Vuex。但是,如果您需要构建一个中大型单页应用,您很可能会考虑如何更好地在组件外部管理状态,Vuex 将会成为自然而然的选择。是store的计算属性,对state的加工,是派生出来的数据。就像computed计算属性一样,getter返回的值会根据它的依赖被缓存起来,且只有当它的依赖值发生改变才会被重新计算。是store分割的模块,每个模块拥有自己的state、getters、mutations、actions。是存储的单一状态,是存储的基本数据。原创 2022-09-24 00:30:49 · 181 阅读 · 0 评论 -
分析vue2无法监听数组和对象这些变化的原因以及解决方法
所以,只需做一层代理就可以监听同级结构下的所有属性变化,包括新增属性和删除属性。Object.defineProperty()针对的是对象的某个属性,而且这个操作在vue的初始化阶段就完成了,所以新增的属性无法监听,通过set方法新增对象就相当于初始化阶段的数据响应式处理。调用数组的pop、push、shift、unshift、splice、sort、reverse等方法时是可以监听到数组的变化的vue内部相当于重写了数组的原型,劫持了这七个方法。但是注意:数组中的元素是引用类型时是会被监听的。原创 2022-09-23 20:09:19 · 4426 阅读 · 0 评论 -
虚拟dom是什么 diff算法
的diff算法是基于snabbdom改造过来的,仅在同级的vnode间做diff,递归地进行同级vnode的diff,最终实现整个DOM树的更新。因为跨层级的操作是非常少的,忽略不计,这样时间复杂度就从O(n3)变成O(n)。因为虚拟dom是一个普通的javascript对象,故他不单单只能允许在浏览器端,渲染出来的虚拟dom可同时在node环境下或者weex的app环境下允许。然后用新的对象树和旧的对象树进行比较,记录两棵树差异。把所记录的差异应用到所构建的真正的DOM树上,视图就更新了。原创 2022-09-22 11:17:13 · 104 阅读 · 0 评论 -
vue有什么性能优化方法
Vue会通过Object.defineProperty对数据进行劫持,来实现视图响应数据的变化,然而有些时候我们的组件就是纯粹的数据展示,不会有任何改变,我们就不需要Vue来劫持我们的数据,在大量数据展示的情况下,这能够很明显的减少组件初始化的时间,那如何禁止Vue劫持我们的数据呢?可以通过Object.freeze方法来冻结一个对象,一旦被冻结的对象就再也不能被修改了。函数式组件是无状态,它无法实例化,没有任何的生命周期和方法。一般适合只依赖于外部数据的变化而变化的组件,因其轻量,渲染性能也会有所提高。原创 2022-09-22 00:43:18 · 238 阅读 · 0 评论 -
v-if 和 v-for为什么在vue2 中不能同时使用 那vue3中呢?
中v-if不能和v-for一起使用的原因是v-for的优先级比v-if高,一起使用会造成性能浪费。解决方案有两种,把v-if放在v-for的外层或者把需要v-for的属性先从计算属性中过滤一次。更新了v-if和v-for的优先级,使v-if的优先级高于v-for。2.v-if和v-for的优先级问题在。原创 2022-09-22 00:34:52 · 503 阅读 · 0 评论 -
vue2父子组件生命周期执行顺序
父组件beforeCreate => 父组件created => 父组件beforeMount => 子组件beforeCreate => 子组件created => 子组件beforeMount => 子组件mounted => 父组件mounted。父beforeCreate->父created->父beforeMount->子beforeCreate->子created->子beforeMount->子mounted->父mounted。原创 2022-09-22 00:17:51 · 282 阅读 · 0 评论 -
Vue2 与 Vue3 生命周期对比
内存中的模板,已经真实的挂载到了页面中,用户已经可以看到渲染好的页面了。这个钩子函数获取的数据是更新后的数据,生成新的虚拟dom,跟上一次的虚拟dom结构进行比较,比较出来差异(diff算法)后再渲染真实dom,当数据引发dom重新渲染的时候,在updated钩子函数里面就可以获取最新的真实dom了。vue 实例的 $el 和 data 都已初始化,dom节点马上要被渲染出来了,但是还没有真正的渲染出来,挂载之前为虚拟的 dom节点,模板已经在内存中编辑完成了,但是尚未把模板渲染到页面中。原创 2022-09-22 00:12:42 · 3324 阅读 · 0 评论 -
vue路由传参query和params的区别?
1.query使用path和name传参跳转都可以,而params只能使用name传参跳转。2.params不在路由配参数的话,当用户刷新当前页面的时候,参数就会消失。3.query相当于get请求,而params相当于post请求query传过来的参数会显示到地址栏中 而params传过来的参数不会显示到地址栏中 4.接受参数的时候用this.$route.params.name或者this.$route.query.name原创 2022-09-20 09:13:28 · 1313 阅读 · 0 评论 -
watch与watchEffect区别 watch与computed区别
它会在同步执行过程中,自动追踪所有能访问到的响应式属性。这更方便,而且代码往往更简洁,但有时其响应性依赖关系会不那么明确。它不会追踪任何在回调中访问到的东西。会避免在发生副作用时追踪依赖,因此,我们能更加精确地控制回调函数的触发时机。中的函数所依赖的属性没有发生变化,那么调用当前的函数的时候会从缓存中读取,而。默认第一次加载不执行回调函数,如果需要第一次加载不执行回调函数,添加。根据现有的依赖数据,推导计算出来一个新的数据,在每次监听的值发生变化的时候都会执行回调。是监听一个值的变化,然后执行对应的回调。原创 2022-09-06 15:39:13 · 824 阅读 · 0 评论 -
在Visual Studio Code中生成Vue模板
这里我因为之前就设置了所以上面图片中第一个本来就有选项"vue",如果你们出现如上这样的话我们就成功了,敲下回车。好了本篇文章就到这里了,喜欢的话可以关注我,会持续更新的,有错误欢迎大家指出,大家可以在我这里互相讨论学习,一起进步。文件-->首选项-->配置用户代码片段-->点击新建代码片段--取名vue.json 确定。然后我们就可以在以vue为后缀的文件里输入“vue”,就可以迅速打出vue的模板了。进入到如图页面以后,复制下面代码到如上图对应位置(这里是我用的模板)这样的话其实已经带一个默认了。...原创 2022-08-30 10:12:02 · 952 阅读 · 0 评论 -
vue ui 脚手架运行 报错: ERROR Failed to get response from https://registry.npm.taobao.org/@vue/cli-service
使用强制清理npm缓存:npm cache clean --force。使用vue ui启动项目后报这个错误。原创 2022-08-30 09:29:55 · 710 阅读 · 0 评论 -
vue2和vue3+vite(基础使用 介绍)
小伙伴们可能疑问vue3已经有了那么久了为什么还要介绍vue2,介绍vue2的原因是因为公司有些老项目还是使用的vue2,除此之外在中只是不支持IE8及一下版本,Vue的响应式原理是基于es5的Object.defineProperty的,而这个方法不支持ie8及以下的版本,vue2有着较好的兼容性。......原创 2022-08-26 19:43:20 · 707 阅读 · 0 评论 -
v-if与v-show的区别 绑定key属性与不绑定的区别
不绑定key属性1.当vue中使用 v-for 更新已经渲染过的元素列表时,默认用"就地复用"策略。如果数据项的顺序被改变,Vue将不是移动DOM元素来匹配数据项的改变,而是简单复用此处每个元素,并且确保它在特定索引下显示已被渲染过的每个元素。2.如果不使用key,Vue会使用一种最大限度减少动态元素并且尽可能的尝试修复/再利用相同类型元素的算法,此状态下的key值发生变化,但相应的虚拟节点不会发生变化,这种是vue的默认机制,就地更新,.........原创 2022-08-26 15:22:45 · 323 阅读 · 0 评论