官方链接：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. 2019 OO第一单元总结(表达式求导)

    一. 基于度量的程序结构分析 1. 第一次作业 这次作业是我上手的第一个java程序,使用了4个类来实现功能.多项式采用两个arraylist来存,系数和幂指数一一对应. private ArrayL ...

  2. Java_使用日志

    日志有什么用? 在实际开发中,不可能使用控制台输出所有数据,可以用日志把程序运行的过程记录下来,包括运行中出现的异常和BUG 当出现问题的时候,程序员可以去查看日志,从而能快速的找到问题所在. 一般来 ...

  3. linux下mysql主从复制搭建

    目标:搭建两台MySQL服务器,一台作为主服务器,一台作为从服务器,实现主从复制 环境: 主数据库: 192.168.1.1 从数据库: 192.168.1.2 mysql安装可参考:https:// ...

  4. Java中equals，hashcode

         在Java语言中,Object对象中包含一个equals和hashCode方法,其中hashCode方法是由JVM本地代码(native code)实现的,返回值是一个有符号的32位整数,对 ...

  5. Python 1行代码实现文本分类(实战笔记)，含代码详细说明及运行结果

    Python 1行代码实现文本分类(实战笔记),含代码详细说明及运行结果 一.详细说明及代码 tc.py =============================================== ...

  6. Hive导出表数据

    法一: hive (stuchoosecourse) > insert overwrite local directory '/home/landen/文档/exportDir'         ...

  7. 删除Open with Atom右键菜单

    特别特别讨厌Atom的右键菜单,叕没有设置项可以去掉,烦!安装完RegScanner v2.15汉化版之后,开始搜索删除Atom的右键菜单 1.打开E:\RegScanner2.加载配置文件 E:\R ...

  8. QMYSQL driver not loaded

    QT5 连接 QMYSQL 数据库时出现错误:QMYSQL driver not loaded. 解决方法如图:(图中使用指令:ldd libqsqlmysql.so) 从结果图显示中:libmysq ...

  9. Centos 添加用户和用户组

    groupadd cheat useradd -g cheat cheat passwd cheat 密码设置jsb_6041

  10. WPF多路绑定

    WPF多路绑定 多路绑定实现对数据的计算,XAML:   引用资源所在位置 xmlns:cmlib="clr-namespace:CommonLib;assembly=CommonLib&q ...