Vue(九)---自定义指令(directive )
1.无参数
自定义指令的方式：
1. 使用Vue.directive 来自定义
2. 第一个参数就是 指令名称 xart
3. el 表示当前的html dom对象
4. 在方法体内就可以通过 innerHTML style.color 等方式操控当前元素了
<body>
<div id="app">
<div v-xxx>
商店
</div>
</div>
<script type="text/javascript">
Vue.directive('xxx',function(el){
el.innerHTML = el.innerHTML + ' ------------ '
el.style.color = 'blue'
})
new Vue({
el:'#app'
})
</script>
</body>
2.有参数：
<body>
<div id="app">
<div v-xxx='{color:"red"}'>
商店
</div>
</div>
<script type="text/javascript">
Vue.directive('xxx', function (el,binding) {
el.innerHTML = el.innerHTML + '( ' + binding.value.color + ' )'
el.style.color = binding.value.color
})
new Vue({
el:'#app'
})
</script>
</body>
3.钩子函数：又叫做回调函数，或者事件响应函数。 指的是，一个指令在创建过程中，经历不同生命周期的时候，vue.js 框架调用的函数。
指令定义函数提供了几个钩子函数（可选）：
bind: 只调用一次，指令第一次绑定到元素时调用，用这个钩子函数可以定义一个在绑定时执行一次的初始化动作。inserted: 被绑定元素插入父节点时调用（父节点存在即可调用，不必存在于 document 中）。update: 被绑定元素所在的模板更新时调用，而不论绑定值是否变化。通过比较更新前后的绑定值，可以忽略不必要的模板更新（详细的钩子函数参数见下）。componentUpdated: 被绑定元素所在模板完成一次更新周期时调用。unbind: 只调用一次， 指令与元素解绑时调用。
钩子函数参数
钩子函数的参数有：
- el: 指令所绑定的元素，可以用来直接操作 DOM 。
- binding: 一个对象，包含以下属性：
- name: 指令名，不包括
v-前缀。 - value: 指令的绑定值， 例如：
v-my-directive="1 + 1", value 的值是2。 - oldValue: 指令绑定的前一个值，仅在
update和componentUpdated钩子中可用。无论值是否改变都可用。 - expression: 绑定值的表达式或变量名。 例如
v-my-directive="1 + 1"， expression 的值是"1 + 1"。 - arg: 传给指令的参数。例如
v-my-directive:foo， arg 的值是"foo"。 - modifiers: 一个包含修饰符的对象。 例如：
v-my-directive.foo.bar, 修饰符对象 modifiers 的值是{ foo: true, bar: true }。
- name: 指令名，不包括
- vnode: Vue 编译生成的虚拟节点。
- oldVnode: 上一个虚拟节点，仅在
update和componentUpdated钩子中可用。
<script src="https://how2j.cn/study/vue.min.js"></script>
<div id="div1">
<div v-xart:hello.a.b="message"> </div>
</div>
<script>
Vue.directive('xart', {
bind: function (el, binding, vnode) {
var s = JSON.stringify
el.innerHTML =
'name: ' + s(binding.name) + '<br>' +
'value: ' + s(binding.value) + '<br>' +
'expression: ' + s(binding.expression) + '<br>' +
'argument: ' + s(binding.arg) + '<br>' +
'modifiers: ' + s(binding.modifiers) + '<br>' +
'vnode keys: ' + Object.keys(vnode).join(', ')
},
update: function (newValue, oldValue) {
// 值更新时的工作
// 也会以初始值为参数调用一次
},
unbind: function () {
// 清理工作
// 例如，删除 bind() 添加的事件监听器
}
})
new Vue({
el: '#div1',
data:{
message:'hello vue.js'
}
})
</script>
Vue(九)---自定义指令(directive )的更多相关文章
- Vue(九) 自定义指令
前面介绍了许多 Vue 内置的指令,比如 v-if.v-show等,这些丰富的指令能满足我们绝大部分的业务需求,不过在需要一些特殊功能时,我们仍然希望对 DOM 进行底层的操作,这时就要用到自定义指令 ...
- vue之自定义指令directive
<template> <div> <input v-model="dir1" v-my-directive1="dir1"/> ...
- vue从入门到进阶：自定义指令directive，插件的封装以及混合mixins（七）
一.自定义指令directive 除了核心功能默认内置的指令 (v-model 和 v-show),Vue 也允许注册自定义指令.注意,在 Vue2.0 中,代码复用和抽象的主要形式是组件.然而,有的 ...
- Vue input 控件: 通过自定义指令(directive)使用正则表达式限制input控件的输入
前言: 网站中的input输入框使用非常广泛,因业务场景不同需要对输入框做合法性校验或限制输入,比如电话号码.邮件.区号.身份证号等.input框的不合法内容主要有两种方式处理:1.用户输入内容后,通 ...
- 最简单的方式理解Vue的自定义指令与混合
vue.js 自定义指令 钩子函数:bindinsertedupdatecomponentUpdatedunbind 钩子函数完整实例:html: <div id="hook-argu ...
- vue 通过自定义指令实现 置顶操作；
项目需求:要求当前项目每个页面滑到超出一屏的距离时,出现 backTop 按钮,点击则回到最顶端:俗称置顶操作: 因为涉及到的页面较多,每个页面都加肯定显得重复累赘,最终想到了 Vue 的自定义指令 ...
- vue怎么自定义指令？？
最近看看vue中自定义指令,感觉vue的指令和angular1的指令相差较大 <script> //指令钩子函数: /* bind 只调用一次,指令第一次绑定到元素的时调用 inserte ...
- vue中自定义指令
//vue中自定义指令 //使用 Vue.directive(id, [definition]) 定义全局的指令 //参数1:指令的名称.注意,在定义的时候,指令的名称前面,不需要加 v-前缀; 但是 ...
- Vue 3自定义指令开发
本文由葡萄城技术团队原创并首发 转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具.解决方案和服务,赋能开发者. 什么是指令(directive) 在Angular和Vue中都有Direct ...
随机推荐
- 阿里云短信接口开发实践（Java
随着互联网的兴起,各行各业的需求都在不断的增加.随着业务的扩大,企业给用户发送短信验证码的业务,也是如火如荼.在这里,calvin给各位开发者推荐阿里云短信平台.原因有二:1.接入较简单,开发成本低 ...
- vue父孙组件传值（$attr及$listeners）的使用
父组件 <template> <div> <!-- 将值传给子组件 子组件可以获取自己想要的值 也可以忽视掉需要传给孙子组件的值 --> <!-- 同时获取通 ...
- typescript 起步之安装及配置 ts-node 环境变量
最近vue 3.0 版本发布,让我认识到 typescript 将占有越来越重要的地位,所以我也开启了typescript学习之旅. 要想编写第一个 hello typescript 程序,当然要经过 ...
- 吴裕雄 Bootstrap 前端框架开发——Bootstrap 排版：设定文本居中对齐
<!DOCTYPE html> <html> <head> <title>菜鸟教程(runoob.com)</title> <meta ...
- docker-compose 快速部署持续集成测试环境 Gitlab+Harbor+Jenkins pipeline 实现 tag run docker Images
环境 测试部署主机IP:192.168.1.1 Jenkins主机IP:192.168.1.2 Harbor主机IP:192.168.1.3 Gitlab主机IP:192.168.0.10 系统信息: ...
- #P1099 树网的核 题解
题目描述 pdf 题解 这一题,刚开始看题目感觉好像很难,题目又长……一看数据范围,呵呵. 已经给出来这是个DAG,所以不用担心连通性的问题.那么怎么做呢? 朴素的做法是把树的直径的两个端点都统计出来 ...
- 莫烦 - Pytorch学习笔记 [ 一 ]
1. Numpy VS Torch #相互转换 np_data = torch_data.numpy() torch_data = torch.from_numpy(np_data) #abs dat ...
- Spring Schedule 实现定时任务
很多时候我们都需要为系统建立一个定时任务来帮我们做一些事情,SpringBoot 已经帮我们实现好了一个,我们只需要直接使用即可,当然你也可以不用 SpringBoot 自带的定时任务,整合 Quar ...
- Kubernetes 的一些重要概念
Cluster Cluseter 是计算.存储和网络资源的集合,Kubernetes 利用这些资源运行各种基于容器的应用. Master Master 是 Cluster 的大脑, 它的主要责任是调度 ...
- 警示框UIAlertController的使用(看完马上会用！！)
本文尽量图文并茂,并且提供对应的代码,确保看到这篇文章马上能够上手使用UIAlertController控件.-我要兑现我的务实宣言- 本文构思: 1.出具效果图,通过这种最直接方式了解该控件的展示效 ...