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 ...
随机推荐
- GO闭包
package main import "fmt" func main() { add_func := add(1,2) fmt.Println(add_func(1,1)) fm ...
- Python基础-3 输入输出
输入输出 input输入函数 input函数:获取用户输入,保存成一个字符串.重要的话,说两遍,input函数的返回值是一个字符串类型.哪怕你输入的是个数字1,返回给你的只会是字符串"1&q ...
- LinkedHashMap的用法
1:LinkedHashMap的简介 Map 接口的哈希表和链接列表实现,具有可预知的迭代顺序.此实现与 HashMap 的不同之处在于,后者维护着一个运行于所有条目的双重链接列表.此链接列表定义了迭 ...
- nginx 书籍
1.<实战nginx> 2.<深入理解nginx> 3.nginx开发从入门到精通 http://tengine.taobao.org/book/ 4.Nginx源码学习,配置 ...
- request和response对象如何解决中文乱码问题?
出现中文乱码的问题,一般的原因编码和和解码不一致造成的. /* 乱码:编码和解码不一致导致的 GET:你好 POST:?????? tomcat版本:8.5及以上版本 GET请求方式,request对 ...
- CSP2019 Emiya 家今天的饭
Description: 有 \(n\) 中烹饪方法和 \(m\) 种食材,要求: 至少做一种菜 所有菜的烹饪方法各不相同 同种食材的菜的数量不能超过总菜数的一半 求做菜的方案数. Solution1 ...
- 阿里云服务器Ubantu16.04升级python3.6
从ppa上下载下载python3.6 sudo apt-get install software-properties-common#使用 “add-apt-repository” 脚本添加 ppa ...
- MyBatis6——一级缓存、二级缓存、逆向工程
查询缓存 一级缓存:同一个sqlSession对象 MyBatis默认开启一级缓存,如果用同样的sqlSession对象查询相同的数据,则会在第一次查询时向数据库发送SQL语句,并将查询的结果放入到S ...
- 109、Java中String类之截取部分子字符串
01.代码如下: package TIANPAN; /** * 此处为文档注释 * * @author 田攀 微信382477247 */ public class TestDemo { public ...
- mockjs,json-server一起搭建前端通用的数据模拟框架教程
无论是在工作,还是在业余时间做前端开发的时候,难免出现后端团队还没完成接口的开发,而前端团队却需要实现对应的功能,不要问为什么,这是肯定存在的.本篇文章就是基于此原因而产出的.希望对有这方面的需求的同 ...