定义自定义指令；inserted（）、update（）

自定义指令的意义：对普通DOM元素进行底层操作；

作用：可以获取到底层的dom，拿到想要的节点，从而进行操作；

实际应用：可以通过指令知道什么时候dom创建完成，从而进行依赖dom的库的初始化工作；

<body><div id="box"><div v-hello>11111</div></div><script>Vue.directive("hello",{//指令的生命周期函数inserted(el){console.log("inserted",el)}})new Vue({el: "#box",data: {}})</script></body>

结果：

代码中：div标签里的 hello 是自定义的指令，在dom中用的时候就是：v-指令；

定义hello指令，通过Vue.directive(“指令名”，{}），和定义组件形式一样；

inserted（）生命周期函数：

inserted（）生命周期函数：

触发时间：节点第一次插入到父节点（页面）中会触发，只会触发这一次；

用法：inserted（接收dom节点的形参，接收指令参数的形参）

如何拿到底层dom节点呢：

通过指令的生命周期函数：inserted（），这个函数的作用是只要当前节点插到页面上，这个函数就会自动执行，就会获取到该节点；
注意：inserted是指令的生命周期函数跟组件的生命周期函数没关系，不一样，是相互独立的；

inserted函数的参数el：

这个参数就是当前节点，当前节点看你把指令用在谁身上喽。代码中hello指令在子div身上，所以拿到的就是"<div>11111</div>"这个节点；

指令里面也可以传参数：

传参数的写法：要加上引号：

<div v-hello=" 'yellow' ">11111</div>//yellow是参数

不加引号的，直接写在里面的，传的是状态，不是参数：

<div v-hello="yellow">11111</div>//yellow是状态

inserted接收参数： binding

<div id="box"><div v-hello=" 'yellow' ">11111</div>
</div>

Vue.directive("hello",{//指令的生命周期函数inserted(el,binding){console.log("inserted",binding)el.style.background = binding.value}})

inserted第二个参数binding是接收“yellow”参数的，结果是对象：
结果：

对象里面的value值放的就是yellow属性，再把这个属性赋值给标签做样式，就很有用：

el.style.background = binding.value

update（）：更新时期的生命周期函数

如果想更改这个参数，也就是指令接收的参数：v-hello=" 'yellow' ，会发现不好用，改不了，因为inserted生命周期函数只在节点插入父节点的时候，会自动执行一次，后面就不会再执行了；
如果想更改参数，可以用指令的生命周期函数update（）：

update（）：更新时期的生命周期函数

触发事件：当指令的参数或者状态有所更新就会触发

用法：update（接收dom节点的形参，接收指令参数的形参）

update(el,binding){console.log("update",binding)el.style.background = binding.value}

完整代码：

<body><div id="box"><div v-hello=" whichcolor ">11111</div></div><script>Vue.directive("hello",{//指令的生命周期函数inserted(el,binding){console.log("inserted",binding)el.style.background = binding.value},update(el,binding){console.log("update",binding)el.style.background = binding.value}})new Vue({el: "#box",data: {whichcolor:'blue'}})</script></body>

结果：

以上两个生命周期函数有简写方式：

Vue.directive("hello",()=>{//每次插入或者更新dom就会操作一次el.style.background = binding.value}),

就是把两个生命周期函数放在一起写；

当然这种简写方式只有不强调单独一个生命周期函数时，可以使用；让只想用单独的inserted函数这样的写法就不好了。

定义自定义指令；inserted（）、update（）相关推荐

vue之vue的生命周期、swiper、自定义组件的封装、自定义指令、过滤器、单文件组件及vue-cli
文章目录 1.vue的生命周期 1.1.8个生命周期函数 2.swiper 3.自定义组件的封装 4.自定义指令 4.1.定义 4.2.基本使用 4.3.利用自定义指令传入指定参数修改背景色 5.过滤 ...
[Vue]自定义指令
前言系列文章目录: [Vue]目录老师的课件笔记,不含视频 https://www.aliyundrive.com/s/B8sDe5u56BU 笔记在线版: https://note.youdao ...
Vue3 学习笔记 —— 破坏式更新、自定义指令 directive
目录 1. 什么叫破坏式更新? 2. Vue3 中的自定义指令 2.1 自定义指令的生命周期 2.1.1 Vue2 Vs Vue3 的自定义指令生命周期 2.1.2 自定义指令的生命周期中,接收的参数 ...
Vue基础学习笔记Day06_动态组件_插槽_自定义指令
今日目标: 能够了解组件进阶知识能够掌握自定义指令创建和使用学习内容: 学习目录: 组件进阶自定义指令今日总结面试题知识点自测组件创建, 注册和使用 - 伸手就来特别熟练指令的作用 1 ...
【Vue知识点- No6.】动态组件、插槽、自定义指令、tabbar案例
动态组件.插槽.自定义指令学习目标 1.能够了解组件进阶知识. 2.能够掌握自定义指令的创建和使用. 3.能够完成tabbar案例的开发. 1.组件进阶 1.0 动态组件问题:如何切换2个组件,互 ...
Vue自定义指令——v-focus
前言本文直接参考vue2.0官方文档, 并演示博主项目中的使用自定义指令 directive 除了核心功能默认内置的指令 (v-model 和 v-show),Vue 也允许注册自定义指令.注意, ...
Vue API(directives) 自定义指令
前言:除了vue的内置指令以外,我们可以定义自定义指令.内置指令表相见:https://www.cnblogs.com/ilovexiaoming/p/6840383.html 我们定义一个最简单的 ...
vue 自定义指令 directive 全局 directives 局部 inserted update
vue 自定义指令需求效果全局 - 自定义指令代码局部 - 自定义指令代码自定义命令传值效果代码问点需求获取标签,扩展额外的功能效果全局 - 自定义指令代码 // mai ...
vue自定义指令update 和 componentUpdated及bind 和 inserted区别
1. 适用需要对普通 DOM 元素进行底层操作,这时候就会用到自定义指令 2. 钩子函数参数除了 el 之外,其它参数都应该是只读的,切勿进行修改 <div v-if="show& ...

定义自定义指令；inserted（）、update（）

inserted（）生命周期函数：

update（）：更新时期的生命周期函数

定义自定义指令；inserted（）、update（）相关推荐

最新文章

热门文章