VUE
秃头的科比
希望大家多关注 我会在以后的工作生活中不断的去完善文章中的不足之处
展开
-
指令
自定义指令认识自定义指令在vue的模板语法中我们学习过各种各样的指令:v-show、v-for、v-model等等,除了使用这些指令之外,vue也允许我们来自定义自己的指令,注意:在vue中,代码的复用和抽象主要还是通过组件实现,但是通常在某些情况下,你需要对DOM元素进行底层操作,这个时候就会用到自定义指令,以下是自定义指令的两种类型:(1)局部指令:组件中通过directives选项,只能在当前组件中使用。(2)全局指令:app的directive方法,可以在任意组件中被使用。比如我们来做一个原创 2021-09-12 09:19:45 · 164 阅读 · 0 评论 -
composition api学习——数据响应式处理
vue3中要求数据如果依然是响应式的话,必须在定义数据时通过以下方式去对数据做一个处理(因为vue3中使用proxy的方式对这些api做了监听):Reactive API如果想为在setup中定义的数据提供响应式的特性,我们则必须使用reactive这个函数对定义的数据进行一个包裹,那么为什么这样数据就会变成响应式的呢?这是因为当我们使用reactive函数处理我们的数据之后 ,数据再次被使用时就会进行依赖收集,当数据发生改变时,所有收集到的依赖都会进行对应的响应式操作(比如更新界面); 事实上,我们原创 2021-09-12 08:26:14 · 259 阅读 · 0 评论 -
composition API学习——setup函数
vue3.0 compositionAPI首先我们得需要了解composition api这个概念,它并不是基于用户层面上的,主要是针对于vue框架自身来说的,它将vue中的很多功能拆分成了一个一个的hook,然后将他们组合起来便形成了vue3.0的composition api。所以当我们在使用时,它是什么其实对于我们来说不重要。DOM节点的挂载方式DOM节点挂载的方式不再是通过new vue实例的方式了,而是从comsition api里引入了createApp的方法进行挂载。setupset原创 2021-04-08 10:34:20 · 7027 阅读 · 0 评论 -
Mixin
认识Mixin在组件和组件之间有时候会存在相同的代码逻辑,我们希望对相同的代码逻辑进行抽取。在vue2和vue3中都支持的一种方式就是使用Mixin来完成:Mixin提供了一种非常灵活的方式,来分发vue组件中的可复用功能。一个Mixin对象可以包含任何组件选项:当组件使用Mixin对象时,所有Mixin对象的选项都将被混合进入该组件本身的选项中。Mixin的合并规则如果Mixin对象中的选项和组件对象中的选项发生了冲突,那么vue会如何进行操作呢?这里分成不同的情况来进行处理:情况一:如果是原创 2021-09-06 10:52:31 · 198 阅读 · 0 评论 -
methods属性
methods属性是一个对象,通常我们会在这个对象中定义很多的方法: 这些方法可以被绑定到 template 模板中;在该方法中,我们便可以使用this关键字来直接访问到data中返回的对象的属性。下面是一段官方文档的描述: 注意:不应该使用箭头函数来定义method中的函数,理由是箭头函数绑定了父级作用域的上下文,所以this将不会按照期望指向组件实例,this.a将是undefined。而根据官方文档的这段描述便可以对以下两个问题作出简要的回答了:问题一:为什么不能使用箭头函数去定义呢?我们原创 2021-08-30 13:31:24 · 894 阅读 · 0 评论 -
data属性
这里主要解决一个问题:那就是为什么data属性必须是一个函数?首先,需要了解在Vue2.x(注意这里说的是脚手架的版本)的时候,也可以传入一个对象(虽然官方推荐是一个函数);但是在Vue3.x的时候,必须传入一个函数,否则就会直接在浏览器中报错。根据个人理解以及查阅相关资料得知之所以将data属性设置为函数是因为在项目开发中,我们会尽可能的提高组件的复用性,因此如果data属性是一个对象时,那么在复用该组件时,它们的data引用的将都是同一个内存地址,那么多个组件实例之间便可能会在使用时互相产生影响。所原创 2021-08-30 13:22:08 · 266 阅读 · 0 评论 -
生命周期函数
生命周期1,什么是生命周期每个组件都可能会经历从创建、挂载、更新、卸载等一系列的过程; 在这个过程中的某一个阶段,有可能会想要添加一些属于自己的代码逻辑(比如组件创建完后就请求一些服务器数据);但是我们如何可以知道目前组件正在哪一个过程呢?因此Vue给我们提供了组件的生命周期函数;2,生命周期函数:生命周期函数是一些钩子函数,在某个时间会被Vue源码内部进行回调; 通过对生命周期函数的回调,我们可以知道目前组件正在经历什么阶段; 那么我们就可以在该生命周期中编写属于自己的逻辑代码了;我们前面说过s原创 2021-07-23 09:13:46 · 138 阅读 · 0 评论 -
ref的使用
ref的使用某些情况下,我们在组件中想要直接获取到元素对象或者子组件实例:在vue开发中我们是不推荐DOM操作的,这个时候,我们可以给元素或者组件绑定一个ref的attribute属性,而组件实例有一个$refs属性。//父组件<template> <div> <!-- 绑定到一个元素上 --> <h2 ref="title">哈哈哈</h2> <!-- 绑定到一个组件实例上 --> <原创 2021-07-23 08:49:42 · 157 阅读 · 0 评论 -
keep-alive内置组件
keep-alive内置组件我们先对上面案例中的组件进行改造,在其中一个组件增加按钮,实现点击可以递增的功能。比如:我们将某个数据发生后了改变,那么希望在切换组件后,切换回来时依然保持这个改变后的数据,那么就需要用到keep-alive这个内置组件了(默认情况下,组件切换时是有完整的重建和销毁的过程的)keep-alive的常用 属性:(1)include:只有名称匹配的组件会被缓存。(2)exclude:任何名称匹配的组件都不会被缓存。(3)max:最多可以缓存多少组件实例,一旦达到这个数字,原创 2021-07-23 08:16:31 · 157 阅读 · 0 评论 -
动态组件
动态组件比如我们想要实现一个切换组件的功能,这个功能我们可以通过两种不同的实现思路来实现:方式一:通过v-if来判断,显示不同的组件。方式二:动态组件的方式。动态组件是使用component组件,通过一个特殊的attrubute :is来实现。<template> <div> <button v-for="item in tabs" :key="item" @click="itemClick(item)" :原创 2021-07-23 08:09:16 · 327 阅读 · 0 评论 -
插槽
插槽的使用在开发中,我们会经常封装一个个可复用的组件:前面我们会通过props传递给组件一些数据,让组件来进行展示;但是为了让这个组件具备更强的通用性,我们不能将组件中的内容限制为固定的div、span等等这些元素;比如某种情况下我们希望组件显示的是一个按钮又或者某种情况下我们使用组件希望显示的是一张图片; 因此我们应该让使用者可以决定某一块区域到底存放什么内容和元素;1,插槽的基本使用(1)我们某个组件中有一个插槽,我们可以在插槽中放入需要显示的内容;<template> <原创 2021-07-23 07:54:00 · 3431 阅读 · 0 评论 -
组件间的通信方式
父子组件间通信基础的传递不再赘述,这里只说明一些重要的注意点。1,父传子:相信大家对父传子都很熟悉,但是其实在这个过程中也是有很多注意事项的。props的两种常见用法:方式一:字符串数组,数组中的字符串就是attribute的名称,数组用法中我们只能说明传入的attribute的名称,并不能对其进行任何形式的限制,所以一般不建议使用。props: ['title', 'content']方式二:对象类型,对象类型我们可以在指定attribute名称的同时,指定它需要传递的类型、是否是必须的、默原创 2021-07-19 21:47:07 · 1098 阅读 · 0 评论 -
侦听器
侦听器watch需要侦听特定的数据源,并在回调函数中执行副作用;默认情况下它是惰性的,只有当被侦听的数据源发生改变时才会执行回调。watch允许我们:(1)懒执行副作用(当然可以设置deep属性让其立即执行);(2)更具体的说明当哪些状态发生变化时,触发侦听器的执行;(3)访问侦听状态变化前后的值。问题:默认情况下,侦听器只能监听数据本身的改变,并不会监听到数据内部所发生的改变。解决方式:使用对象的方式,从而使用更多的属性(例如:handler、deep)去完成对其内部数据的监听。<d原创 2021-07-19 21:00:38 · 251 阅读 · 0 评论 -
计算属性
在某些情况下,我们可能需要对数据进行转化或者需要将多个数据结合起来再去显示同时也是为了模板中的表达式更加简洁。computed本质(1)使用computed时,为什么不是通过函数的方式而是通过属性的方式进行使用呢?我们所定义的computed属性里面其实是由get和set方法组成的(而平常使用时调用的其实就是我们computed里面的get方法),我们一般只需要实现computed的get方法就可以了。<template id="my-app"> <h2>{{full原创 2021-07-19 17:49:42 · 84 阅读 · 0 评论