官方链接：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. 4. Neural Network

    1. 神经网络 首先引入一些便于稍后讨论的新标记: $L$:代表神经网络层数$S_l$:代表第$l$层处理单元的个数$K$:代表多分类中类别种数 2. 前向传播(forward propagation ...

  2. iOS---UICollectlionView 的使用

    UICollectlionView继承自UIScrollerview,跟tableview的使用很相似. 下面是UIcollectionView的一些属性和代理方法. #import "Vi ...

  3. OAuth 2.0 - Authorization Code授权方式详解

    I:OAuth 2.0 开发前期准备 天上不会自然掉馅饼让你轻松地去访问到人家资源服务器里面的用户数据资源,所以你需要做的前期开发准备工作就是把AppKey, AppSecret取到手 新浪获取传送门 ...

  4. Window Navigator对象

    Window Navigator对象 txt = "<p>浏览器代号: " + navigator.appCodeName + "</p>&quo ...

  5. Maven-pom.xml文件报错 Plugin execution not covered by lifecycle configuration

    问题: Eclipse中新导入的项目pom.xml文件报错: Plugin execution not covered by lifecycle configuration: org.jacoco:j ...

  6. RocketMQ-Filer

    一.搭建RocketMQ集群 我搭建的是2-master no slave模式,所以在${rocketmq}/conf/2m-noslave/下的 brokder-*.properties 中添加 f ...

  7. 开源视频会议bigbluebutton

    这是另一个开源视频会议项目,简称bbb 官方网站:http://bigbluebutton.org/ 代码地址:https://code.google.com/p/bigbluebutton/ dem ...

  8. C/C++ -- Gui编程 -- Qt库的使用 -- Qt5总结

    主要变化: 1.与Qt4相比,Qt5可以直接显示中文不需要手工转码2.Qt5模块发生变化,大部分组件并入widgets模块 注意事项:工程文件加一句greaterThan(QT_MAJOR_VERSI ...

  9. wap尝试调取app（网易新闻为例）

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

  10. R语言---- 数据的基本运算

    一.基本运算符号 1.基本数学计算 +.-.*./.^.%%(求模).%/%(整除)注意:求模运算两边若为小数,则整数和小数部分分别求模.例:5.6%%2.2 2.比较运算 >.<.> ...