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 ...
随机推荐
- tf.reduce_max 与 reduce 系列 API
reduce 可以理解为 python 里的 reduce 函数: tensorflow 中有很多 reduce_ API,其用法完全相同 tf.reduce_max 以这个为例进行说明 def re ...
- 吴裕雄--天生自然ORACLE数据库学习笔记：表分区与索引分区
create table ware_retail_part --创建一个描述商品零售的数据表 ( id integer primary key,--销售编号 retail_date date,--销售 ...
- 借助工具解决DNS污染
我第一次接触到DNS污染,是在GitHub上面进行学习的时候,发现头像加载出问题,加载失败,而且文档里面的图片也无法显示...... 百度了很多内容,差不多都试了一下,最终选择了使用DNS工具去解决 ...
- Ubuntu18.04下Qt5.9.8连接mysql数据库失败的解决办法
问题: 连接mysql数据库时,出现如下 提示: QSqlDatabase: QMYSQL driver not loaded QSqlDatabase: available drivers: QSQ ...
- ‘A’ = N’A’ , will not kill index seek in sqlserver version above 2014 anymore
Thanks to The advisor show us that we can get different behavior when we use condition , ='20000' or ...
- uniGUI之多页面框架(16)
效果图: 左边的树 的树结点 ,通过 结点名 与 右 侧TabSheet名 一致时,显示 相关页面. 这是相关 源代码 procedure TMainForm.UniFormCreate(Sender ...
- express框架开发接口部署线上环境PM2
1.PM2介绍 PM2是一个线上环境下,用于启动nodejs进程守护的工具,用来保证服务的稳定及分摊服务器进程和压力. 2.下载安装 npm install pm2 -g => pm2 --v ...
- 《React后台管理系统实战 零》：基础笔记
day01 1. 项目开发准备 1). 描述项目 2). 技术选型 3). API接口/接口文档/测试接口 2. 启动项目开发 1). 使用react脚手架创建项目 2). 开发环境运行: npm s ...
- ubuntu16.04 使用tensorflow object detection训练自己的模型
一.构建自己的数据集 1.格式必须为jpg.jpeg或png. 2.在models/research/object_detection文件夹下创建images文件夹,在images文件夹下创建trai ...
- 一个前端博主的nginx+php+mysql的环境搭建
这几天天某的公司给了在下一个需求,让我修改一个后端大佬用PHP写的一个官网,虽然说修改的内容还是很简单,但是毕竟之前还是没接触过PHP,于是开始了漫长的爬坑之旅,话不多说,这次就给大家介绍一下我配置安 ...