首页 > 其他分享 >Vue3 改变

Vue3 改变

时间:2025-01-10 19:56:53浏览次数:1  
标签:opacity use Vue directive app 改变 Vue3 config

1、全局api

Vue.config.xxx app.config.xxx
Vue.component app.component
Vue.directive app.directive
Vue.mixin app.mixin
Vue.use app.use
Vue.prototype app.config.globalProperties

2、过度类名

.v-enter-from,
.v-leave-to{
   opacity:0;
}

.v-leave-from,
.v-enter-to{
 opacity:1;
}

3、父组件绑定事件

<my-component
   :close="test"
/>

子组件声明自定义事件

export default{
   emits:['close']   
}

4、移除过滤器

标签:opacity,use,Vue,directive,app,改变,Vue3,config
From: https://www.cnblogs.com/wt7018/p/18664573

相关文章

  • Vue3 Teleport <Teleport to='位置'>
    Teleport是一种能够将组件html结构移动到指定位置的技术<template><div><button@click="isShow=true">弹窗</button><Teleportv-if="isShow"to="body"><divclass="dialog">......
  • Vue3 customRef函数
    自定义ref<template><inputtype="text"v-model="msg"><h2>{{msg}}</h2></template><script>import{customRef,ref}from'vue';exportdefault{name:'Demon......
  • vue3 toref函数 torefs函数 简化模板写法
    一、作用简化模板{{xx}},xx的长度二、toRef1、语法toRef(对象,属性)2、案例<template><h2>姓名:{{name}}</h2><h2>年龄:{{age}}</h2><h2>工资:{{salary}}</h2><button@click="name+=`~`">姓名</button&g......
  • Vue3 Composition API使用错误
    Vue3CompositionAPI使用错误详解引言随着Vue3的发布,CompositionAPI作为其核心特性之一,受到了广泛关注和应用。相比于Vue2中的选项式API(OptionsAPI),CompositionAPI提供了更高的灵活性和代码复用性,尤其适用于大型复杂项目的开发。然而,新的API也带来了一些学习曲线和......
  • Vue3 hook 函数模块化 类似vue2 mixin
    1、优点代码功能模块化,复用代码2、建立新建hooks文件夹,在src下src/hooks/use功能.js3、案例a、模块化src/hooks/usepoint.jsimport{reactive,onMounted,onBeforeUnmount}from'vue';exportdefaultfunction(){letponint=reactive({x:0,......
  • vue3 + vite +ts 实现版本更新检查(检测到版本更新时提醒用户刷新页面)
    背景当一个页面很久没刷新,又突然点到页面。由于一些文件是因为动态加载的,当重编后(如前后端发版后),这些文件会发生变化,就会出现加载不到的情况。进而导致正在使用的用户,点击页面发现加载不顺畅、卡顿问题。解决思路使用Vite构建一个插件,在每次打包时自动生成version.json版本信息文......
  • vue3的12种组件通信方式
    对于日常使用vue3开发项目的前端小伙伴来说,组件通信方式可以说是必会的基本功,今天带大家一起盘下vue3的通信方式。我们这里按照组件的关系来划分。总共包含12中组件通信方式。一、父子通信propsdefineEmits$attrs$ref+defineExpose$parent二、兄弟组件通信mitt......
  • Vue3 watch监视 reactive
    一、引入import{reactive,watch}from'vue'二、注意1、监视reactive定义的响应式对象时,oldval无法正确获取,强制开启深度监视,无法关闭2、监视reactive对象的某个属性时,deep有效(属性为对象),属性为字符串或数字oldvalue可以正常获取三、四种情况1、情况一监听reactive......
  • Vue3 reactive函数
    1、作用定义一个对象的响应式数据(基本类型不用它,用ref)2、使用a、引入import{reactive}from'vue';b、语法const代理对象=recative(源对象)源对象可以是数组或对象,返回Proxy对象的实例对象3、reactive定义的响应式是深层次的4、案例<template><h2>姓名:{{......
  • Vue3 ref函数 数据响应式
    1、作用:定义响应式数据2、语法a、创建创建一个包含响应式数据的引用对象letxx=ref(数据)b、JS操作xx.valuec、模板操作{{xx}}3、注意数据可以是:基本类型,也可以是对象类型基本类型需要.value获取值,对象中的数据不需要案例<template><h2>姓名:{{name}}</h2>......