vue3
文章平均质量分 74
vue3相关的
笑道三千
我今年两岁半了,学编程还来不来得及????
展开
-
vue3下的watcheffect
它立即执行传入的一个函数,同时响应式追踪其依赖,并在其依赖变更时重新运行该函数。也就是说,wactheffect会自动收集函数中的响应式依赖,并且初始化运行一次该函数(相当于watch开启了immediate:true)原创 2022-09-23 09:34:03 · 1955 阅读 · 0 评论 -
vue3下watch的使用
1,基本数据类型:可以直接监听,可获取新旧值。2,引用数据类型:需要deep:true深度监听,但是只能获取新值。要想获取新旧值,要想获取新旧值,需要监听目标数据的深拷贝。原创 2022-09-08 10:47:04 · 63211 阅读 · 3 评论 -
vue3的自定义指令
一,自定义指令的vue3和vue2的写法变化官网中是这样介绍的:https://v3.cn.vuejs.org/guide/migration/custom-directives.html#_2-x-%E8%AF%AD%E6%B3%95在 Vue 3 中,我们为自定义指令创建了一个更具凝聚力的 API。正如你所看到的,它们与我们的组件生命周期方法有很大的不同,即使钩子的目标事件十分相似。我们现在把它们统一起来了:created - 新增!在元素的 attribute 或事件监听器被应用之前调用。bi原创 2022-05-31 11:09:32 · 958 阅读 · 0 评论 -
vue3中获取dom元素和操作
一,需求概述直接举例子来说明吧,我想要做的是,遍历这几个菜单,获取他们的dom元素的宽度。当文字dom元素宽度太长的话,需要滚动显示文本。二,实现思路对应的html:<div class="icon-box" ref="menu_item"> <div class="menu-box" v-for="(item, index) in iconMenus" :key="index" @click="clickItem(item)" >原创 2022-02-09 15:01:48 · 38772 阅读 · 3 评论 -
vue中动画效果的实现
一,过渡动画的实现1,无过渡,直接变化<template> <div class="testBox"> <div class="testCon" :style="{ width: width + 'px' }"></div> <div class="testBtn" @click="clickBtn">点击按钮</div> </div></template><script原创 2022-01-13 00:16:03 · 15575 阅读 · 0 评论 -
vue3的语法使用总结api
参考文章:vue3保姆级教程 - 掘金 (juejin.cn)一,setupsetup在beforeCreate,created前,现在用它来取代这两个生命周期函数:<template> <div class="home-box"> </div></template><script setup>import { ref, reactive, onMounted } from 'vue';//这里取代了beforeCreate,原创 2021-12-07 00:11:49 · 1152 阅读 · 0 评论 -
手把手写一个vue3的组件
一,组件的分类我们会把组件分成两个类型,一个是通用型组件,一个是业务型组件。通用型组件就是各大组件库的组件风格,包括按钮、表单、弹窗等通用功能。业务型组件包含业务的交互逻辑,包括购物车、登录注册等,会和我们不同的业务强绑定。二,创建一个vue3的组件????defineProps组件间传递数据以一个按钮组件为例://MyButton.vue<template> <div class="button-box"> <button class="button原创 2021-11-25 00:35:48 · 2352 阅读 · 0 评论 -
巧妙的响应式:深入理解Vue 3的响应式机制
注:本文是大圣老师课程的笔记,原课程地址:07 | 巧妙的响应式:深入理解Vue 3的响应式机制一,什么是响应式看下面的代码,double依赖于count,但是当我们修改了count,double却没有发生对应的变化。let count = 1let double = count * 2console.log(double)//2count = 2console.log(double)//2想要实现count变化后,double自动更新。就需要一个东西去实时监听count,当发现count原创 2021-11-24 00:22:28 · 888 阅读 · 0 评论 -
vue3代码的组织形式
注:本文是大圣老师课程的笔记,原课程地址:06 | 新的代码组织方式:Composition API + 到底好在哪里? (geekbang.org)一,使用setup之后的改变首先新建一个todoList.vue文件,然后写入如下代码:<template> <div> <h1 @click="add">{{count}}</h1> </div></template><script setup>原创 2021-10-31 14:21:15 · 597 阅读 · 0 评论 -
vue3初探-工程化项目架构-笔记
注意:本文是极客时间大圣老师vue3课程的学习笔记课程地址:05 | 项目启动:搭建Vue 3工程化项目第一步 (geekbang.org)一,开发环境搭建????下载安装node????下载安装vscode????vscode安装Volar插件需要注意的是,这个插件中说最好禁用Vetur,可能会出现冲突:You need to disable Vetur to avoid conflicts.二,使用vite初始化vue项目????初始化项目npm init @vitejs原创 2021-10-30 00:36:55 · 587 阅读 · 0 评论