官方链接：http://doc.vue-js.com/v2/guide/custom-directive.html#simplest-directive-example

在main.js中注册自定义指令 v-input

注意：自定义指令要写在实例初始化之前

定义模板，在模板元素上使用新的 v-input 指令

想实现的效果：1.当页面加载时，该input元素将自动获得焦点；2.在输入框输入数字，当输入字数为6~10位时边框变为红色，其他情况下为蓝色；

自定义指令directive基础用法的更多相关文章

  1. angularjs - 自定义指令(directive)

    自定义指令(directive) 使用 .directive 函数来添加自定义的指令. 要调用自定义指令,HTML 元素上需要添加自定义指令名. 例子:使用驼峰法来命名一个指令, demoDirect ...

  2. vue从入门到进阶：自定义指令directive，插件的封装以及混合mixins（七）

    一.自定义指令directive 除了核心功能默认内置的指令 (v-model 和 v-show),Vue 也允许注册自定义指令.注意,在 Vue2.0 中,代码复用和抽象的主要形式是组件.然而,有的 ...

  3. angularjs自定义指令Directive

    今天学习angularjs自定义指令Directive.Directive是一个非常棒的功能.可以实现我们自义的的功能方法. 下面的例子是演示用户在文本框输入的帐号是否为管理员的帐号"Adm ...

  4. Vue input 控件: 通过自定义指令(directive)使用正则表达式限制input控件的输入

    前言: 网站中的input输入框使用非常广泛,因业务场景不同需要对输入框做合法性校验或限制输入,比如电话号码.邮件.区号.身份证号等.input框的不合法内容主要有两种方式处理:1.用户输入内容后,通 ...

  5. 自定义指令directive

    1.自定义指令 在angular中,module下面的directive方法用于创建自定义指令,用法: m1.directive('myTab',function(){ return { restri ...

  6. angularjs 一篇文章看懂自定义指令directive

     壹 ❀ 引 在angularjs开发中,指令的使用是无处无在的,我们习惯使用指令来拓展HTML:那么如何理解指令呢,你可以把它理解成在DOM元素上运行的函数,它可以帮助我们拓展DOM元素的功能.比如 ...

  7. angular 自定义指令 directive transclude 理解

    项目中断断续续的用了下angular,也没狠下心 认真的学习.angular 特别是自定义指令这块 空白. transclude 定义是否将当前元素的内容转移到模板中.看解释有点抽象. 看解释有点抽象 ...

  8. Angular自定义指令directive:scope属性

    在AngularJS中,除了内置指令如ng-click等,我们还可以自定义指令.自定义指令,是为了扩展DOM元素的功能.代码中,通过指定directive中的restrict属性,来决定这个指令是作为 ...

  9. angularJs自定义指令.directive==类似自定义标签

    创建自定义的指令 除了 AngularJS 内置的指令外,我们还可以创建自定义指令. 你可以使用 .directive 函数来添加自定义的指令. 要调用自定义指令,HTML 元素上需要添加自定义指令名 ...

随机推荐

  1. webpack初学者（1）

    最近在学习webpack的总结,不完善的希望各位提出宝贵的建议.本篇是以webpack3.0版本为基础的学习总结. 一.webpack的概念及作用 wepack是一个模块打包兼优化工具.往往一个项目中 ...

  2. js 保留字符串中的关键字前后两个字符其他内容用省略号显示

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  3. vmware安装——CentOS-6.5和Mysql

    1.新建虚拟机 2.安装centos6.5 3.centos设置 查看网络 4.vmware设置网络连接 关闭selinux [root@china ~]# vim /etc/selinux/conf ...

  4. js之math 对象

    Math 对象是js中使用数学公式计算的便捷方法,其方法运行起来比直接写的js运行是对要更快 1.Math.min(一组数值)  该方法可以比较一组数值的大小,并且返回较小的数值 用法: Math.m ...

  5. 在webpack中配置vue.js

    在webpack中配置vue.js 这里有两种在webpack中配置vue.js的方法,如下: 1.在main.js中引入vue的包: index.html: <!DOCTYPE html> ...

  6. mybatis开启二级缓存小记

    mybatis开启二级缓存小记 1.开启二级缓存 和一级缓存默认开启不一样,二级缓存需要我们手动开启 首先在全局配置文件 mybatis-configuration.xml 文件中加入如下代码: &l ...

  7. AttrContext

    info属性类型为AttrContext或AttrContextEnv.主要看AtrContext即可.定义了如下关键参数: /** Contains information specific to ...

  8. Unable to handle kernel NULL pointer dereference at virtual address 00000000问题的解决

    今天在编译好内核模块后,安装内核模块memdev.ko的时候,出现了Unable to handle kernel NULL pointer dereference at virtual addres ...

  9. protocol buffers的编码原理

    protocol buffers使用二进制传输格式传递消息,因此相比于xml,json来说要轻便很多. 示例:假设定义了一个Message message Test1 { required int32 ...

  10. mysql数据库修改字符编码问题

    遇到这种情况,现有项目的数据库已经建好,数据表也已经创建完成. 问题来的,数据库不能插入中文,调试时候发现中文数据从发送请求到最后请求处理完成这些步骤,中文还没有发生乱码. 只有在存储到数据库后查询数 ...