Vue
文章平均质量分 63
森呼吸。
这个作者很懒,什么都没留下…
展开
-
Vue3父子传参props和$emit
如果父组件是纯 Vue3 写法,子组件混合写法,可以通过 props 接收到 data 和 setup 函数里的属性,但是子组件要是在 setup 里接收,同样只能接收到父组件中 setup 函数里的属性,接收不到 data 里的属性。如果父组件是混合写法,子组件纯 Vue3 写法的话,是接收不到父组件里 data 的属性,只能接收到父组件里 setup 函数里传的属性。官方也说了,既然用了 3,就不要写 2 了,所以不推荐混合写法。前端培训下面的例子,一律只用纯 Vue3 的写法,就不写混合写法了。原创 2023-10-31 18:07:56 · 267 阅读 · 0 评论 -
Vue中watch侦听器用法
watch 需要侦听特定的数据源,并在单独的回调函数中执行副作用watch第一个参数监听源watch第二个参数回调函数cb(newVal,oldVal)watch第三个参数一个options配置项是一个对象{:true //是否立即调用一次:true //是否开启深度监听:“pre” // 更新时机。原创 2023-10-31 18:05:10 · 224 阅读 · 0 评论 -
Vue3中的 reactive 详解
reactive用来绑定复杂的数据类型, 例如:对象、数组。它是不可以绑定普通的数据类型这样是不允许 会给我们报错数组异步赋值页面是不会变化的因为会脱离响应式。原创 2023-10-24 09:49:41 · 385 阅读 · 0 评论 -
Vue3中的ref详解
原因是 调用 ref 时, 它的底层会调用 triggerRef 强制更新页面DOM,所以 shallowRef 声明的值也会跟着一起改变。它的监听只能到 value,更深层次的就不可以,所以修改其属性是非响应式的这样是不会改变的。但是它和 ref 一起用会受 ref 的影响 shallowRef 的也会改变。接受一个内部值并返回一个响应式且可变的 ref 对象。变化的 ref,但不会使其值也变成响应式的(浅层响应式)这样是可以被监听到的修改value。使用 ref 获取 DOM节点,原创 2023-10-11 14:40:26 · 222 阅读 · 0 评论 -
axios详解及Vue中接口的二次封装
axios是基于promise,用于浏览器和node.js的http客户端});2、 实例的方法以下是实例方法,注意已经定义的配置将和利用create创建的实例的配置合并//当创建实例的时候配置默认配置});//当实例创建时候修改配置。原创 2023-05-17 08:55:46 · 534 阅读 · 0 评论 -
vue3中setup语法糖
最开始Vue3.0暴露变量的方法必须return出来,template中才能使用,现在只需在script标签中添加setup,组件只需引入,不用注册,属性方法也不用返回,也不用写setup函数,也不用写export default,甚至是自定义指令也可以在我们的template中自动获得.在script setup中,引入的组件可以直接使用,无需再通过components进行注册,并且无法指定当前组件的名字,它会自动以文件名字为主,也就是不用在写name属性了.'接收reactive暴漏出来的值'原创 2023-05-11 15:19:42 · 1079 阅读 · 0 评论 -
vite创建项目
在 src 目录下创建 routr文件夹,和里面的index。在 src下创建 store 用来使用 pinia。在main.js 或者 main.ts 中引入。在 main.js 中注册。原创 2023-05-04 17:44:12 · 153 阅读 · 1 评论 -
Vue3 组件通信方式
如果父组件是纯 Vue3 写法,子组件混合写法,可以通过 props 接收到 data 和 setup 函数里的属性,但是子组件要是在 setup 里接收,同样只能接收到父组件中 setup 函数里的属性,接收不到 data 里的属性。如果父组件是混合写法,子组件纯 Vue3 写法的话,是接收不到父组件里 data 的属性,只能接收到父组件里 setup 函数里传的属性。:在任何后代组件中接收想要添加在这个组件上的数据,不管组件嵌套多深都可以直接拿来用。父组件获取子组件的属性或者调用子组件方法。原创 2023-05-04 17:50:05 · 153 阅读 · 1 评论 -
使用 Vue-cli 创建项目
外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-vjcxSwAK-1683203828586)(D:\杂物房\笔记\和项目相关\image\dong.png)][外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ITkxqy8a-1683203828586)(D:\杂物房\笔记\和项目相关\image\wen.png)] 通过 ↑↓ 箭头选择依赖,按 “空格” 是否选中,按 “a” 全选,按 “i” 反选。如果有需要的可以选择 “y”原创 2023-05-05 08:28:56 · 913 阅读 · 1 评论 -
vue导航守卫详解
导航守卫又称为路由守卫,实时监控路由跳转时的过程,在路由跳转的各个过程中执行相应的操作,类似于生命周期函数,在开发过程中经常被使用,比如用户点击一个页面,如果未登录就调用到登陆页面,已登录就让用户正常进入。该守卫接收的参数与全局守卫是一样的,但是该守卫只在其他路由跳至配置有 beforeEnter 路由表信息时才生效。和全局前置守卫类似,区别是在跳转被确认之前,同时在所有组件内守卫和异步路由组件都被解析之后,解析守卫才调用。to: 记录着将要进入的目标路由对象的信息。next:表示执行下一步。原创 2023-05-06 14:01:57 · 364 阅读 · 1 评论 -
VueX详解
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式 + 库。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。Vuex中有state、mutation、action、getter等核心概念。获取state可以通过this.$store.state.xx或者是通过定义mapState来获取。原创 2023-05-12 14:10:47 · 294 阅读 · 0 评论 -
vue3项目在手机端运行
电脑上按下windows+R,输入cmd,在电脑终端下,输入ipconfig,在以太网下获取ip地址(IPv4对应的值):你的手机端一定要和电脑端处于同一局域网下,最好是手机连上电脑端的无线网。将 serve 运行中的内容改为以下内容。然后重新运行一下即可。原创 2023-05-19 08:21:11 · 516 阅读 · 0 评论 -
Vue中响应式的原理
响应式数据的最终目标,是当对象本身或者对象属性发生变化时,将会运行一些函数,最常见的就是render函数。在具体实现上,vue用到了几个核心部件。原创 2023-05-23 18:11:49 · 85 阅读 · 0 评论 -
VUE中的指令
Vue.js的指令是以v-开头的,它们作用于HTML元素,指令提供了一些特殊的特性,将指令绑定在元素上时,指令会为绑定的目标元素添加一些特殊的行为,我们可以将指令看作特殊的HTML特性(attribute)。原创 2023-05-24 20:00:03 · 138 阅读 · 0 评论 -
v-if和v-show的区别
在Vue2中,v-if和v-for都是在编译阶段被处理的,这意味着它们只有在组件被实例化时才会被处理,而无论条件是否满足,它们的相关DOM都会被创建。而在Vue3中,v-if和v-for是在渲染时被处理的,这意味着只有在条件满足时,v-if所对应的DOM才会被渲染出来。Vue3中,v-show的渲染也进行了优化,当条件不满足时,v-show所对应的DOM只是被隐藏了,而不是被销毁。在Vue3中,v-show和v-if的优先级仍然是相同的,即v-show优先级高于v-if。原创 2023-05-25 08:07:21 · 1210 阅读 · 0 评论 -
什么是虚拟DOM
Virtual DOM(虚拟DOM),是由普通的 JS 对象来描述DOM对象,因为不是真实的DOM对象,所以叫 Virtual DOM。原创 2023-05-31 17:10:59 · 927 阅读 · 0 评论 -
Pinia实现持久化保存数据
/ 安装插件时调用// 从本地存储中读取状态// 将本地存储的状态转换为 JSON// 恢复存储的状态// 监听 Pinia 状态的变化并将其保存到本地存储});},});这样就可以实现 Pinia 的状态持久化了。需要注意的是,对于大型应用程序,插件的自定义实现可能会变得复杂,因此建议使用第三方库来实现 Pinia 的持久化。原创 2023-05-31 16:46:40 · 6807 阅读 · 0 评论