Vue
theLuckyLong
这个作者很懒,什么都没留下…
展开
-
Vue学习笔记-Vue3中的Teleport组件
如上述代码所示,teleport中的html元素被传送至body中,无论谁调用该组件。该组件的作用一般用于CSS样式,Teleport能够将写在其中的组件传输到指定位置。原创 2023-12-15 14:56:53 · 184 阅读 · 0 评论 -
Vue学习笔记-Vue3对响应式数据的判断
【代码】Vue学习笔记-Vue3对响应式数据的判断。原创 2023-12-15 11:05:03 · 153 阅读 · 0 评论 -
Vue学习笔记-Vue3中的provide与inject
用于实现祖孙间的数据通信。原创 2023-12-15 10:09:45 · 233 阅读 · 0 评论 -
Vue学习笔记-Vue3中的customRef
创建一个自定义的ref,并对其依赖项的更新和触发进行显式控制。描述:向输入框中输入内容,在下方延迟1秒展示输入内容。原创 2023-12-14 17:15:35 · 135 阅读 · 0 评论 -
Vue学习笔记-Vue3中的toRaw和markRaw
使用场景:有些值不应该被设置为响应式的,例如第三方类库,或者渲染一些不可变的复杂对象(包含多层嵌套对象)时,跳过响应式可以提高性能。使用场景:用于读取响应式对象对应的普通对象,对该普通对象的所有操作不会引起页面更新。作用:标记一个对象,使其不再成为响应式对象。生成的响应式对象转为普通对象。原创 2023-12-14 15:14:44 · 238 阅读 · 0 评论 -
Vue学习笔记-Vue3中的readonly和shallowReadonly
备注]:上述应用场景一般用在不希望响应式数据被修改时(例如,某个响应式数据来自于别的模块,而自己负责的模块只是需要读取使用,而不用修改)原创 2023-12-14 11:28:40 · 184 阅读 · 0 评论 -
Vue学习笔记-Vue3中的shallowReactive和shallowRef
reactive。原创 2023-12-14 10:11:39 · 401 阅读 · 0 评论 -
Vue学习笔记-Vue3的toRef和toRefs
【代码】Vue学习笔记-Vue3的toRef和toRefs。原创 2023-12-14 09:44:44 · 136 阅读 · 0 评论 -
Vue学习笔记-Vue3中的watchEffect函数
【代码】Vue学习笔记-Vue3中的watchEffect函数。原创 2023-12-11 10:46:50 · 241 阅读 · 0 评论 -
Vue学习笔记-Vuex四个map方法的使用
是ES6语法,表示将该的对象所有属性展开,放入其所在上级对象中。配置完毕之后,当组件访问state中的数据,可以由原来的。配置完毕后,当组件访问getters中的数据,可以由。帮助我们生成与mutations对话的方法,即包含。帮助我们生成与actions对话的方法,即包含。原创 2023-11-28 16:21:40 · 220 阅读 · 0 评论 -
Vue学习笔记-Vuex中getters的使用
当Vuex中state里的数据需要加工后再使用,并且希望复用时,可以使用getters加工。在/store/index.js中追加getters配置。原创 2023-11-28 10:44:19 · 189 阅读 · 0 评论 -
Vue学习笔记-Vuex基本使用
备注]:actions对象中的方法一般涉及到业务逻辑的判断或者网络请求,而mutations中的方法一般直接操作数据,如果组件调用的方法不涉及网络请求或者业务逻辑判断(即方法比较简单无脑),则可越过actions,直接调用mutations中的方法(调用commit方法)初始化数据、配置actions、mutations,操作文件/store/index.js。组件中修改Vuex中的数据。原创 2023-11-28 10:18:30 · 298 阅读 · 0 评论 -
Vue学习笔记-搭建Vuex
在Vue实现集中式状态(数据)管理的一个插件,对Vue中多个组件的共享状态进行集中式的管理(读/写),也是一种组件间的通信方式,适用于任意组件间的通信。多个组件需要共享数据时。原创 2023-11-24 16:54:33 · 359 阅读 · 0 评论 -
Vue学习笔记-插槽
作用:让父组件可以向子组件的指定位置插入html结构,也是一种组件间的通信方式,适用于父组件===>子组件。分类:默认插槽、具名插槽、作用域插槽。原创 2023-11-20 11:13:25 · 102 阅读 · 0 评论 -
Vue学习笔记-配置代理服务器(用于解决跨域问题)
跨域问题指的是在 Web 应用程序中,由于同源策略的限制,导致浏览器无法发送跨域请求,也无法获取跨域响应的问题。同源策略是浏览器的一种安全策略,它要求 Web 应用程序只能访问与当前页面具有相同协议、主机名和端口号的资源。如果不同源的 Web 应用程序需要通信,就需要进行跨域请求。但由于同源策略的限制,浏览器不允许跨域请求。在此情况下,如果前端需要访问其他域名下的资源,就会出现跨域问题。为解决跨域问题,可以由前端(或者后端)来进行相应配置。这里来介绍前端Vue项目配置代理服务器来解决跨域问题的方法。原创 2023-11-16 10:36:08 · 454 阅读 · 0 评论 -
Vue学习笔记-$nextTick方法
【代码】Vue学习笔记-$nextTick方法。原创 2023-11-15 11:19:44 · 110 阅读 · 0 评论 -
Vue学习笔记-消息订阅与发布(pubsub)
3. 数据接收方(A组件):A组件订阅消息,并且订阅消息的回调函数留在A组件自身。一种组件间的通信方式,适用于任意组件间通信。1. 安装pubsub第三方库。原创 2023-11-14 17:03:51 · 287 阅读 · 0 评论 -
Vue学习笔记-全局事件总线
一种支持所有组件间的通信方式(原理:相当于提供一个全局对象,这个对象能够被任意组件访问到,并且这个对象能够调用Vue内置函数)3.1 数据接收方:需要绑定自定义事件,在组件即将销毁的时候,解除对应的事件绑定。最好在 beforeDestory( )钩子中使用$off方法解除自定义事件的绑定。原创 2023-11-14 14:43:28 · 266 阅读 · 0 评论 -
Vue学习笔记-模块化+命名空间
注意:mapActions和mapMutation中无法填写函数参数,需要在html组件的@click方法声明中自己填写。让代码更好维护,让多种数据分类更加明确(不同的模块挤在一个index.js中显得臃肿且不方便管理)开启命名空间后,组件读取各个模块的state数据。(也可以将不同模块分别写在不同的js文件中)组件读取各个模块的getters数据。组件调用dispatch。组件调用commit。原创 2023-11-29 14:45:26 · 201 阅读 · 0 评论 -
Vue学习笔记-路由的基本使用
实现组件切换,在App.vue中编写如下内容(active-class类用于动态地为选中的标签添加样式)在src路径下创建router文件夹,并创建index.js文件,该文件用于配置路由规则。在main.js中导入vue-router模块,并且使用vue-router插件。vue2 要下载vue-router3。vue3 要下载vue-router4。指定展示切换的组件的位置。原创 2023-11-30 10:10:09 · 1413 阅读 · 0 评论 -
Vue学习笔记-命名路由
如何理解:相当于给路径起别名。来解析js对象,对象中声明。使用命名路由时,要使用。原创 2023-11-30 16:52:03 · 303 阅读 · 0 评论 -
Vue学习笔记-<router-link>的replace的属性
是追加历史记录(将浏览的url请求入栈),replace则是替换当前记录。作用:控制路由跳转时操作浏览器历史记录的模式。,前者为简写,后者为全写。原创 2023-12-04 11:12:25 · 267 阅读 · 0 评论 -
Vue学习笔记-编程式路由导航
可以在方法中通过指定API进行路由跳转。实现路由跳转,让路由跳转更加灵活。原创 2023-12-04 15:28:08 · 69 阅读 · 0 评论 -
Vue学习笔记-缓存路由组件
让不展示的路由组件保持挂载,不被销毁。在需要缓存的路由组件。原创 2023-12-04 15:49:47 · 196 阅读 · 0 评论 -
Vue学习笔记-activated和deactivated生命周期
定义一个NewsVue组件,要求:当该组件出现时,部分字体的透明度周期性变化,当该组件被切换走时,需要被缓存,但需要注销其定时器。所独有的2个生命周期。原创 2023-12-05 15:51:08 · 310 阅读 · 0 评论 -
Vue学习笔记-路由守卫
全局守卫、独享守卫、组件内守卫。原创 2023-12-06 14:08:36 · 134 阅读 · 0 评论 -
Vue学习笔记-Vue3中ref和reactive函数的使用
为了让vue3中的数据变成响应式,需要使用ref函数。原创 2023-12-07 10:53:49 · 437 阅读 · 0 评论 -
Vue学习笔记-Vue3中setup函数注意点
之前执行一次,并且此时输出。原创 2023-12-08 14:08:22 · 222 阅读 · 0 评论 -
Vue学习笔记-Vue3中的计算属性与监视属性
与vue2中watch功能一致。原创 2023-12-08 16:32:56 · 258 阅读 · 0 评论 -
通过IDEA创建Vue项目遇到的坑
初次学习开发Vue项目,使用idea创建,按照网络上的教程,结果踩了一地的坑,大多数的解决办法也并不适用,(或许是我各个资源的版本太老)总之idea创建后,npm install之后在运行一直是缺失Dev,package里也确实没有。最后发现在npm install 之前得vue init webpack 初始化才行。...转载 2021-04-04 17:25:35 · 495 阅读 · 0 评论 -
Vue学习--插槽slot 自定义事件内容分发
什么是插槽在Vue.js中,使用<slot>元素,作为承载内容分发的出口`。即,在模板中开一个口,用于拼接其他模板。案例<!DOCTYPE html><html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml"><head> <meta charset="UTF-8"> <title>Slot</title> <script s原创 2021-03-31 17:27:38 · 547 阅读 · 0 评论 -
Vue学习--计算属性
什么是计算属性就是将计算出来的结果,保存在属性中,可以理解为缓存。案例<!DOCTYPE html><html lang="en" ><head> <meta charset="UTF-8"> <title>Title</title> <script src="https://cdn.bootcss.com/vue/2.5.2/vue.min.js"></script><原创 2021-03-31 15:23:58 · 129 阅读 · 0 评论 -
Vue学习--Axios异步通信
什么是Axios之前,前端与后端进行数据资源交互,用到的是jQuery下的Ajax。现在axios的出现,可以干之前ajax干的活。Axios 是一个基于 promise 的 HTTP 库,简单的讲就是可以发送get、post请求。值得注意的是,axios要求浏览器中的JS版本为ECMAScript6及以上。使用方式可以去官网下载,也可以使用在线cdn,本文采取后者,方便内容讲解<!--通过cdn方式引入axios--><script src="https://unpk原创 2021-03-31 15:04:39 · 164 阅读 · 0 评论 -
Vue学习--组件
什么是组件组件是可复用的Vue实例,说白了就是一组可以重复使用的模板,跟JSTL的自定义标签,Thymeleaf 的 th:fragment等类似。组件的创建(在Html页面中)Vue.component("componentName",{ template: "<div>" +"<div>" +"</div>" +"</div>"});模板的使用<!DOCTYPE html><html lang=原创 2021-03-31 12:53:45 · 93 阅读 · 0 评论 -
Vue学习--双向绑定
前言设想一个这样的情况:在前端有一个输入框,一个输出框,当用户在输入框输入数据时,输出框也会显示。这时,可以用到v-model指令:将前端的输入数据与Vue中的data域中的属性进行绑定。v-model<!DOCTYPE html><html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml"><head> <原创 2021-03-31 12:10:21 · 152 阅读 · 0 评论 -
Vue学习--绑定事件
v-on:xxx可以使用v-on指令监听DOM事件,并在触发时,运行一些JavaScript代码。这里xxx可以指任何的事件名,包括自定义,具体用法如下:<!DOCTYPE html><html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml"><head> <meta charset="UTF-8"> <title>Title</title> &l原创 2021-03-30 20:31:34 · 98 阅读 · 0 评论 -
Vue学习--基本语法
v-bind通过v-bind,可以将Vue对象中data域中的数据与前端的Dom对象的属性值进行绑定。具体使用方式如下:<!DOCTYPE html><html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml"><head> <meta charset="UTF-8"> <title>Title</title> <!--导入vue的js文件-原创 2021-03-30 20:09:16 · 120 阅读 · 0 评论 -
Vue学习--第一个Vue程序
前言前端开发Vue,需要用到NodeJs的环境,关于NodeJs如何安装,请看这篇博客:NodeJs安装教程本章主要记录Vue的基本语法以及使用方式,并不代表最终的开发环境导包既然要使用Vue,肯定要先获取Vue的安装环境,与JQuery类似,可以从Vue官网下载Vue.js的包,也可以使用cdn的方式导入,本文采取后者,方便使用<!--导入vue的js文件--><script src="https://cdn.bootcss.com/vue/2.5.2/vue.min.js"原创 2021-03-30 19:25:20 · 119 阅读 · 0 评论