vue 自定义指令

wowocpp

已于 2023-10-18 15:36:38 修改

阅读量155

点赞数

分类专栏： web_html 文章标签： vue.js

于 2023-10-18 15:19:14 首次发布

本文链接：https://blog.youkuaiyun.com/wowocpp/article/details/133906979

版权

web_html 专栏收录该内容

86 篇文章

订阅专栏

本文详细介绍了Vue中的自定义指令，探讨了如何在Vue组件中创建并使用自定义指令，以及指令与mounted生命周期钩子的关系。通过实例演示了局部注册和插入方法，以及如何实现聚焦功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vue 自定义指令

在这里插入图片描述
指令和mounted 是什么关系？

**创建工程：
H:\java_work\java_springboot\vue_study

ctrl按住不放右键悬着 powershell

H:\java_work\java_springboot\js_study\Vue2_3入门到实战-配套资料\01-随堂代码素材\day05\准备代码\04-自定义指令-基础语法

vue --version
vue create v-define-demo
cd v-define-demo
npm run serve

App.vue

<template>
  <div>
    <h1>自定义指令</h1>
    <input v-focusg ref="inp" type="text" />
    <input v-focus ref="inp" type="text" />
  </div>
</template>

<script>
export default {
  // 2.局部注册指令
  directives: {
    focus: {
      inserted(el) {
        el.focus();
      },
    },
  },
};
</script>

<style>
</style>

main.js

import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

Vue.directive('focusg', {
  inserted(el) {
    console.log(el);
    el.focus()
  }
})

new Vue({
  render: h => h(App),
}).$mount('#app')