Vue3.0
飞鹰3995
这个作者很懒,什么都没留下…
展开
-
Vue3中的watchEffect
昨天和大家一起分享了关于CompositionAPI中的watch,今天继续探讨与watch类似的watchEffect,下面是示例代码const app = Vue.createApp({setup() { const { reactive, watch, toRefs,watchEffect } = VueconstnameObj=reactive({name:'lilei',englishname:'hanmeimei'}) watch([() => n...原创 2021-11-10 22:15:00 · 775 阅读 · 0 评论 -
Vue3中的watch
今天继续和大家一起探讨在Vue3中的CompositionAPI中,是如何处理watch的,我们先看一段针对基础数据类型数据的编码方式const app = Vue.createApp({ setup(){ const { ref,watch } = Vue const name = ref('lilei') // 具有惰性 // 可以拿到当前值和之前的值 watch(name, (currentVal,preVal) =&g原创 2021-11-09 22:15:00 · 764 阅读 · 0 评论 -
Vue3中的计算属性
在之前的文章中,小编和大家一起学习了关于Vue的基本语法和概念,包括组件、数据混入和插槽等。从今天开始,小编和大家一起学习Vue3中的新特性,也就是网上炒的铺天盖地的Composition-API,看看到底有什么神奇之处,我们之前通过Vue写的代码,基本都是这样Vue.createApp({ data(){ return {name:""//绑定基本数据类型数据items:[1,2,3,4] // 绑定引用数据类型 ...原创 2021-11-08 21:45:00 · 7410 阅读 · 0 评论 -
Vue3中的setup函数和响应式ref reactive
在之前的文章中,小编和大家一起学习了关于Vue的基本语法和概念,包括组件、数据混入和插槽等。从今天开始,小编和大家一起学习Vue3中的新特性,也就是网上炒的铺天盖地的Composition-API,看看到底有什么神奇之处,我们之前通过Vue写的代码,基本都是这样。Vue.createApp({ data(){ return {name:""//绑定基本数据类型数据items:[1,2,3,4] // 绑定引用数据类型 ...原创 2021-11-03 23:30:00 · 504 阅读 · 0 评论 -
Vue3中的Teleport(传送门)
动画片多啦A梦相信大家很多都看过,而且近几年又出现了相关的电影,作为小编一个男生来说,一直是对里面的静香念念不忘,有点跑偏了哈,今天小编介绍的Teleport就和多啦A梦的任意门一样,可以穿梭到任何的DOM中的任何地方。模态框一直是实际开发中用到比较多的功能之一,在没有各种各样的组件之前,我们需要通过css中的定位对元素进行修饰,有了Teleport,我们就可以这样实现一个简单的模态的组件<style> .area{ position: absolute; lef原创 2021-11-02 18:54:10 · 273 阅读 · 0 评论 -
Vue3中的自定义指令
有了前面组件、mixin的基础之后,再来了解今天小编要说的内容,就相对容易一些,今天小编和大家一起学习Vue3中的自定义指令,我们先来看看什么是Vue中的指令。除了核心功能默认内置的指令(例如 v-model 和 v-show),Vue 也允许注册自定义指令。注意,在 Vue 中,代码复用和抽象的主要形式是组件。然而,有的情况下,你仍然需要对普通 DOM 元素进行底层操作,这时候就会用到自定义指令https://v3.cn.vuejs.org/guide/custom-directive.htm.原创 2021-10-11 20:25:02 · 476 阅读 · 0 评论 -
Vue3的mixin
小编在之前的项目中还没有接触过minxin(数据混入),直到一次面试的时候,面试官问我,我才注意到,原来还有这样的一个东西,今天小编就和大家一起看看这个神奇的mixin。个人感觉mixin和组件的注册和使用很类似,我们要注册一个局部的mixin的时候,可以这样。//组件data和methods优先级高于mixin中的data优先级,组件和mixin数据同时存在的时候,使用组件中的data数据,如果组件内部没有data,使用mixin中的数据// 声明周期函数,先执行mixin里面的,再执行组件里面的.原创 2021-09-21 21:21:42 · 517 阅读 · 0 评论 -
Vue3的动态组件和异步组价
今天小编在网上闲逛的时候,发现前端这几年的发展离不开组件的概念,之前小编接触到的组件,基本都是这样的const app= Vue.createApp({ template: ` <input-item /> <common-item /> `})app.component('input-item',{ template: `<div> <input /> <原创 2021-09-09 19:23:15 · 232 阅读 · 0 评论 -
Vue3中的slot
小编今天和大家一起探讨Vue中的插槽(slot)的概念,熟悉Vue的小伙伴都知道父子组件之间可以相互传递数据,但是传递DOM结构的时候,再通过属性的方式就有些麻烦,我们先来看个父子组件的例子constapp=Vue.createApp({ template: `<myform />`})app.component('myform',{ methods:{ handleClick(){ alert('handleClick') ..原创 2021-09-02 19:30:49 · 574 阅读 · 0 评论 -
Vue3样式绑定
今天和大家分享关于Vue中的样式和class的绑定,首先声明,这篇文章出现的class不是类声明的关键字,而是标签内部的属性,用于实现样式在原生html中,我们给一个元素添加样式的时候,大概有这么两种方式<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"&原创 2021-09-01 18:58:56 · 727 阅读 · 2 评论 -
Vue中的Vuex(二)
小编今天继续和大家一起学习和探讨Vuex,咱们书接上回,继续探索Vuex的其他特性三、Mutation在上一篇文章中,咱们已经知道,对于Vuex中的数据,不能像data中的数据一样直接修改,那要对State中的数据修改的时候,要怎么做呢,Vuex提供了Mutation方式进行统一修改,并且使用state作为第一个参数,就像这样const store = new Vuex.Store({ state: { count: 1 }, mutations: { increment (原创 2021-08-30 20:12:42 · 192 阅读 · 0 评论 -
Vue中的Vuex(一)
小编在项目中,经常会使用到Vuex,其实小编自己只是知道Vuex是为了解决什么痛点,但是具体这个东西是怎么回事,小编自己有点迷迷糊糊,昨天小编痛下决心,认认真真的把Vuex的官网(https://vuex.vuejs.org/zh/)读了一遍,收获还是很多的,特地拿出来与大家分享,也希望能在大家今后的面试中,增加一些筹码和信心。Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到原创 2021-08-27 18:40:07 · 301 阅读 · 0 评论 -
js中的事件委托/代理
小编今天在做项目的时候,在项目的注释中发现了关于事件委托的注释(PS:虽然下面代码写的不是事件委托的代码,小编作为一个干了前端三四年的小菜鸟,依然不知道事件委托到底是个啥,想想惭愧,特意在Vue3这个专栏中间插了这个。既然谈到了事件委托,就不能不提冒泡,那什么是事件冒泡呢?小编特意在网上找了这样一张图片下面的泡泡都很小,越往上泡泡越大。图中的泡泡可以看成是html中的DOM结构。那到底什么是冒泡呢?比如这样一个结构<divonclick="handleDivClick()"&g.原创 2021-08-26 20:33:01 · 156 阅读 · 0 评论 -
Vue生命周期函数
今天小编继续和大家一起研究Vue,今天要一起探讨的是生命周期函数,在小编的理解中,生命周期就是在一定时间自动执行的函数,就类似原生js中的window.onload。小编先拷贝一张来自Vue官方文档中的一张图其实在这张图中,已经完整的说明了Vue中每个生命周期中的函数的执行时间,但是小编还是要用代码结合注释,更加详细的说明生命周期。const app = Vue.createApp({ data(){ return { message: 'helllo world'原创 2021-08-25 16:46:16 · 231 阅读 · 0 评论 -
Vue3组件
上一篇文章小编用Vue的语法编写了一个简单的todoList,实现的逻辑比较简单,但是在实际项目中,会涉及到一些比较复杂的逻辑,比如在item中添加各种各样的标签,再加上甲方爸爸提出各种各样的需求,最后可能把我们搞到崩溃。所以引入了在组件化的概念。在组件化之前,小编先跟大家补充一些基础知识。一、数据绑定和差值表达式上一篇文章小编要实现的效果是这样的这个时候,可能有这样的需求,比如我想将文本框内输入的内容作为button标签的title,或者想把文本框的内容实时的显示在按钮里面。这时候,我们需原创 2021-08-24 18:17:45 · 229 阅读 · 0 评论 -
Vue3实现列表循环
今天小编和大家一起在Vue的路上探索,要实现的功能是这样的。现将默认 数组内的渲染到页面上,然后点击按钮之后,将文本框内的数据添加到列表上,效果如下源码是这样的,下面我就结合代码中的注释来说明一下核心的代码Vue.createApp({ data(){ return { list:['item1','item2','item3','item4'], // 绑定v-for循环的列表 inputVal:"" // 绑定文本框原创 2021-08-21 16:38:19 · 2148 阅读 · 0 评论 -
Vue3实现字符串反转和内容隐藏
经过一周时间的努力,小编今天继续和大家学习Vue3,今天还是以实际例子为主,先让小小白感受一下Vue的魅力,让另外一些小小白体会一下不用脚手架是一种什么体验,当然了,也为了接下来的工作内容准备准备。上一篇关于Vue的文章,通过Vue,实现了一个累加的功能。源码是这样的<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-原创 2021-08-17 22:14:02 · 443 阅读 · 0 评论