官方链接：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. MySQL远程登陆解决

    第一句:以权限用户root登录 第二句:选择mysql库 第三句:查看mysql库中的user表的host值(即可进行连接访问的主机/IP名称) 第四句:修改host值(以通配符%的内容增加主机/IP ...

  2. Swift里字符串（六）Shared strings

    Shared strings do not have tail-allocated storage, but can provide access upon query to contiguous U ...

  3. Alamofire源码导读二：发起请求及内部加锁的逻辑

    以创建一个 DataRequest 为例子  发起请求 创建 SessionManager 顺带也创建了一个 SessionDelegate 持有一个urlSession,持有一个串行的 Dispa ...

  4. day 56 linux的安装python3 ,虚拟环境,mysql ,redis

    1.1下载python源码包 网址:https://www.python.org/downloads/release/python-366/ 下载地址:https://www.python.org/f ...

  5. 导入不用的css文件及在不同设备显示不用的html页面

    当一个页面对应有多个css样式文件时,我们可以根据地址栏的参数值而导入不同的css文件: function getCss() { var linkNode = document.createEleme ...

  6. (转)浅谈MySql的存储引擎（表类型）

    原文:http://www.cnblogs.com/lina1006/archive/2011/04/29/2032894.html 什么是MySql数据库 通常意义上,数据库也就是数据的集合,具体到 ...

  7. （转）AIX下镜像制作与取消，更换硬盘问题

    AIX下镜像制作与取消,更换硬盘问题 ROOTVG做镜像问题: 下面命令全部在AIX5.4上运行通过 # lspv hdisk0      000a1ddc7f36a2f0      rootvg   ...

  8. 搜集C++实现的线程池

    现在很多语言都内置了线程池实现,但C++中却没有.本文列举一些C++实现的线程池工具. Boost.Threadpool 项目首页:http://threadpool.sourceforge.net ...

  9. ActiveMQ--HelloWorld

    下载windows版本ActiveMQ,apache-activemq-5.15.3\bin\win64\activemq.bat 启动mq,ActiveMQ内置jetty,默认端口8161,默认用户 ...

  10. Spring Security构建Rest服务-1200-SpringSecurity OAuth开发APP认证框架

    基于服务器Session的认证方式: 前边说的用户名密码登录.短信登录.第三方登录,都是普通的登录,是基于服务器Session保存用户信息的登录方式.登录信息都是存在服务器的session(服务器的一 ...