Vue
文章平均质量分 55
前端楠戈
这个作者很懒,什么都没留下…
展开
-
Vue3 把实现双向数据绑定的 API Object.defineProperty 换成了 Proxy,出于什么考虑?
1. 两者对比,不难看出,两者的数据劫持都用到了set和get的方法,但是明显可以看出来,Proxy中的数据劫持,并没有用到循环,也就是性能上面的一个提升。2. Proxy中他劫持的是整个对象,包含了后面新增的一些属性,也能够实现数据的响应式变化,而Object.defineProperty是通过循环遍历的原来对象的键,因此后面加进来的属性,无法实现响应式的变化。...原创 2022-06-06 22:26:29 · 1522 阅读 · 1 评论 -
数组变成树状结构封装
对数组变成树状结构一般的应用场景非常的广泛,有后台权限的管理,侧边栏的渲染等,相信大家对数组变成树状结构一定不陌生,大家一般工作中经常会遇到,运气好点的,后台已经帮你处理好了数据,得到的就是帮你处理好了的数据,不好的,那就需要自己手动处理下数据了。今天就和大家详细解析下如何高效的把数组变成树状结构。原创 2022-05-04 22:18:57 · 1225 阅读 · 2 评论 -
Vuex带你深度了解
## Vuex介绍1. 作用:能够`方便、高效地`实现组件之间的`数据共享2. Vuex是什么? Vuex是vue项目中实现`大范围数据共享`的技术方案3. 优势: 1. 数据的`存取一步到位`,不需要层层传递 2. 数据的`流动`非常清晰 3. 存储在Vuex中的数据都是`响应式`的4. 场景: 1. 适合频繁、大范围的数据共享原创 2022-04-26 01:39:21 · 926 阅读 · 0 评论 -
手把手教你如何使用Vuex
Vuex介绍1. 作用:能够`方便、高效地`实现组件之间的`数据共享2. Vue是什么? Vuex是vue项目中实现`大范围数据共享`的技术方案3. 优势: 1. 数据的`存取一步到位`,不需要层层传递 2. 数据的`流动`非常清晰 3. 存储在Vuex中的数据都是`响应式`的4. 场景: 1. 适合频繁、大范围的数据共享原创 2022-04-20 01:05:29 · 1713 阅读 · 0 评论 -
深度畅游Vue中的路由
Vue路由-全局前置守卫1. 作用:路由跳转之前,会触发一个函数。2. 场景:检验是否登录,没登录就跳转到登录页,主要用于权限控制。3. 语法: `router.beforeEach((to,form,next)=>{})`(在main.js中) 参数一(to):到哪里去 参数二(from):从哪里来 参数三(next):是否放行,也可以控制跳转的路径 `next(false)` 拦截,不允许跳转 `next()`不拦截,跳转 `next原创 2022-04-18 00:56:01 · 1231 阅读 · 0 评论 -
带你浅谈Vue路由
路由嵌套之后,他的class有两种,可以分为- 精确匹配 router-link-exact-active url中hash值路径。与href属性值完全相同,设置此类名。- 模糊匹配 router-link-active url中hash值 包括href属性值这个路径原创 2022-04-16 23:27:49 · 1489 阅读 · 0 评论 -
你真的了解Vue中的路由吗?
路由1. 路由含义:路径和组件的映射关系2. 前端路由作用:实现业务场景切换 ,所有的业务都在一个HTML中实现1. 优点: - 整体`不刷新页面`用户体验更好原创 2022-04-16 02:16:05 · 1161 阅读 · 0 评论 -
手把手教你Vue中的插槽使用
作用域插槽0. 作用:使用组件时,可以访问组件内部的数据0. 语法: - 子组件插槽slot上绑定一个数据 - 父组件插槽接收,scope是自定义变量名 - 父组件会将插槽上绑原创 2022-04-15 01:13:18 · 1426 阅读 · 0 评论 -
Vue插槽v-slot的详细教学大全(Ι)
组件-插槽 插槽 作用:通过slot标签,让组件可以接收不同的标签结构显示语法 组件内用<slot></slot>占位 使用组件时<Pannel></Pannel>夹着的地方,传入标签替换slot## 插槽-默认内容0. 作用: 如果外面没有传值,可以给个默认显示内容0. 语法:<slot>放置内容,作为默认显示内容0. 效果: - 不给组件传标签,slot内容原地显示 - 给组件内传标原创 2022-04-14 02:33:32 · 1223 阅读 · 0 评论 -
Vue生命周期详解
## 生命周期1. 含义:组件从`创建`到`销毁`的整个过程,这个过程就是声明周期2. 如何知道组件到了什么阶段?(钩子函数)## 钩子函数1. Vue框架`内置`函数,随着组件的声明周期阶段,`自动执行`2. 作用:在特定的时间点,执行特定的操作3. 分类4大阶段8个方法| **阶段** | **方法名** | **方法名** || -------- | ------------------------- | ----------原创 2022-04-13 01:16:49 · 862 阅读 · 0 评论 -
Vue组件看这篇就够了
侦听器-watch1. 作用:可以侦听data/compute属性值的变化,只要修改了就会触发函数执行,可以侦听Vue的变量2. 语法:watch:{}和data(){并齐同级3. 事例: ```vue watch:{ "要侦听的属性名"(newval,oldval){//newval是现在的值 oldval是之前的值 } } ```4. ==侦听器深度侦听(侦听对象)== 事例: ```vue wat原创 2022-04-11 21:34:25 · 1038 阅读 · 0 评论 -
带你详细了解Vue中的v-for
## v-for0. 作用: 列表渲染,所在标签结构,按照数据数量,循环生成。指令写在谁身上,就循环创建谁0. 语法: `v-for = "(值变量,索引变量) in 目标结构" :key = 索引变量` `v-for = "值变量 in 目标结构 :key = 索引变量"` 目标结构:可以是数组,对象,字符串0. 数组方法如果修改了原数据就会更新 页面,如果没有修改,则不会,但可以重新赋值给变量让你页面更新0. v-for中的key作用:在更新的时候原创 2022-04-11 00:48:48 · 13853 阅读 · 0 评论 -
带你详细了解Vue中的指令
v-model和修饰符1. 作用:value属性和vue数据变量,双向绑定到一起2. `双向绑定:` - 变量变化-->视图自动同步 - 视图变化-->变量自动同步3. 主要用途:表单中4. 应用场景: - 全选反选功能(非数组) - 考试系统(数组) - 手机用户信息:爱好 是否有以下XXX (数组)5. select标签上:需要将v-model写在select上,里面的option里的value中需要设置 复选框(checkbox)原创 2022-04-09 23:38:06 · 266 阅读 · 0 评论 -
Vue.js带你入门
Vue含义:Vue是一个渐进式(按需,逐渐集成功能)Javascript框架框架:拥有自己的语法规则库:是方法和集合的集合Vue脚手架脚手架启动:打开cmd运行yarn,下载全局安装@vue/cli模块包yarn global add @vue/cli查看Vue命令版本vue -V出现版本号,则代表安装成功创建项目:vue create vuecli-deno注意:项目名不能带大写字母,中文和特殊符号选择模板,使用上下箭头选择,回车确认,弄错了ctrl+c退出重来[外链图片原创 2022-04-08 22:25:57 · 70 阅读 · 0 评论