![](https://img-blog.csdnimg.cn/c110f03d50e9432e9d97a4108dfafa1e.jpeg?x-oss-process=image/resize,m_fixed,h_224,w_224)
vue3
文章平均质量分 70
vue3基础以及运用
温柔的二斤半
凡事皆有可能,永远别说永远。
展开
-
pinia介绍
Pinia 最初是在 2019 年 11 月左右重新设计使用Composition API。从那时起,最初的原则仍然相同,但 Pinia 对 Vue 2 和 Vue 3 都有效.Pinia(发音为/piːnjʌ/,类似于英语中的“peenya”)是最接近有效包名piña(西班牙语中的pineapple)的词。菠萝实际上是一组单独的花朵,它们结合在一起形成多个水果。与 Store 类似,每一家都是独立诞生的,但最终都是相互联系的。它也是一种美味的热带水果,原产于南美洲。原创 2023-07-26 11:58:00 · 562 阅读 · 0 评论 -
vue动画
他们的优先级高于普通的类名,这对于 Vue 的过渡系统和其他第三方 CSS 动画库,如 Animate.css. 结合使用十分有用。原创 2023-07-25 10:06:00 · 110 阅读 · 0 评论 -
vue3动态路由
我们经常需要把某种模式匹配到的所有路由,全都映射到同个组件。例如,我们有一个 User 组件,对于所有 ID 各不相同的用户,都要使用这个组件来渲染。那么,我们可以在 vue-router 的路由路径中使用“动态路径参数”(dynamic segment) 来达到这个效果:我们经常需要把某种模式匹配到的所有路由,全都映射到同个组件。例如,我们有一个 User 组件,对于所有 ID 各不相同的用户,都要使用这个组件来渲染。在当前的路由需要指定一下传递的属性名字。可以直接在链接上传递参数。原创 2023-07-25 11:52:37 · 499 阅读 · 0 评论 -
vue自定义指令
Vue在除了提供默认内置的指令外,还允许开发人员根据实际情况自定义指令.在Vue的项目中,大多数情况下,你都可以操作数据来修改视图,也就是所谓的操作DOM,但是还是避免不了偶尔要操作原生DOM,当我们需要操作DOM的时候,就可以使用到自定义指令。当然也能用$refs<template><script></script>代码基本能实现我们需要的功能,但是如果有很多页面都需要这个功能,那我们就只能是复制这段代码了,而通过自定义指令我们就能解决这种问题。原创 2023-07-25 10:07:22 · 179 阅读 · 0 评论 -
服务端渲染(ssr)
Vue.js 是一个用于构建客户端应用的框架。默认情况下,Vue 组件的职责是在浏览器中生成和操作 DOM。然而,Vue 也支持将组件在服务端直接渲染成 HTML 字符串,作为服务端响应返回给浏览器,最后在浏览器端将静态的 HTML“激活”(hydrate) 为能够交互的客户端应用。一个由服务端渲染的 Vue.js 应用也可以被认为是“同构的”(Isomorphic) 或“通用的”(Universal),因为应用的大部分代码同时运行在服务端和客户端。原创 2023-07-26 12:00:01 · 220 阅读 · 0 评论 -
VUE3插槽
插槽(Slot)是Vue提出来的一个概念,正如名字一样,插槽用于决定将所携带的内容,插入到模板template指定的某个位置,从而使模板分块,具有模块化的特质和更大的重用性。没有插槽的情况下在组件标签内些一些内容是不起任何作用的,当我在组件中声明了slot元素后,在组件元素内写的内容就会跑到它这里了!Slot 通俗的理解就是“占坑”,在组件模板中占好了位置,当使用该组件标签时候,组件标签里面的内容就会自动填坑(替换组件模板中。假如既有传入的内容又有默认内容,那么这个传入的内容将会替代默认的内容被渲染出来.原创 2023-07-25 11:39:31 · 142 阅读 · 0 评论 -
路由导航守卫
4.在beforeRouteEnter钩子中next((vm)=>{})内接收的回调函数参数为当前组件的实例vm,这个回调函数在生命周期mounted之后调用,也就是,他是所有导航守卫和生命周期函数最后执行的那个钩子。运行在路由上的守卫 (相比上面的全局守卫 全局守卫:只要有跳转就会执行守卫函数 而路由守卫呢 是只有跳转到当前的路由时才执行路由守卫函数) 用处:一般做跳转判断。【组件内的】:是指在组件内执行的钩子函数,类似于组件内的生命周期,相当于为配置路由的组件添加的生命周期钩子函数。原创 2023-07-26 10:38:27 · 135 阅读 · 0 评论 -
VUE路由安装和使用
通过createRouter创建路由对象并传入routes和history模式。创建history路由模式。在main.js中引入并使用。创建基于内存的历史记录。创建hash路由模式。vue2.x使用的是。原创 2023-07-25 11:43:33 · 215 阅读 · 0 评论 -
vue3路由属性和配置
像vue这种单页面应用,如果没有应用懒加载,运用webpack打包后的文件将会异常的大,造成进入首页时,需要加载的内容过多,时间过长,会出啊先长时间的白屏,即使做了loading也是不利于用户体验,而运用懒加载则可以将页面进行划分,需要的时候加载页面,可以有效的分担首页所承担的加载压力,减少首页加载用时。用户第一次访问网站页面(“/根目录”首页)时,地址栏里边没有“#锚点”的信息,也就没有对应的组件用于显示,用户体验不好,现在可以通过。实现一种效果,即当浏览器没有任何 #锚点信息时,默认也给显示一个组件。原创 2023-07-25 11:48:24 · 969 阅读 · 0 评论 -
Nuxt.js框架使用
注意:如果使用pnpm,请确保之前有.npmrcwith shamefully-hoist=trueinside pnpm install。nuxt.js是一套使用vue框架开发应用的服务端渲染框架,提供了开箱即用的功能.一套vue(react)代码,在服务端执行一次,在客户端再执行一次,就做同构。浏览器窗口应自动打开。原创 2023-07-26 11:59:04 · 109 阅读 · 0 评论 -
vue组件之间数据共享
由于vue是单向数据流,父组件传递给子组件的属性,子组件只能使用不能修改,在vue2中可以使用.sync修饰符.但是在vue3中v-bind的.sync修饰符和组件的model选项被删除了.在vue3中我们可以直接使用v-model语法糖进项绑定,绑定属性发生了变化,属性名是 modelValue, 事件名是:update:modelValue.:在任何后代组件中接收想要添加在这个组件上的数据,不管组件嵌套多深都可以直接拿来用。子组件向父组件传值可以使用$emit。子组件child.vue组件。原创 2023-07-25 09:35:15 · 1003 阅读 · 0 评论 -
vue路由嵌套
实际生活中的应用界面,通常由多层嵌套的组件组合而成。一个页面当中有多个子页面 这种结构叫做嵌套路由。需要在children中指定相应的子路由。原创 2023-07-25 11:49:25 · 125 阅读 · 0 评论 -
vue3动态组件
我们可以使用activated(),在组件激活的时候会被调用,每次进入页面的时候,都会执行,在这个里面进行数据的请求,用来替代mounted。简单的说,动态组件就是将几个组件放在一个挂载点下,这个挂载点就是标签,其需要绑定is属性,属性值为父组件中的变量,变量对应的值为要挂载的组件的组件名,然后根据父组件里某个变量来动态显示哪个,也可以都不显示.包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们。可以将动态组件放到组件内对动态组件进行缓存,这样动态组件进行切换的时候,就不会每次都重新创建了。原创 2023-07-25 11:42:13 · 1535 阅读 · 0 评论 -
vue3实现侦听器
它会在同步执行过程中,自动追踪所有能访问到的响应式属性。watch 的第一个参数可以是不同形式的“数据源”:它可以是一个 ref (包括计算属性)、一个响应式对象、一个 getter 函数、或多个数据源组成的数组.然而在有些情况下,我们需要在状态变化时执行一些“副作用”:例如更改 DOM,或是根据异步操作的结果去修改另一处的状态。watchEffect的套路是:不用指明监视哪个属性,监视的回调中用到哪个属性,那就监视哪个属性。watch的套路是:既要指明监视的属性,也要指明监视的回调。原创 2023-07-24 11:14:06 · 212 阅读 · 0 评论 -
reactive和ref
接收的数据可以是:基本类型、也可以是对象类型。了Vue3.0中的一个新函数——基本类型的数据:响应式依然是靠。作用: 定义一个响应式的数据。创建一个包含响应式数据的。对象类型的数据:内部。原创 2023-07-24 11:09:34 · 146 阅读 · 0 评论 -
vue3生命周期
每个 Vue 实例在被创建时都要经过一系列的初始化过程。例如:从开始创建、初始化数据、编译模板、挂载Dom、数据变化时更新DOM、卸载等一系列过程。我们称这一系列的过程就是Vue的生命周期。通俗说就是Vue实例从创建到销毁的过程,就是生命周期。同时在这个过程中也会运行一些叫做生命周期钩子的函数,这给了用户在不同阶段添加自己的代码的机会,利用各个钩子来完成我们的业务代码。原创 2023-07-24 11:15:16 · 4893 阅读 · 0 评论 -
vue响应式原理
说明:比如,Object.defineProperty(obj, name, desc)在无法定义属性时,会抛出一个错误,而Reflect.defineProperty(obj, name, desc)则会返回false。说明:Reflect对象的方法与Proxy对象的方法一一对应,只要是Proxy对象的方法,就能在Reflect对象上找到对应的方法。通过Proxy(代理): 拦截对象中任意属性的变化, 包括:属性值的读写、属性的添加、属性的删除等。数组类型:通过重写更新数组的一系列方法来实现拦截。原创 2023-07-24 11:10:30 · 134 阅读 · 0 评论 -
vue3事件处理
exact。原创 2023-07-24 11:11:57 · 382 阅读 · 0 评论 -
setup函数
创建的方法也好,都将变成允许被响应式地使用,仿佛 Vue2 中的这些 API 都被融合在一起了一样,而实际上 Vue3 也是为了实现这个目的。,就是我们最近总是是能听到的 Composition API,组合式 API。关于这个 API 的细节,还请参阅。中创建并 return 的所有东西,都将被得到外部的解析,无论是过去在。组件中所用到的:数据、方法等等,均要配置在setup中。理解:Vue3.0中一个新的配置项,值为一个函数。,这里我只期望说一下简单的内容。中创建的数据也好,还是在。原创 2023-07-24 11:08:55 · 378 阅读 · 0 评论 -
创建vue3项目
Vite 的实现原理是利用 ES6 的 import 会发送请求去加载文件的特性,拦截这些请求,做一些预编译,省去 webpack 冗长的打包时间。Vite 是一个 web 开发构建工具,由于其原生 ES 模块导入方法,它允许快速提供代码。通过在终端中运行以下命令,可以使用 Vite 快速构建 VUE 项目比webpack打包更加快速。于浏览器原生 ES imports 开发,在生产环境下基于 Rollup 打包。—— 新一代前端构建工具。传统构建 与 vite构建对比图。 1.快速的冷启动。原创 2023-07-24 11:07:59 · 95 阅读 · 0 评论 -
vue中的ref
2.遍历的元素,先定义一个空数组,定一个函数获取元素,返回给模板使用,通过ref绑定这个函数。1.单个元素:先声明ref响应式数据,返回给魔板使用,通过ref绑定数据。原创 2023-07-24 11:16:28 · 2964 阅读 · 1 评论 -
vue3计算属性
模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护。(2)如果计算属性要被修改,那必须写set函数去响应修改,set函数可以接收用户修改计算属性的值。与methods实现相比,computed内部有缓存机制(复用),效率更高,调试方便。在多数情况下我们只考虑读取不考虑修改,可以把set部分删掉,直接改写成函数的形式.(1)当给计算属性设置值的时候会触发set()计算属性默认有自己的get()和set().(2).当依赖的数据发生改变时会被再次调用。原创 2023-07-24 11:13:16 · 572 阅读 · 0 评论