![](https://img-blog.csdnimg.cn/20201014180756928.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
Vue
文章平均质量分 91
Vue学习记录
努力的小朱同学
未来很长,梦想很远。
展开
-
Vue3 之 动态组件和KeepAlive组件
动态组件允许在同一挂载节点动态切换多个组件,可以根据具体条件,动态决定显示的组件。动态组件默认只保持当前组件存活,其余被切换掉的组件会被卸载,但可以结合KeepAlive组件实现被切换掉的组件保持存活状态。将KeepAlive组件包裹在动态组件的外层,当动态组件发生切换时,默认会将所有被切走的非活跃组件进行缓存,而不是销毁,并且组件内部的状态也会被保留。原创 2024-05-28 16:22:58 · 992 阅读 · 0 评论 -
Vue3学习记录(八)--- 组合式API和TypeScript
在基于Vite的项目中,开发服务器和打包器将只会对 TypeScript 文件执行语法转译,将其转换成JavaScript,而不会执行类型检查,因此在开发时推荐使用 VScode + Vue-Official 来获取即时的TS类型错误反馈。在单文件组件中,在使用了``之后,组件模板中的表达式也同样受到TS的类型支持,可以在模板表达式中使用TS的语法。原创 2024-03-21 22:27:33 · 1037 阅读 · 0 评论 -
Vue3学习记录(七)--- 组合式API之指令和插件
v-memo该指令是Vue3的`v3.2`版本之后新增的指令,用于实现组件模板缓存,优化组件更新时的性能。除了Vue为我们提供的内置指令之外,还允许注册自定义指令,实现逻辑复用。一个自定义指令由一个包含指令钩子函数的对象来定义。插件(`Plugins`)是Vue中一种重要的扩展机制,允许开发者向 Vue 应用示例添加全局级别的功能。但插件本身并不具有添加全局功能的能力,而是需要借助`app.component()`等方法去实现功能。原创 2024-03-21 22:19:07 · 1097 阅读 · 0 评论 -
Vue3学习记录(六)--- 组合式API之依赖注入和异步组件
依赖注入包括provide(全局/局部)、inject、响应式变量的依赖注入、readonly()只读、依赖名称冲突等相关内容。异步组件包括:defineAsyncComponent()基本用法、ES模块动态导入、加载与错误状态处理等相关内容。原创 2024-03-08 11:20:34 · 1182 阅读 · 0 评论 -
Vue3学习记录(五)--- 组合式API之组件透传和组件插槽
组件透传包括属性透传、属性合并、属性冲突、事件透传、深层透传、禁用透传以及多根元素透传等相关内容。组件插槽包括基本用法、渲染作用域、默认内容、具名插槽、动态插槽名、作用域插槽等相关内容。原创 2024-03-08 11:15:14 · 1889 阅读 · 1 评论 -
Vue3学习记录(四)--- 组合式API之组件注册和组件数据交互
一个创建好的单文件组件(SFC)首先要进行注册,然后才能被别的组件使用。注册方法按照作用域区分为两种:全局注册和局部注册。全局注册需要通过`main.js`中利用Vue应用实例中提供的component()。局部注册需要在父组件中显式的导入要使用的组件。父组件想要向子组件传递数据,需要借助`Props`来实现。子组件向父组件传递数据需要借助自定义事件实现。父子组件之间可以通过`v-model`和`defineModel()`宏方法实现数据在父子组件之间的双向绑定。原创 2024-03-04 17:04:59 · 1390 阅读 · 0 评论 -
Vue3学习记录(三)--- 组合式API之生命周期和模板引用
生命周期,指的是一个 Vue 实例从创建到销毁的完整阶段。生命周期钩子函数,指的是 Vue 实例提供的内置函数,函数的参数为一个回调函数。这些钩子函数会在实例生命周期的某些固定时间点,依次按序执行其内部的回调函数。模板引用是Vue提供给我们用来操作DOM的一种方法,通过为DOM元素设置一个ref attribute属性,并设置属性值为一个响应式变量,从而获取对该DOM元素的引用。原创 2024-03-04 17:01:00 · 1528 阅读 · 0 评论 -
Vue3学习记录(二)--- 组合式API之计算属性和侦听器
计算属性computed(),用于根据依赖的响应式变量的变化,进行自动的计算,并返回计算后的结果。当依赖的响应式变量发生变化时,computed()会自动进行重新计算,并返回最新的计算结果。 侦听器`watch()`用于实现监听一个响应式变量的变化,侦听器接收三个参数,其第一个参数表示所侦听的响应式变量,第二个参数表示响应式变量变化之后触发的回调函数,第三个参数是一个可选的选项,用来进行一些侦听器配置。在响应式变量发生变化时,触发回调函数,然后在回调函数中根据变量的状态变化,执行对应的操作。原创 2024-02-02 17:12:28 · 802 阅读 · 0 评论 -
Vue3学习记录(一)--- 组合式API之基础概念和变量声明
组合式 API (Composition API) 是Vue3和Vue2的v2.7之后版本中的全新特性,是一系列API的的集合(响应式API、生命周期钩子、依赖注入等等),其风格是基于函数的组合,以一种更直观、更灵活的方式来书写Vue单文件组件。变量声明可用:ref、reactive、shallowRef、shallowReactive。原创 2024-02-02 17:08:36 · 1224 阅读 · 0 评论 -
Vue3新增特性 之 全局config.globalProperties和Teleport内置组件
1、在Vue3中,通过`createApp()`方法创造的应用实例会暴露一个 `config` 对象允许我们配置一些应用级的选项,例如全局变量。2、Teleport是 Vue 3 的新增的内置组件,用于将组件内的子节点传输/移动到整个页面 DOM 树的其他DOM节点下。其接收一个 to属性来指定传送的目标。to属性的值可以是一个 CSS 选择器字符串,也可以是一个 DOM 元素对象。原创 2024-01-27 21:06:05 · 2726 阅读 · 0 评论 -
Vue 之 修饰符汇总
在Vue中,修饰符是一种特殊的语法,用于修改指令或事件绑定的行为,它们以点号(`.`)的形式添加到指令或事件的后面,并可以改变其默认行为或添加额外的功能。Vue为我们提供了很多修饰符,相当于将一些常用DOM事件逻辑进行了封装,根据功能类别,共分为以下几类:① 事件修饰符。② 按键修饰符。③ 系统修饰符。④ 鼠标修饰符。 ⑤ 表单修饰符。⑥ 其他修饰符。原创 2024-01-05 16:25:20 · 1237 阅读 · 1 评论 -
Vue的MVVM模型和双向数据绑定原理
1、MVVM模型的概念 MVVM — 是 Model、View、ViewModel 三者的缩写,是一种前端开发的模式,其核心在于数据和视图的双向数据绑定,不再需要程序猿手动操作DOM,也就是所谓的去 DOM 化,让前端开发能高效、便捷。 Model 是数据层,其中定义了页面的数据信息以及对应的操作逻辑。 View 是视图层,负责展示各种数据,也就是用户所看到的页面。 ViewModel 是一个抽象层,是数据层和视图层沟通的桥梁,通过双向数据绑定,一方面将 Model 的数据变化,实时原创 2021-11-21 18:50:08 · 925 阅读 · 1 评论 -
Vue 工作开发小技巧
1、利用Sass的:global定义全局样式。2、在style内部使用v-bind给CSS属性绑定属性值。3、父子组件传值时,使用sync修饰符后,可直接在子组件中通过$emit('update:propName')来更新父组件中绑定的数据。4、利用v-bind同时向DOM元素绑定多个attribute属性。5、Vue指令结合动态参数,动态改变DOM元素的属性或改变监听的事件。原创 2023-12-14 11:47:21 · 1101 阅读 · 0 评论 -
Vue 之 mixins 和 provide/inject
`mixins` 又称 混入,是指将一些可复用的代码(JS、生命周期钩子函数等等)抽离出来,定义成`mixins`模块,然后混入到多个组件中,从而实现组件间的代码共享,减少重复代码。`provide/inject ` 是Vue在2.2.0版本新增的特性,该特性可以实现祖先组件向其后代组件跨层级传递数据,无论两者中间相隔多少组件层级,相对于传统的`props`传递方式,减少了传递数据的繁琐操作,提升了代码的可读性和可维护性。原创 2023-07-04 20:41:33 · 1382 阅读 · 0 评论 -
Vue Cli 之 环境变量和模式
我们在使用 Vue-cli 创建的Vue项目中,可以在构建和运行时为项目设置环境变量,这些环境变量会根据环境(模式)的不同,而自动注入到项目中,也就是说我们可以根据环境不同,设置不同的环境变量或者给同个环境变量赋予不同的值,从而实现不同的效果。原创 2023-05-10 10:25:02 · 2286 阅读 · 0 评论 -
Vue 之 解决v-html生成的元素不能触发@click等vue事件和CSS样式不生效的方法
通过官方文档可以得知两个重点:① 通过v-html生成的页面元素,不会被当做Vue模板进行编译,只会作为普通的html代码被插入,也就是说通过v-html插入的html@click、v-if等,则不会生效,因为他们没有被Vue编译,而浏览器并不会识别这些vue语法,所以这些语法都不生效。② 在.vue文件中如果style标签上增加了scoped属性,那么该标签内的样式就不会对v-html生成的页面元素起作用,还是因为这些元素没有被当做Vue模板进行编译,所以不生效。原创 2022-09-05 00:12:39 · 15712 阅读 · 2 评论 -
vue 之 CSS进行样式穿透的方法(/deep/、::v-deep、>>> 、:deep、额外的全局<style>)
在很多vue的组件库 , 如vant,elementUI, iview等都可能自定义一些样式文件,如果我们在项目中引入了样式组件或者通过v-html渲染了数据,然后想要去修改他们内部的某元素的样式, 直接修改样式很可能不起作用,修改无效, 但如果直接去掉scoped话又会影响全局样式,令人头疼。本文是介绍:样式穿透和额外的全局的方式来解决该问题。原创 2022-09-05 00:11:00 · 9641 阅读 · 6 评论 -
在 Nuxt.js 和 Vue.js 项目中引入第三方字体或艺术字
1、在项目的assets文件夹下创建一个fonts的文件夹2、将UI给的字体文件放到该目录下3、在 fonts 文件夹中新建一个fonts.css 文件4、在 fonts.css 文件中引入字体,并定义字体名称5、在项目中使用第三方字体,分为以下两种情况:...原创 2022-08-04 22:43:25 · 2952 阅读 · 1 评论 -
Vue学习笔记(九)--- Vuex
一、Vuex 概述 Vuex 是实现组件全局数据管理的一种机制,可以很方便的实现组件之间的数据共享。我们之前学习的组件之间的数据共享方式,如父子组件传值、EventBus 等,都只适用于小范围的数据共享。而 Vuex 可以实现整个项目范围的数据共享。 使用 Vuex 统一管理全局数据的优点:① 能够集中管理共享的数据,易于开发和后期维护。 ② 能够高效的实现组件之间的数据共享,提高开发效率。 ③ 存储在 vuex 中的数据是响应式的,能够实时保持数据与页面的同步。二、Vuex 的安装1、打原创 2021-11-01 19:56:22 · 214 阅读 · 0 评论 -
Vue学习笔记(四)--- 前后端交互基础和Promise
一、前后端交互基础1、概念 什么是前后端交互?其实就是指前端通过接口,向后端发送请求,后端接收到请求之后,返回相应的数据,前端接收到数据后,再根据数据的内容,做出相应的展示或跳转的这个过程,就是前后端交互的过程。接口是由后端定义书写,前端只需要知道相应接口的请求方式、请求地址、携带参数等信息,然后通过特定的方式调用接口即可。2、前端调用接口的方式原生ajax 代码繁琐,调用麻烦,不常用。基于jQuery的ajax 对 ajax 的二次封装,简化了很多代码,但目前也很少用。fetc原创 2021-10-13 11:34:01 · 580 阅读 · 0 评论 -
Vue学习笔记(七)--- ref 引用 和 生命周期相关
ref 可以让开发者在不依赖 jQuery 的前提下,获得页面中 DOM 元素或组件的引用。vue的生命周期主要分为四大步:创建、挂载、更新、销毁,每一大步又分为两小步。分别有:beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestroy、destroyed。...原创 2021-10-27 19:28:59 · 1500 阅读 · 1 评论 -
前端工程化(三)--- vue-cli 脚手架
一、概念 vue-cli 是 Vue.js 的开发工具,它简化了程序员基于webpack 创建工程化的Vue项目的过程。可以让开发者把精力专注在应用逻辑上,而不必花好几天去纠结 webpack 配置的问题。 中文官网:Vue CLI (vuejs.org)二、Vue项目的运行流程 在工程化的项目中,vue要做的事情很单纯就是通过 main.js 将App.vue 渲染到index.html的指定区域中。分开来说就是,App.vue 用来编写待渲染的模板结构,index.html 中要预留原创 2021-10-26 14:19:43 · 174 阅读 · 0 评论 -
Vue学习笔记(五)--- fetch、axios、async和await
一、fetch1、概念 Fetch 是新的 ajax 解决方案,是 XMLHttpRequest 的升级版,利用原生 js 发送请求。fecth 的功能与 XMLHttpRequest 基本相同,不同之处有:首先fecth 会返回 Promise 对象,不使用回调函数,使代码更简洁。其次 fecth 采用模块化设计,API分散在多个对象上(Response 对象、Request 对象、Headers 对象)。2、语法fetch(url[,{options}]).then().then()原创 2021-10-14 11:54:54 · 1413 阅读 · 0 评论 -
Vue学习笔记(三)--- 组件化开发
Vue学习笔记(三)— 组件化开发一、组件简介 组件(Component)是Vue中非常强大的一种功能,用来封装可重用的代码,方便在不同的位置进行调用。组件注册后,便可以HTML标签的形式使用。总的来说,组件就是把一个页面划分成一个个的小零件,然后通过这些可重复使用的小零件来构建页面。可以避免相同代码的重复书写。二、组件注册1、全局注册 **基础语法:**Vue.component(‘组件名称’,{}) 第一个参数是所注册组件的名称,用单引号包裹,第二个参数是一个选项对象。全局注册的原创 2021-03-04 20:42:52 · 463 阅读 · 2 评论 -
Vue学习笔记(六)--- 前端路由 Vue Router
一、路由1、概念 路由本质上来说就是一种对应关系,比如说我们在浏览器中输入不同的 url 地址,我们就能访问不同的资源,那么这 url 地址与资源之间的对应关系,就是路由。2、分类① 后端路由 后端路由是通过服务器实现的,根据不同的用户 url 请求,返回不同的资源,本质上就是 url 地址与服务器资源之间的对应关系。② 前端路由 前端路由是通过页面 hash 值(锚链接) 的变化实现的,根据不同的页面事件来显示不同的页面内容,本质上是用户事件与事件处理函数之间的对应关系。原创 2021-10-19 10:58:27 · 5353 阅读 · 0 评论 -
Vue学习笔记(八)--- 动态组件和组件插槽
一、动态组件1、概念 动态组件是指在页面的某个位置,动态的切换不同的组件,显示不同的组件内容。Vue 为开发者提供了一个内置的 组件,专门用来实现动态组件的渲染。2、基本使用<template> <div class="app-container"> <button @click="comName = 'Left'">展示 Left</button> <button @click="comName = 'Right'"&原创 2021-10-29 14:27:44 · 947 阅读 · 0 评论 -
vue学习笔记(一)
声明:我是在校大学生,刚开始学习Vue,这是我用来记录自己的学习路程的博客,可能会理解有偏差,如果文中出现错误,望读者能够及时提醒,”三人行,必有我师“,提前感谢各位支持!一、什么是Vue? Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的渐进式框架。Vue 只关注视图层, 采用自底向上增量开发的设计。Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。Vue是当前国内最流行的前端框架,而且学习比较简单,容易理解。二、学习Vue的前置原创 2020-11-30 20:13:55 · 327 阅读 · 1 评论 -
Vue学习笔记(二)模板语法和常用特性
Vue学习笔记(二)一、指令1.v-cloak指令 **作用:**防止页面加载时出现闪烁问题(当网络较慢,网页还在加载 Vue.js ,而导致 Vue 来不及渲染,这时页面就会显示出 Vue 源代码–>{{ msg }}等。此时我们可以使用 v-cloak 指令+css来解决这一问题。),此指令最重要的特点就是 在页面渲染完成后,c-cloak 会被自动移除。原创 2020-12-22 21:10:49 · 300 阅读 · 0 评论