![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
vue3
文章平均质量分 92
清风 与我
这个作者很懒,什么都没留下…
展开
-
Vue3 中的模板语法
我们可以把 Vue.js 的模板语法,直接理解为 HTML 语法的一种扩展,它所有的模板节点声明、属性设置和事件注册等都是按照 HTML 的语法来进行扩展设计的。按照官方的说法就是“所有的 Vue 模板都是语法层面合法的 HTML,可以被符合规范的浏览器和 HTML 解析器解析”。Vue 使用一种基于 HTML 的模板语法,使我们能够声明式地将其组件实例的数据绑定到呈现的 DOM 上原创 2023-03-05 20:03:27 · 3235 阅读 · 49 评论 -
Vue3 中组件的使用(下)
在上一章中我们学习了如何注册组件,组件之间的父子通信,在本文中会给大家继续讲解 Vue3 组件中剩余的内容。在封装组件时,可以使用元素把不确定的、希望由用户指定的部分定义为插槽;插槽可以理解为给预留的内容提供占位符。插槽也可以提供默认内容,如果组件的使用者没有为插槽提供任何内容,则插槽内的默认内容会生效。注意:如果在封装组件时没有预留任何插槽,用户提供传递一些模板片段将会被遗弃。原创 2023-02-27 20:02:16 · 1636 阅读 · 14 评论 -
Vue3 中组件的使用(上)
组件(Component)是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素,封装可重用的代码。组件系统让我们可以用独立可复用的小组件来构建大型应用,几乎任意类型的应用的界面都可以抽象为一个组件树:组件就相当于页面的零件,当做正常的标签使用,不过能够进行自定义的数据传输和事件监听。组件内也能使用其他的组件,任意处都能够使用。一个 Vue 组件在使用前需要先被 “注册”,这样 Vue 才能在渲染模板时找到其对应的实现;组件注册有两种方式:全局注册、局部注册原创 2023-02-24 19:57:15 · 22453 阅读 · 46 评论 -
Vue3 中生命周期的使用
组件从创建到销毁的整个过程,不同阶段执行不同的函数每个 `Vue` 组件实例在创建时都需要经历一系列的初始化步骤,比如数据侦听,编译模板,挂载实例到 `DOM`,以及在数据改变时更新 `DOM`。在此过程中,它也会运行被称为生命周期钩子的函数,让开发者有机会在特定阶段运行自己的代码。最常用的是`created`、`mounted`、`updated` 和 `unmounted`。原创 2023-02-21 20:07:37 · 6487 阅读 · 34 评论 -
Vue3 的状态管理库(Pinia)
- `Pinia` 是 `Vue` 的专属状态管理库,它允许你跨组件或页面共享状态。- `Pinia` 是 `Vuex4` 的升级版,也就是 `Vuex5`- `Pinia` 极大的简化了 `Vuex` 的使用,是 `Vue3` 的新的状态管理工具- `Pinia` 对 `ts` 的支持更好,性能更优, 体积更小,无 `mutations`,可用于 `Vue2` 和 `Vue3`- `Pinia` 支持 `Vue Devtools`、 模块热更新和服务端渲染- `Pinia` 的官方地址为:[`h原创 2023-02-20 19:07:26 · 5650 阅读 · 6 评论 -
使用 Vue3 重构 Vue2 项目
2020年9月18日,vue3正式版发布了,前几天学习完成后,我决定重构后台管理项目,本篇文章给大家讲解了重构过程中遇到的一些问题和解决方案。为什么要重构项目:使代码更容易理解,方便后期维护,也就是要让每个模块的定位清晰明确发现隐藏的代码缺陷代码风格要优雅~,内容质量高,按照合理的设计模式和编程思想去重构同步新的需求项目功能交互来个极致体验,功能上要要尽量做到不卡顿 不闪退,要满足产品需求的细节从长远来看,可以提高编程效率原创 2023-02-16 15:14:38 · 1837 阅读 · 43 评论 -
Vue3 中 axios 的安装及使用
Axios是一个基于promise网络请求库,作用于node.js和浏览器中Axios在服务端它使用原生node.jshttp模块,而在客户端(浏览端)则使用 XMLHttpRequestsAxios可以拦截请求和响应、转换请求和响应数据、取消请求、自动转换JSON数据Axios安装方式:npm install axios原创 2023-02-13 08:38:54 · 5996 阅读 · 14 评论 -
Vue3 中 导航守卫 的使用
正如其名,vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航。这里有很多方式植入路由导航中:全局的,单个路由独享的,或者组件级的。导航守卫可分为:全局前置守卫、全局解析守卫、全局后置守卫、路由独享的守卫、组件内的守卫原创 2023-02-11 08:00:00 · 14706 阅读 · 6 评论 -
Vue3 中路由Vue Router 的使用
Vue Router 是 Vue.js 的官方路由。它与 Vue.js 核心深度集成,让用 Vue.js 构建单页应用变得轻而易举。功能包括:嵌套路由映射动态路由选择模块化、基于组件的路由配置路由参数、查询、通配符展示由 Vue.js 的过渡系统提供的过渡效果细致的导航控制自动激活 CSS 类的链接HTML5 history 模式或 hash 模式可定制的滚动行为URL 的正确编码原创 2023-02-09 10:58:43 · 4824 阅读 · 15 评论 -
Vue3 中computed计算属性的使用
目标:现在vue3的使用越来越普遍了,vue3这方面的学习我们要赶上,今天说一下vue3中computed计算属性的使用。computed函数在vue2中我们都了解过,当我们需要一个值,这个值随着其他值变化而变化,我们就将其放进computed中,computed是用来定义计算属性的。模板当中的表达式虽然很方便,但也只能做简单的操作,如果在模板写太多逻辑,但会让模板变得很臃肿,因此我们推荐使用计算属性来描述依赖响应式的复杂逻辑原创 2023-01-02 15:08:11 · 601 阅读 · 5 评论 -
Vue3 中组合式下的侦听器
1. watch:(手动性)显式的指定依赖数据,依赖数据更新时,才会执行回调函数具有惰性,第一次页面展示的时候不会执行,只有当指定的数据源发生改变时,才会执行;监听ref定义的响应式数据时,可以获取到原值;即要指明监听的属性,也要指明监听的回调;2. watchEffect:(自动性)自动收集依赖数据,依赖数据更新时,重新执行回调函数立即执行,没有惰性,页面首次加载就会执行无法获取到原值,只能得到变化后的值(新值)不能指明监视那个属性,监听的回调中,用到那个属性就监听那个属性原创 2022-12-30 15:02:15 · 1458 阅读 · 1 评论 -
Vue3 中选项式下的侦听器
1. 函数式的侦听器:其中函数名就是要侦听的数据源,函数中的参数,为新数据源的新、旧值;2. 对象式侦听器:在 watch 选项中声明的对象即为对象侦听器 1. 对象名就是要侦听的数据源。 2. 对象中的 handler 方法为数据源发生改变时,执行的代码块,其中参数一为新值,参数二为旧值 3. deep: 1. watch 默认是浅层,被侦听的属性,仅仅在被赋新值时,才会触发回调,嵌套的属性发生变化时,不会触发; 2. 如果想侦听所有嵌套的变更,你需要深层侦听器原创 2022-12-29 15:10:24 · 557 阅读 · 1 评论 -
Vue2和Vue3的双向数据绑定原理
当你把一个普通的 js 对象传入 vue 实例作为 data 选项,vue 将遍历此对象的所有prototype(属性),并使用 object.defineProperty(),将这些 prototype(属性),全部转换为 getter / setter,在 getter 中收集数据依赖,在 setter 中监听数据变化,一旦数据发生改变,在通知订阅者。每个组件实例,都对应一个 watcher 实例,它会在组件渲染的过程把 "接触" 过的数据 prototype(属性)记录为依赖,之后当依赖项的 set原创 2022-12-29 14:21:26 · 1888 阅读 · 1 评论 -
Vue3 setup 的作用
从 vue2 升级 vue3,vue3 是可以兼容 vue2。所以 vue3 可以采用 vue2 的选项式 API,但是 vue2 不能使用 vue3 的组合式 API。由于选项式 API 一个变量存在于多处,如果出现问题,就需要去涵盖多个函数。项目越大,排查的难度也就越大。setup 用来写组合式 API,从生命周期的角度,相当于取代了 beforeCreate()原创 2022-12-28 15:07:15 · 1510 阅读 · 0 评论 -
Vue3 响应式数据
什么是响应式数据?“响应式”,是指当数据改变后,Vue 会通知到使用该数据的代码。例如,视图渲染中使用了数据,数据改变后,视图也会自动更新。采用“数据劫持”结合“发布者-订阅者”模式的方式,通过“Object.defineProperty()”方法来劫持各个属性的setter,getter,在数据变动时发布消息给订阅者,触发相应的监听回调。原创 2022-12-27 15:10:52 · 4253 阅读 · 0 评论 -
Vue3 中 Vite 和 Vue-cli 的特点和区别
Vue-cli 是Vue2.0最棒的前端构建工具,是WebPack的超集Vue-cli 基于WebPack构建,配置好了打包规则内置了热模块重载的开发服务器有丰富的官方插件合集,站在webpack庞大的社区资源上友好的图形化创建和管理Vue项目界面 : vue uivue-cli在(前端)服务启动之前,要把所有代码打包成Bundle再启动服务,这也是为什么一个些大型项目 启动时,特别慢的原因。这一点在Vite做了大幅度改善。Vite是Vue团队开发的新一代前端开发与构建工具,vite不是基于w原创 2022-12-26 15:32:40 · 3655 阅读 · 2 评论