vue2.x与vue3.x中自定义指令详解(最新推荐)

Vue.directive('focus', {
  inserted: function (el) {
    console.log(el.parentNode, 'inserted')
    el.focus();
  },
  bind: function (el) {
    console.log(el.parentNode, 'bind')
    el.focus();
  },
});

 <p v-style:[direction]="connect">Enter connection infORMation to connect</p>

    directives: {
        style: {
            bind(el,binding) {
              console.log(binding,'binding')
                el.style.fontSize = "30px";
                el.style.color = "blue";
            },
        },
    },

<p v-style>文字描述</p>

 directives: {
    style: {
      bind(el,binding) {
        el.style.fontSize = "30px";
         el.style.color = "blue";
      },
      update(el,binding){
      el.style.fontSize = "30px";
      el.style.color = "blue";
      }
    },
  },

Vue.directive('style',{
    bind(el) {
      el.style.fontSize = "30px";
      el.style.color = "blue";
    },
  },
)

Vue.directive('style',{
    bind(el) {
      el.style.fontSize = "30px";
      el.style.color = "blue";
    },
  },
)

const myDirective = {
  // 在绑定元素的 attribute 前
  // 或事件监听器应用前调用
  created(el, binding, vnode, prevVnode) {
    // 下面会介绍各个参数的细节
  },
  // 在元素被插入到 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) {}
}

<script lang="ts" setup>
// 局部指令, 变量名为驼峰命名(vFocus = v-focus)
const vFocus = {
  mounted: (el:any) => {
    el.focus()
    console.log(el, '已经自动获得焦点')
  }
}
</script>

<script lang="ts">
const vFocus = {
    focus:  {
        mounted(el:any){
            el.focus();
            console.log(el, "已经自动获得焦点");
        }
    },
};
export default {
    setup() { },
    directives: vFocus,
};
</script>

  <input type="text" v-focus>

const directives: any = {
	mounted(el: any) {
		el.focus();
		el.value = '1'
	}
}
export default {
	name: "focus",
	directives
}

import type { App } from 'vue'
import focus from './focus'
export default function installDirective(app: App) {
    app.directive(focus.name, focus.directives);
} 

import directives from './directives'
const app = createApp(App);
app.use(directives);

const directives = (el:any) => {
		el.focus();
		el.value = '1';
}
export default {
	name: "focus",
	directives
}