vue
鲤忆
这个作者很懒,什么都没留下…
展开
-
vuex简单练习
【代码】vuex简单练习。原创 2023-03-09 20:04:06 · 172 阅读 · 0 评论 -
vue3中vuex基础
当组件需要状态时候,可以直接获取状态,当修改状态时候,需要由组件通过使用dispatch函数通知action,在action通过使用commit函数通知mutation去修改state状态。:组件中状态为私有状态,只有当前组件才能访问,如果是关系型组件,可以通过props emit provite inject 进行`.vue`文件之间传值、- 1:在组件中 通过store.dispatch() 触发action,- 3: 在about.vue中 获取store中title并渲染。原创 2023-03-09 19:44:12 · 171 阅读 · 0 评论 -
vue3中权限验证
推荐了解 [阮一峰 token](http://www.ruanyifeng.com/blog/2018/07/json_web_token-tutorial.html)- 1.在路由配置meta中auth字段表示当前页面是否需要访问权限。- 3:对于无效token 或 过期token应该做什么处理。- 3: 验证无效或者过期token 如果告诉前端。- 2: 如何验证token?- 1:如果生成token.- 3:基于身份的权限验证。- 4:机器设备访问权限。- 2:页面访问权限。原创 2023-03-09 19:27:42 · 680 阅读 · 0 评论 -
vue3中 beforeEach 使用
2.在main.js文件中导入。原创 2023-03-08 22:44:18 · 1078 阅读 · 0 评论 -
vue3基础权限设置(简单)
5.utils 中 request.js文件中。3.router index.js文件配置。4.utils 中 auth.js文件配置。2.api.js 文件配置。原创 2023-03-08 21:07:03 · 659 阅读 · 0 评论 -
vue3路由+meta
meta 路由元元素meta中key-value都是自定义的。原创 2023-03-08 20:10:14 · 1453 阅读 · 0 评论 -
vue3嵌套路由
现在要把keepAlive写在router-view里面,使用作用域插槽获得页面组件。slotProps其实是一个对象,所以也可以用对象解构的语法。下一步就要用上我们meta里面配置的keepAlive。更详细:里面有vue2语法写的解决办法。这样就相当于缓存了所有页面。原创 2023-03-08 19:47:49 · 2033 阅读 · 0 评论 -
vue3 编程式导航
可以改变url地址。原创 2023-03-08 09:15:53 · 213 阅读 · 0 评论 -
vue3中useRouter
作用获取路由配置对象。- 获取路由参数~~~vue原创 2023-03-07 19:46:43 · 1388 阅读 · 0 评论 -
vue3动态路由
/mime?就是query参数。原创 2023-03-07 19:37:21 · 290 阅读 · 0 评论 -
vue3路由高亮显示
router-link-active 被激活的路由才会添加router-link-active 模糊匹配的。>注意vue2.x支持 vue-router@3 vue3.x支持 vue-route@4。router-link-exact-active 精准匹配,只能匹配一个路由。- 1:安装 `npm install vue-router -D`- 3:将路由对象挂在到应用对象上 (main。- 2:编写路由实例对象代码。- 1:创建独立的文件。- 2: 初始化路由对象。- 2:编写路由配置。原创 2023-03-07 19:29:16 · 377 阅读 · 0 评论 -
vue3路由基础
3:在Router-view组件渲染,由匹配到的路由配置对象中,注册的路由组件。- 2:获取路由地址部分,模糊匹配路由配置对象。默认根据path匹配。> 路由是服务端的概念,只得的是端口号后,?参数前的地址 为路由.- 2:是否忘记编写Router-view。- 1:path中注册的组件是否存在。> 什么地址加载什么组件。- 1:修改url地址方式。- 2:展示理由组件的内容。- 1:url地址发生改变。3.app.vue 文件。原创 2023-03-07 19:23:30 · 248 阅读 · 0 评论 -
vue3hook
把自己的问题抛给别人======>别人会给你一个思路------->怎么把他的思路实现------------>第一个hooks(封装)## useRequest 提供了以下几个生命周期配置项,供你在异步函数的不同阶段做一些处理。* 问自己:这个效果或者功能能不能抽离成一个独立的功能?onSuccess:请求成功触发。onFinally:请求完成触发。onBefore:请求之前触发。- 2.以`use`开头的函数。- 发送请求 自动/手动。main.js 代码。- 1.抽离公共功能。原创 2023-03-06 19:47:15 · 509 阅读 · 0 评论 -
vue3中放大镜
【代码】vue3中放大镜。原创 2023-03-06 19:42:44 · 113 阅读 · 0 评论 -
vue中toref和torefs区别
template 要想访问 toRefs 的值,需要带上 .value 如果不带上,就会出现双引号。* template 要想访问 toRef 的值,不需要带上 .value。* 将响应式对象变为普通对象,普通对象下key与响应式的key保持一致。* 作用:将响应式对象中某一个属性变为ref类型。* toRef与toRefs的区别是什么?* 每个key的类型都变为ref类型。* 参一:响应式对象。原创 2023-03-06 19:43:33 · 62 阅读 · 0 评论 -
vue3响应式数据验证
2. Child.vue 代码。1.app.vue 代码。原创 2023-03-06 19:41:38 · 103 阅读 · 0 评论 -
vue3插槽传值
2.Child.vue 代码。1.app.vue 代码。原创 2023-03-06 19:38:48 · 1240 阅读 · 0 评论 -
vue中 emit 传值
1.app.vue文件2.Child.vue文件。原创 2023-03-02 19:29:27 · 153 阅读 · 0 评论 -
vue组件传值
1.app.vue 文件2.Child.vue 文件。原创 2023-03-02 19:26:38 · 55 阅读 · 0 评论 -
vue3 组件基础
新建 `.vue` 文件就可以了。原创 2023-03-02 19:15:47 · 37 阅读 · 0 评论 -
vue3.x vue2.x 生命周期
由 beforeActive actived beforeDeactive deactive 替换。在切换渲染组件时,beforeCreate created beforeDestory destory 失效。> 生命周期指的是组件从创建到销毁的全过程,分为三个阶段,初始化,更新,销毁。- destoryed 组件销毁之间,清空内存 释放控件使用。- mounted dom渲染完毕,操作dom时候使用。> 所有的声明周期函数都是自动执行的,只要满足触发的时刻。原创 2023-03-01 19:16:54 · 106 阅读 · 0 评论 -
vue3箭头函数 计算属性 监听器 计算方法
上面程序中只要输入length和width两个的值,就会发生触发computed中的areas函数。普通函数的this指向该函数的调用者。4、watch只会监听数据的值是否发生改变,而不会去监听数据的地址是否发生改变,要深度监听需要配合deep:true属性使用。这就意味着只要data里的相应依赖的数据没有发生改变,那个多次访问计算属性里相关的函数会立即返回之前的计算结果,this指向问题,call, apply, bind会改变普通函数的this指向,但不会改变箭头函数的this指向。原创 2023-03-01 19:13:50 · 343 阅读 · 0 评论 -
vue3 穿梭框 (不完全只提供思路)
创建记录用户选择哪些选项的响应式数据。bug:数据格式有问题,没有统一数据格式。### 页面基础构建(静态页面)原创 2023-03-01 19:10:10 · 486 阅读 · 0 评论 -
vue简单轮播图
【代码】vue简单轮播图。原创 2023-02-24 19:39:25 · 157 阅读 · 0 评论 -
vue表单
参二:回到函数,当响应式数据发生变化,函数中执行。注意:以上代码片段是有一些小bug的会存在问题。*参三:deep:true 开启深度监听。* 作用:监听响应式数据变化。* 参一:被监听的响应式数据。* watch() 监听器。原创 2023-02-24 19:39:46 · 139 阅读 · 0 评论 -
vue3中计算属性
返回值,computedRefImpt 也是响应式数据。- 2:当计算属性中依赖的响应式数据发生变化时候,也会重新运算。**计算属性中 getter 函数什么时候会执行?* 计算属性特点:存储 getter函数的返回值。fullName.value = "王 啥";* computed() 作用:创建计算属性。- 1:使用计算属性的时候,多次使用执行一次。>计算属性有缓存作用,普通函数没有。**计算属性与普通函数的区别*** 参数:getter函数。**代码 code****api 详解**原创 2023-02-24 14:08:53 · 72 阅读 · 0 评论 -
vue表单元素代码片段
2:v-bind 动态绑定value + 监听input事件,是修改value绑定的变量。2:当脚本变量的赋值发生改变时候,浏览器的效果也会更新。2:当浏览器界面效果发生变化,脚本中变量也会发生变化。4:数据单项绑定:1:template模板中,绑定script脚本中变量。在单行/多行文本输入中,v-model的值为value属性的值。3:数据双向绑定:1:当脚本中变量值发生改变,浏览器效果也变。v-model 必须是响应式数据。注意:v-model 只能用在表单组件上。v-model 实现数据双向绑定。原创 2023-02-24 09:22:52 · 115 阅读 · 0 评论 -
vue中杂点知识
2.ref 适合 string(字符串类型) number(数字类型) boolean(布尔值类型) 浅度响应式。1:获取ui图,根据ui图星星,分析页面数据结构(什么样的数据结果,有利于你渲染页面或者进行动态绑定处理)产生问题:相同的渲染结果,多次使用,函数需要运算多次。计算属性:相同的渲染结果,在多次使用的时候,执行一次。2:当计算属性中依赖的响应式数据发生变化的时候。reactive() 创建响应式对象,以代理对象方式展示。- 2:当计算属性中依赖的响应式数据发生变化时候,也会重新运算。原创 2023-02-23 20:04:07 · 43 阅读 · 0 评论 -
vue中数据单项绑定
1.v-bind:属性='变量/js数据'2.判断变量是否存在,不存在提示3.存在,引用变量的赋值,作为html属性的值。原创 2023-02-23 20:01:18 · 136 阅读 · 0 评论 -
vue中v-for遇到事件绑定
问题:handle函数内部 如何知道是哪个li触发的函数。原创 2023-02-23 19:59:58 · 448 阅读 · 0 评论 -
vue中事件绑定(和传参)
绑定点击事件原创 2023-02-23 19:58:18 · 852 阅读 · 0 评论 -
vue中遍历的使用方法
数组元素,结构,类型 要一致 例如:数组元素为对象,每个对象下的key值都是一样的,value不一样。原创 2023-02-23 19:53:37 · 552 阅读 · 0 评论 -
vue中基础指令
以元素属性形式存在,以v-开头,并且带有一定功能的语法糖,就是指令注意:模板语法直接渲染字符串,不进行任何转译处理。原创 2023-02-23 19:49:19 · 76 阅读 · 0 评论 -
vue中模板语法
2.2.js数据:字符串,number boolean 数组。1.1.{{}} vue的模板语法。2.3.表达式,浏览器上展示的是表达式的运算结果。1.2.模板语法中只有在vue模板中有效。1.3.以 {{ }} 形式存在。原创 2023-02-23 19:45:09 · 48 阅读 · 0 评论 -
vue中实现tab切换
【代码】vue中实现tab切换。原创 2023-02-23 19:40:55 · 565 阅读 · 0 评论 -
vue实现单选
/2:找到控制字体颜色的数据,更新数据,从而实现页面更新。4:当v-for 遇到事件如何知道是哪个元素触发的事件。1:分析页面应该用什么样的数组结构展示?//1:通过dom 直接变红色。2:将数据结构和模板结合展示。5:浏览器有什么样的响应。3:分析有哪些交互行为。原创 2023-02-23 19:39:26 · 270 阅读 · 0 评论 -
vue实现功能
2.2:根据别人的源代码,分析实现的思路(实现功能的步骤)- 4:当v-for 遇到事件如何知道是哪个元素触发的事件。问题: .当你第一次遇到一个陌生的功能时候?- 3:在有思路的基础上,自己写一个一模一样的demo。因为可能会产生连锁bug。- 1:分析页面应该用什么样的数组结构展示?- 2.1:找到实现效果的技术。- 1:问清楚这是一个什么效果?- 2:想办法找到类似的demo。- 5:浏览器有什么样的响应。- 3:分析有哪些交互行为。## vue开发的流程。- 4:在项目中实现。原创 2023-02-23 19:21:06 · 65 阅读 · 0 评论