本篇内容主要讲解“Vue3中的setup与自定义指令如何使用”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“Vue3中的setup与自定义指令如何使用”吧!
setup语法糖
最大好处就是所有声明部分皆可直接使用,无需return出去
注意:部分功能还不完善,如:name、render还需要单独加入script标签按compositionAPI方式编写
// setup 下还可以附加
defineProps defineEmits与组件应用
//子组件{{msg}}
//父组件我是btn:{{obj.text}}、
defineExpose与组件应用
//子组件123//父组件
自定义指令相关
-
created:在绑定元素的 attribute 或事件监听器被应用之前调用。在指令需要附加在普通的 v-on 事件监听器调用前的事件监听器中时,这很有用。
-
beforeMount:当指令第一次绑定到元素并且在挂载父组件之前调用。
-
mounted:在绑定元素的父组件被挂载后调用,大部分自定义指令都写在这里。
-
beforeUpdate:在更新包含组件的 VNode 之前调用。
-
updated:在包含组件的 VNode 及其子组件的 VNode 更新后调用。
-
beforeUnmount:在卸载绑定元素的父组件之前调用
-
unmounted:当指令与元素解除绑定且父组件已卸载时,只调用一次。
import{createApp}from\'vue\';constTest=createApp();Test.directive(\'my-directive\',{//在绑定元素的attribute前活动:慈云数据爆款香港服务器,CTG+CN2高速带宽、快速稳定、平均延迟10+ms 速度快,免备案,每月仅需19元!! 点击查看//或事件监听器应用前调用created(el,binding,vnode,prevVnode){//下面会介绍各个参数的细节console.log(\'创建了\')},//在元素被插入到DOM前调用beforeMount(el,binding,vnode,prevVnode){},//在绑定元素的父组件//及他自己的所有子节点都挂载完成后调用mounted(el,binding,vnode,prevVnode){},//绑定元素的父组件更新前调用beforeUpdate(el,binding,vnode,prevVnode){},//在绑定元素的父组件//及他自己的所有子节点都更新后调用updated(el,binding,vnode,prevVnode){},//绑定元素的父组件卸载前调用beforeUnmount(el,binding,vnode,prevVnode){},//绑定元素的父组件卸载后调用unmounted(el,binding,vnode,prevVnode){}})exportdefaultTest.directive(\'my-directive\');
-
el
:指令绑定到的元素。这可以用于直接操作 DOM。 -
binding
:一个对象,包含以下属性。 -
value
:传递给指令的值。例如在
v-my-directive=\"1 + 1\"
中,值是
2
。 -
oldValue
:之前的值,仅在
beforeUpdate
和
updated
中可用。无论值是否更改,它都可用。 -
arg
:传递给指令的参数 (如果有的话)。例如在
v-my-directive:foo
中,参数是
\"foo\"
。 -
modifiers
:一个包含修饰符的对象 (如果有的话)。例如在
v-my-directive.foo.bar
中,修饰符对象是
{ foo: true, bar: true }
。 -
instance
:使用该指令的组件实例。
dir
:指令的定义对象。 -
vnode
:代表绑定元素的底层 VNode。 -
prevNode
:之前的渲染中代表指令所绑定元素的 VNode。仅在
beforeUpdate
和
updated
钩子中可用。
应用
//setup外部调用//或者setup内部
对象字面量
app.directive(\'demo\',(el,binding)=>{console.log(binding.value.color)//=>\"white\"console.log(binding.value.text)//=>\"hello!\"})
到此,相信大家对“Vue3中的setup与自定义指令如何使用”有了更深的了解,不妨来实际操作一番吧!这里是服务器测评网网站,更多相关内容可以进入相关频道进行查询,关注我们,继续学习!
还没有评论,来说两句吧...