vue自定义指令

简介: vue自定义指令

HTML:

注意:在元素上使用的时候要小写

<el-button type="primary" v-lxt="asd" round>主要按钮</el-button>

JS:

注意:js要小写v+首字母大写,自定义事件里面一定要有生命周期哦

const vLxt = {
  created(el, binding, vnode, prevVnode) {
    el.addEventListener('click', function () {
      console.log(2143353);
    })
    console.log(el, 1);
    console.log(binding, 2);
    console.log(vnode, 3);
    console.log(prevVnode, 4);
  },
  // 在元素被插入到 DOM 前调用
  beforeMount() { },
  // 在绑定元素的父组件
  // 及他自己的所有子节点都挂载完成后调用
  mounted() { },
  // 绑定元素的父组件更新前调用
  beforeUpdate() { },
  // 在绑定元素的父组件
  // 及他自己的所有子节点都更新后调用
  updated() { },
  // 绑定元素的父组件卸载前调用
  beforeUnmount() { },
  // 绑定元素的父组件卸载后调用
  unmounted() { },
}
相关文章
|
2天前
|
JavaScript
vue知识点
10月更文挑战第2天
17 3
|
1天前
|
JavaScript 数据可视化
vue-cli学习一:vue脚手架的 vue-cli2和vue-cli3版本 创建vue项目,vue的初始化详解
这篇文章介绍了如何使用vue-cli 2和3版本来创建Vue项目,并详细说明了两者之间的主要区别。
15 5
vue-cli学习一:vue脚手架的 vue-cli2和vue-cli3版本 创建vue项目,vue的初始化详解
|
1天前
|
JavaScript 数据可视化
vue-cli学习二:vue-cli3版本 创建vue项目后,Runtime-Compiler和Runtime-only两个模式详解;vue项目管理器;配置文件的配置在哪,以及如何配置
这篇文章详细介绍了Vue CLI 3版本创建项目时的Runtime-Compiler和Runtime-only两种模式的区别、Vue程序的运行过程、render函数的使用、eslint的关闭方法,以及Vue CLI 2和3版本配置文件的不同和脚手架3版本创建项目的配置文件配置方法。
11 3
vue-cli学习二:vue-cli3版本 创建vue项目后,Runtime-Compiler和Runtime-only两个模式详解;vue项目管理器;配置文件的配置在哪,以及如何配置
|
1天前
|
数据可视化 JavaScript 前端开发
低代码可视化工具--vue条件判断v-if可视化设置-代码生成器
低代码可视化工具--vue条件判断v-if可视化设置-代码生成器
11 2
|
2天前
|
缓存 JavaScript UED
vue的动态组件 keep-alive
【10月更文挑战第6天】
12 3
|
1天前
|
JavaScript UED
Vue双向数据绑定的原理
【10月更文挑战第7天】
|
3天前
|
JavaScript UED 开发者
Vue中的导航守卫有哪三种?分别有什么作用
Vue中的导航守卫有哪三种?分别有什么作用
|
3天前
|
JavaScript 前端开发 UED
|
2天前
|
JSON 数据可视化 JavaScript
低代码可视化教你Vue遍历循环绑定
低代码可视化教你Vue遍历循环绑定
10 0
|
2天前
|
JavaScript 开发工具
低代码开发工具教你Vue双向数据绑定
低代码开发工具教你Vue双向数据绑定
8 0