wanglei1900

2022年10月7日

摘要： Vue3 hooks vue2里的mixins相似，但是mixins会组件的配置项覆盖。vue3使用了自定义hooks替代mixnins，hooks本质上是函数，引入调用。封装自定义的hooks 将图片转化成base64 import { onMounted } from "vue"; inter 阅读全文

posted @ 2022-10-07 14:47 wanglei1900 阅读(508) 评论(0) 推荐(0)

【Vue3.x】自定义指令directive

摘要：自定义指令directive 不同于vue2指令 bind inserted update componentUpdated unbind 1.vue3指令中的钩子函数 created 元素初始化的时候 beforeMount 指令绑定到元素后调用只调用一次 mounted 元素插入父级dom调用阅读全文

posted @ 2022-10-07 10:23 wanglei1900 阅读(440) 评论(0) 推荐(0)

2022年10月6日

【Vue3.x】v-model 的破坏性更改

摘要： Vue3 model v-model 其实是一个语法糖通过props 和 emit组合而成的破坏性的变动，相较于vue2的变动(具体写法改变请看下面)： prop：value -> modelValue；事件：input -> update:modelValue； v-bind 的 .sync 阅读全文

posted @ 2022-10-06 19:02 wanglei1900 阅读(386) 评论(0) 推荐(0)

【Vue3.x】自动导入unplugin-auto-import

摘要： vue3自动引入配置完成之后使用ref reactive watch 等无须import 导入可以直接使用 npm i unplugin-auto-import -D 注意不要安装最新版本。。。不然因为这个插件会提示其他报错。亲测0.6.0版本可以正常运行npm i unplugin-auto 阅读全文

posted @ 2022-10-06 16:59 wanglei1900 阅读(2288) 评论(0) 推荐(0)

【Vue3.x】父子组件传值

摘要：父子组件间的传值 vue2的父子的传值和vue2的是基本一样的，只是在当我们在使用组合式api式，只是在子组件的写法不同。 defineProps 和 defineEmits 都是只能在 <script setup> 中使用的编译器宏。他们不需要导入，且会随着 <script setup> 的处理过阅读全文

posted @ 2022-10-06 16:01 wanglei1900 阅读(581) 评论(0) 推荐(0)

【Vue3.x】全局组件、局部组件和递归组件

摘要：全局组件没啥讲的，和vue2一样，常规是src下components文件夹下新建全局组件，然后去入口文件main.ts里注册全局组件。然后就能在全局使用了 import { createApp } from 'vue' import App from './App.vue' import rout 阅读全文

posted @ 2022-10-06 00:24 wanglei1900 阅读(348) 评论(0) 推荐(0)

2022年10月5日

【Vue3.x】动态组件与KeepAlive的配合

摘要：动态组件 <component>,一个用于渲染动态组件或元素的载体。 <component> 是vue内置特殊元素，和<slot>一样属于模板语法。但它们并非真正的组件，同时在模板编译期间会被编译掉。因此，它们通常在模板中用小写字母书写。 <component>要完成动态组件，要配合is一起完成。要阅读全文

posted @ 2022-10-05 22:40 wanglei1900 阅读(536) 评论(0) 推荐(0)

Vue3.x 组合式api的生命周期钩子

摘要： Vue3 组合式api 的生命周期 beforeCreate created，setup语法糖模式(组合式api)是没有这两个生命周期的，用setup去代替 onBeforeMount 获取不到DOM， onMounted可以获取DOM onBeforeUpdate获取的是更新之前的DOM，onUp 阅读全文

posted @ 2022-10-05 14:44 wanglei1900 阅读(344) 评论(0) 推荐(0)

如何在Vue3中使用全局事件总线eventBus进行组件通信

摘要： Mitt库 vue3取消了全局实例的$on,$off，所以可以借助轻量Mitt库实现 200bytes轻量库，进行组件通信，可以跨平台使用，支持批量监听和批量移除。以下为vue3+ts项目中使用Mitt的方法 import { createApp } from 'vue' import App f 阅读全文

posted @ 2022-10-05 14:05 wanglei1900 阅读(1318) 评论(0) 推荐(0)

2022年9月26日

【CSS】按钮的抖动提醒

摘要：定义一个抖动的类apply-shake @keyframes shake { 10%, 90% { transform: translate3d(-1px, 0, 0); } 20%, 80% { transform: translate3d(2px, 0, 0); } 30%, 50%, 70% 阅读全文

posted @ 2022-09-26 17:04 wanglei1900 阅读(333) 评论(0) 推荐(0)

公告