Vue--自定义指令

Custom Directives

---

自定义指令学习场景

• 学习场景：使用文字绑定函数，处理点击后自定义指令的element 的渲染innerText 进行反转

---

1.组件内定义

• 源码

<template>
  <div class="about">
  	<!-- 绑定-->
    <h1 v-reserve> This is an tableView components page</h1>     
    </TableView>
  </div>
</template>

<script setup>
import TableView from '@/components/TableView';
import {getCurrentInstance, reactive, ref, toRefs} from "vue";
let proxy = getCurrentInstance()

// 自定义指令
// 在模板中启用 v-reserve
function textReserve(_el) {  
  console.log('hihi',_el.innerText)
  if(_el.innerText && typeof _el.innerText === 'string') {
   _el.innerText = _el.innerText.split("").reverse().join("")
  }
}
const vReserve = {  
  mounted(el, binding, vnode, prevVnode) {
    el.addEventListener('click',()=>textReserve(el))
  },
  // 绑定元素的父组件卸载前调用
  beforeUnmount(el, binding, vnode, prevVnode) {
    el.removeEventListener('click',textReserve)
  },
}
</script>

• 纯自定义指令源码

// 自定义指令调用函数
// 在模板中启用 v-reserve
function textReserve(_el) {  
  console.log('hihi',_el.innerText)
  if(_el.innerText && typeof _el.innerText === 'string') {
   _el.innerText = _el.innerText.split("").reverse().join("")
  }
}
// 自定义指令
const vReserve = {  
  mounted(el, binding, vnode, prevVnode) {
    el.addEventListener('click',()=>textReserve(el))
  },
  // 绑定元素的父组件卸载前调用
  beforeUnmount(el, binding, vnode, prevVnode) {
    el.removeEventListener('click',textReserve)
  },
}

2.全局定义