前端
文章平均质量分 73
曼诺尔雷迪亚兹
函数要先声明再调用
展开
-
Vue3状态管理库--Pinia
Pinia是一个基于Vue 3的状态管理库,它提供了简洁而强大的方式来管理应用程序中的状态。Pinia的设计理念是将状态管理的复杂性降到最低,同时保持灵活性和可扩展性。Pinia的核心概念是store,每个store都包含了应用程序的状态和一些用于修改状态的方法。通过在组件中使用Pinia提供的API,可以轻松地访问和更新store中的状态,从而实现状态在应用程序中的共享和管理。原创 2024-03-27 21:48:15 · 477 阅读 · 0 评论 -
Vue3快速入门
Vue3快速入门1、使用create-vue创建项目2、组合式API-常见函数2.1、组合式API入口-setup2.2、reactive()2.3、ref()2.4、computed计算属性函数2.5、watch侦听单个数据侦听多个数据immediatedeep精确侦听对象的某个属性3、组合式API-生命周期4、组合式API-父子通信4.1、子传父4.2、父传子5、组合式API-模版引用5.1、defineExpose()6、组合式API-provide和inject原创 2024-03-25 11:33:08 · 970 阅读 · 0 评论 -
Vue中对路由的进阶学习
说明:我们发现router-link自动给当前导航添加了两个高亮类名(router-link-exact-active 和 router-link-active)审查元素将新增的类改变属性:(router-link-exact-active 和 router-link-active)问题:配了路由path: "/search/:words”为什么按下面步骤操作,路径上没有参数,会未匹配到组件,显示空白?问题:网页打开,url默认是/路径,未匹配到组件时,会出现空白。好处:拆分模块,利于维护。原创 2023-10-11 15:01:27 · 387 阅读 · 0 评论 -
路由进阶--编程式导航(在Vue路由中实现跳转,跳转传参)
通过命名路由的方式跳转 (需要给路由起名字) 适合path路径长的情况。path 路径跳转传参(query传参,动态路径传参)需求:点击搜索按钮,跳转需要传参如何实现?两种传参方式:查询参数,动态路由传参。编程式导航:用JS代码来进行跳转。path 路径跳转(简易方便)需求:点击按钮跳转如何实现?name命名路由跳转传参。原创 2023-10-11 14:56:36 · 358 阅读 · 0 评论 -
Vue路由进阶--VueRouter声明式导航
说明:我们发现router-link自动给当前导航添加了两个高亮类名(router-link-exact-active 和 router-link-active)审查元素将新增的类改变属性:(router-link-exact-active 和 router-link-active)问题:配了路由path: "/search/:words”为什么按下面步骤操作,路径上没有参数,会未匹配到组件,显示空白?说明:router-link的两个高亮类名太长了,我们希望能定制怎么办?需求:实现导航高亮效果。原创 2023-10-10 14:00:45 · 362 阅读 · 0 评论 -
Vue中的router路由的介绍(快速入门)
路由的介绍1、VueRouter的介绍2、VueRouter的使用(5+2)2.1、5个基础步骤(固定)2.2、两个核心步骤3、组件存放的目录(组件分类)生活中的路由:设备和ip的映射关系(路由器)Vue中路由:路径和组件的映射关系修改地址栏路径时,切换显示匹配的组件说明:Vue官方的一个路由插件,是一个第三方包。原创 2023-10-10 13:57:31 · 260 阅读 · 1 评论 -
单页面应用 vs 多页面应用
单页面应用 vs 多页面应用原创 2023-10-10 13:56:21 · 68 阅读 · 0 评论 -
Vue中的插槽--组件复用,内容自定义
若是什么内容都不传递,那插槽处就是空白的。插槽后备内容:封装组件时,可以为预留的。原创 2023-09-24 19:13:29 · 168 阅读 · 0 评论 -
Vue中的自定义指令详解
自定义指令:自己定义的指令,可以封装一些dom 操作,扩展额外功能(自动聚焦,自动加载,懒加载等复杂的指令封装)全局注册(可以在其他组件中使用)Vue.directive('指令名',{//可以对el标签,扩展额外功能el.focus() //对元素的操作})局部注册(只能在当前的组件中使用)指令名:{//可以对el标签,扩展额外功能el.focus() //对元素的操作页面上使用:< input v-指令名type = " text " >原创 2023-09-22 21:35:47 · 463 阅读 · 0 评论 -
Vue异步更新机制、$nextTick实现同步更新
Vue.js是一种用于构建用户界面的渐进式 JavaScript 框架。其中一个非常重要的特性是异步更新。异步更新是指当数据发生变化时,Vue不会立即更新DOM。相反,它会在下一个“tick”或渲染循环中异步执行DOM更新。这种机制可以提高性能,减少不必要的操作。当我们直接修改 Vue 实例的数据时,Vue 会在内部将数据更新操作放入一个异步队列中,而不是立即进行更新。对于那些依赖于 Vue 更新的 DOM 操作,我们需要使用。方法来确保在DOM更新完成后执行操作。,才会触发执行此方法里的函数体。原创 2023-09-22 20:18:57 · 680 阅读 · 0 评论 -
Vue中的ref 和$refs的使用
作用:利用ref 和$refs可以用于,或特点:查找范围→当前组件内(,原生的dom在vue子组件中查找最终也会扫描到父组件)原创 2023-09-21 21:49:06 · 492 阅读 · 0 评论 -
Vue中的.sync修饰符
prop属性名,可以自定义,非固定为value(若是固定value采用v-model):可以实现子组件与父组件数据的双向绑定,简化代码(与v-model作用相同):封装弹框类的基础组件, visible属性true显示false隐藏。@update:属性名**合写。原创 2023-09-21 21:48:24 · 276 阅读 · 0 评论 -
在Vue中实现组件间的通信(父子通信,非父子通信,通用通信)
所以,当在子组件需要修改来自父组件prop的值时,需要通过$emit来将修改的逻辑传到父组件,在父组件修改传到子组件的值,再根据单项数据流的特点,从而改变子组件的值。原理:v-model本质上是一个语法糖(语法的简写)。例如应用在输入框上,就是value属性和 input事件的合写。:为组件的prop指定验证要求,不符合要求,控制台就会有错误提示–>帮助开发者,快速发现错误。单项数据流:父级prop 的数据更新,会向下流动,影响子组件。作用:非父子组件之间,进行简易消息传递。概念:组件通信,就是指。原创 2023-09-21 19:08:44 · 368 阅读 · 0 评论 -
vue的工程化开发全流程,以及开发中的细节语法和用法
开发Vue的两种方式:核心包传统开发模式:基于html / css / js 文件,直接引入核心包,开发Vue。工程化开发模式:基于构建工具(例如: webpack )的环境中开发Vue。项目的目录:项目的运行流程:// 作用:导入App.vue,基于App.vue创建结构渲染index.html//1.导入vue核心包//2、导入App根组件// 在控制台中提示:当前处于什么环境(生产环境、开发环境)原创 2023-09-21 19:01:36 · 533 阅读 · 0 评论 -
vue中computed计算属性与methods方法的区别
通俗的来讲,computed被多次调用的时候,因为存在缓存特性,数据没有发生变化的时候,就会在缓存中查找计算值。发生变化之后又会重新执行computed。"methods方法被执行了""computed被执行了"原创 2023-09-12 13:05:40 · 219 阅读 · 0 评论 -
vue中的计算属性computed
概念:基于现有的数据,计算出来的新属性。依赖的数据变化,自动重新计算。声明在computed配置项中,一个计算属性对应一个函数。使用起来和普通属性一样使用。//reduce求和方法。原创 2023-09-12 12:07:57 · 220 阅读 · 0 评论 -
vue中v-model应用于表单元素
常见的表单元素都可以用v-model绑定关联→快速获取或设置。表单元素的值它会根据控件类型自动选取正确的方法来更新元素。原创 2023-09-12 12:04:31 · 219 阅读 · 0 评论 -
vue中v-bind对样式的加强
为了方便开发者进行样式控制,Vue扩展了v-bind的语法,可以针对class类名和style行内样式进行控制。原创 2023-09-12 12:02:34 · 170 阅读 · 0 评论 -
Vue中对于指令的介绍
Vue 会根据不同的【指令】,针对标签实现不同的【功能】。指令:带有v-前缀的特殊标签属性。原创 2023-09-10 15:48:12 · 248 阅读 · 0 评论 -
YApi的下载
YApi是什么YApi是高效、易用、功能强大的api管理平台,旨在为开发、产品、测试人员提供更优雅的接口管理服务。地址:http://yapi.smart-xwork.cn/原创 2023-04-21 21:57:28 · 93 阅读 · 0 评论 -
Http协议
由于HTTP协议属于客户端浏览器和服务器之间的通信协议。因此,客户端发起的请求叫做HTTP请求客户湍发送到服务器的消息,叫做HTTP请求消息。注意:HTTP请求消息也叫HTTP请求报文响应消息就是服务器响应给客户端的消息内容,也叫作响应报文。HTTP请求方法,属于HTTP协议中的一部分,请求方法的作用是:用来表明要对服务器上的资源执行的操作。最常用的请求方法是GET和PoST。HTTP响应状态码(HTTP Status Code),也属于HTTP协议的一部分,用来标识响应的状态。原创 2023-05-05 10:49:39 · 51 阅读 · 0 评论 -
Vue介绍及项目搭建全过程流程
Vue是一套前端框架免除原生JavaScript中的DOM操作,简化书写。基于MVVM(Model-View-ViewModel)思想,实现数据的双向绑定,将编程的关注点放在数据上。原创 2023-04-25 21:51:57 · 209 阅读 · 0 评论