<input type="text" class="form-control" v-model="keywords" v-focus>

使用vue.directive(‘focus’,{对象})定义全局指令,v-focus

   <script>
Vue.directive('focus',{
// 在每一个函数中,第一个参数,永远是el,表示被绑定了指令的那个元素,
// 这个el参数,是一个原生的js对象,也就是dom
bind:function(el,binding){//每当指令绑定到元素上的时候,会立即执行这个bind函数,只执行一次
el.style.color=binding.value
},//binding为一个对象,包含一些属性
inserted:function(el){//当元素插入到dom的时候,会执行insert,只执行一次
el.focus()
},
updated:function(el){//当vnode更新的时候会执行update,可能触发多次 }
})
var vm =new Vue({
el:'#a'
})
</script>

指令钩子函数会被传入以下参数:

  • el:指令所绑定的元素,可以用来直接操作 DOM 。
  • binding:一个对象,包含以下属性:
    • name:指令名,不包括 v- 前缀。
    • value:指令的绑定值,例如:v-my-directive="1 + 1" 中,绑定值为 2
    • oldValue:指令绑定的前一个值,仅在 update 和 componentUpdated 钩子中可用。无论值是否改变都可用。
    • expression:字符串形式的指令表达式。例如 v-my-directive="1 + 1" 中,表达式为 "1 + 1"
    • arg:传给指令的参数,可选。例如 v-my-directive:foo 中,参数为 "foo"
    • modifiers:一个包含修饰符的对象。例如:v-my-directive.foo.bar 中,修饰符对象为 { foo: true, bar: true }
  • vnode:Vue 编译生成的虚拟节点。。
  • oldVnode:上一个虚拟节点,仅在 update 和 componentUpdated 钩子中可用。

函数简写

在很多时候,你可能想在 bind 和 update 时触发相同行为,而不关心其它的钩子。比如这样写:

<script>
Vue.directive('color-swatch', function (el, binding) {
el.style.backgroundColor = binding.value
})
</script>

vue.js(14)--自定义全局指令的更多相关文章

  1. Vue.JS快速上手(指令和实例方法)

    1.声明式渲染 首先,我们要知道Vue是声明式渲染,那啥是声明式渲染,我们只需要告诉程序我们想要什么结果,其他的交给程序来做.与声明式渲染相对的是命令式渲染,即命令我们的程序去做什么,程序就会跟着你的 ...

  2. Vue.js:自定义指令

    ylbtech-Vue.js:自定义指令 1.返回顶部 1. Vue.js 自定义指令 除了默认设置的核心指令( v-model 和 v-show ), Vue 也允许注册自定义指令. 下面我们注册一 ...

  3. vue.js中的全局组件和局部组件

    组件(Component)是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码.在较高层面上,组件是自定义元素, Vue.js 的编译器为它添加特殊功能. 组件的使用有三 ...

  4. vue.js学习 自定义过滤器使用(2)

    gitHub地址: https://github.com/lily1010/vue_learn/tree/master/lesson05 一 自定义过滤器(注册在Vue全局) 注意事项: (1)全局方 ...

  5. Vue.js入门及其常用指令

    一.Vue框架 https://cn.vuejs.org/ 官网 前端领域有三大框架 Angular诞生于2009年,是由谷歌公司创建出来的框架: React诞生于2013年,是由facebook公司 ...

  6. vue.js介绍,常用指令,事件,以及制作简易留言版

    一.vue是什么? 一个mvvm框架(库).和angular类似,比较容易上手.小巧,让我们的代码更加专注于业务逻辑,而不是去关注DOM操作 二.vue和angular之间的区别 vue--简单易学 ...

  7. Vue.js学习(常用指令)

    Vue.js的指令是以v-开头,它们用于HTML元素,指令提供了一些特殊的特性,将指令绑定在元素上时,指令会为绑定的目标元素添加一些特殊的行为,我们可以将指令看作特殊的HTML特性. 本文参考:htt ...

  8. vue.js的一些模板指令简述

    1.模板指令都是写在<template></template>html里面   v-text : value是什么就显示什么,如果value里面有html的标签,也会直接显示出 ...

  9. 说说 Vue.js 中的 v-cloak 指令

    可以使用 v-cloak 指令设置样式,这些样式会在 Vue 实例编译结束时,从绑定的 HTML 元素上被移除. 当网络较慢,网页还在加载 Vue.js ,而导致 Vue 来不及渲染,这时页面就会显示 ...

随机推荐

  1. react native 之 redux 使用套路

    redux是什么?他是一个state容器 redux的运作方式是怎样的? 接入方式: 1. npm install 下列内容: npm install --save redux npm install ...

  2. python multiprocessing pool

    python 本身是不是单线程这个我真心搞不懂 但是我是来吐槽的: multiprocessing.Pool(precesses = 2) 这个语句曾经让我的内存爆满,死机不解释. 在重装 pytho ...

  3. mysql TOP语句 语法

    mysql TOP语句 语法 作用:用于规定要返回的记录的数目. 语法:SELECT column_name(s) FROM table_name LIMIT number 说明:对于拥有数千条记录的 ...

  4. mysql DELETE语句 语法

    mysql DELETE语句 语法 作用:用于删除表中的行.广东大理石构件 语法:DELETE FROM 表名称 WHERE 列名称 = 值 mysql DELETE语句 示例 //删除person表 ...

  5. setData 机制

    解释:setData 函数,用于将数据,从逻辑层发送到视图层,当开发者调用 setData 后,数据的变化,会引起视图层的更新.参数说明 属性 类型 是否必填 描述 data Object 是 这次要 ...

  6. 2014ACM-ICPC广州站题解(摘自闭幕式)

    第39届ACM-ICPC亚洲区广州站题解 Ltysky摘抄自闭幕式题目分析 Problem A 满足px+qy=c的点(x,y)在一条直线上,而c的值由直线的截距确定,所以最大化c,就要在糖果(x,y ...

  7. Fiddler简介以及web抓包1

    一.Fiddler简介 简单来说,Fiddler是一个http协议调试代理工具,它能够记录并检查所有你的电脑和互联网之间的http通讯.网上简介很多,我们不多说. 二.Fiddler版本 Fiddle ...

  8. SQL优化—nested loop优化

    跑批时间段22:00-23:00,生成AWR报告 分析sql:SQL_ID='5hfw4smzs2pqw' 执行计划: SQL> select *  FROM TABLE(DBMS_XPLAN. ...

  9. UITextView输入中文时限制字数

    最近因为项目中输入用户简称时限制长度,被测试部多次提交问题,最终将解决方法分享给大家. 刚开始用最简单的方法,在textView的代理方法里面做处理 - (void)textViewDidChange ...

  10. python-异常处理总结

    一.异常处理 在程序运行的过程中,总会遇到各种各样的错误.程序一出错就停止运行了,下面的代码就不能运行了:这时候就需要捕捉异常,通过捕捉异常,再去做对应的处理. e.g: info = { " ...