除了默认设置的核心指令( v-model 和 v-show ), Vue 也允许注册自定义指令。

使用directive自定义全局指令

下面我们注册一个全局指令 v-focus, 该指令的功能是在页面加载时，元素获得焦点：

HTML

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
  6. <script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
  7. </head>
  8. <body>
  9. <div id="app">
  10.     <p>页面载入时，input 元素自动获取焦点：</p>
  11.     <input v-focus>
  12. </div>
  13.  
  14. <script>
  15. // 注册一个全局自定义指令 v-focus
  16. Vue.directive('focus', {
  17.   // 当绑定元素插入到 DOM 中。
  18.   inserted: function (el) {
  19.     // 聚焦元素
  20.     el.focus()
  21.   }
  22. })
  23. // 创建根实例
  24. new Vue({
  25.   el: '#app'
  26. })
  27. </script>
  28. </body>
  29. </html>

效果：输入框获取到焦点。

使用 directives自定义局部指令

HTML

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
  6. <script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
  7. </head>
  8. <body>
  9. <div id="app">
  10.   <p>页面载入时，input 元素自动获取焦点：</p>
  11.   <input v-focus>
  12. </div>
  13.  
  14. <script>
  15. // 创建根实例
  16. new Vue({
  17.   el: '#app',
  18.   directives: {
  19.     // 注册一个局部的自定义指令 v-focus
  20.     focus: {
  21.       // 指令的定义
  22.       inserted: function (el) {
  23.         // 聚焦元素
  24.         el.focus()
  25.       }
  26.     }
  27.   }
  28. })
  29. </script>
  30. </body>
  31. </html>

效果同上。

VueJS自定义全局和局部指令的更多相关文章

  1. vue自定义全局和局部指令

    一.介绍 1.除了核心功能默认内置的指令 (v-model 和 v-show),Vue 也允许注册自定义指令. 2.自定义指令的分类       1.全局指令 2.局部指令 3.自定义全局指令格式 V ...

  2. Vuejs自定义全局组件--loading

    不管是使用框架,还是不使用任何的框架,我们都不可避免的需要与“加载中……”打交道,刚刚学习了Vuejs自定义组件的写法,就现学现卖,介绍一下吧! 先看一下目录结构,一般情况下,每一个组件都新建一个新的 ...

  3. Django---FORM组件.FORM组件的字段,FORM组件校验流程,FORM组件的全局和局部钩子,FORM和Model的组合

    Django---FORM组件.FORM组件的字段,FORM组件校验流程,FORM组件的全局和局部钩子,FORM和Model的组合 一丶FORM的介绍 1.生成页面可用的HTML标签 2.对用户提交的 ...

  4. mvc自定义全局异常处理

    异常信息处理是任何网站必不可少的一个环节,怎么有效显示,记录,传递异常信息又成为重中之重的问题.本篇将基于上篇介绍的html2cancas截图功能,实现mvc自定义全局异常处理.先看一下最终实现效果: ...

  5. Asp.net mvc 自定义全局的错误事件HandleErrorAttribute无效

    Asp.net mvc 自定义全局的错误事件HandleErrorAttribute,结果无效, 原因: 1.没有在RegisterGlobalFilters 里面添加或者你要的位置添加. 2.你把这 ...

  6. JNDI在server.xml中的配置（全局和局部的）

    总结: 全局就是在数据源server.xml中配置,然后通过和项目名相同的xml来进行映射.对所有的项目都起作用.那个项目需要就在对应的tomcat下配置一个与项目名相同的xml映射文件. 局部的就是 ...

  7. js 函数 作用域 全局作用域 局部作用域 闭包

    一个变量没有声明但调用 直接报错,声明没有赋值会显示未定义. 作用域 作用域(scope):一条数据可以在哪个范围中使用. 通常来说,一段程序代码中所用到的数据并不总是有效/可用的,而限定这个数据的可 ...

  8. vue教程3-03 vue组件，定义全局、局部组件，配合模板，动态组件

    vue教程3-03 vue组件,定义全局.局部组件,配合模板,动态组件 一.定义一个组件 定义一个组件: 1. 全局组件 var Aaa=Vue.extend({ template:'<h3&g ...

  9. [ python ] 全局和局部作用域变量的引用

    全局与局部变量的引用 (a)locals(b)globals 这里还需要在补充2个关键字一起比较学习,关键字:(c)nonlocal(d)global locals 和 globals locals: ...

随机推荐

  1. BZOJ 3771 Triple ——FFT

    直接暴力卷积+统计就可以了. 去重比较复杂. 其实也不复杂,抄吧! 反正AC了. #include <map> #include <cmath> #include <qu ...

  2. pq

    pq 题目描述 小q 的女朋友送给小q nn个整数.但是这些数太大了,小q 的女朋友拿不动,于是拜托小q把这些数减少一些. 小q 每次可以选择其中的两个x,yx,y (不能同时选择同一个数) 变成x− ...

  3. CentOS下Nginx部署React静态应用

    查看CentOS版本: cat /etc/redhat-release 安装nginx: yum install nginx 查看nginx版本: nginx -v 启动nginx: systemct ...

  4. HDU3308 LCIS

    Time Limit: 2000MS   Memory Limit: 32768KB   64bit IO Format: %I64d & %I64u Description Given n ...

  5. Java下使用Swing来进行图形界面开发

    1. GUI从创建window开始,通常会使用JFrame.JFrame frame = new JFrame(); 2. 你可以这样加入按钮,文字字段等组件.frame.getContentPane ...

  6. android中Adapter适配器的讲解

    Adapter(适配器的讲解) 适配器就我自己来看,我觉得这是一个非常重要的知识点,Adapter是用来帮助填出数据的中间桥梁,简单点说吧:将各种数据以合适的形式显示在View中给用户看.Adapte ...

  7. 树莓派个人实测 Q&A（最新修改使用Manjaro连接远程桌面) （二）

    以下内容使用和http://www.eeboard.com/bbs/thread-5191-1-1.html所在的帖子一样的风格,不过原作者是window下的操作,本人的都是在manjaro linu ...

  8. steam linux 使用socks代理

    环境:Ubuntu 15.10 64bit,Steam:built:May 10 2016 需要的工具:ssh/shadowsocks等socks5代理,tsocks ---------------- ...

  9. Action 和 Func 的用法以及区别

    Action 无返回值 Func 有返回值,且最后一个参数为返回值 Action用法 public static void test(string s) { Console.WriteLine(&qu ...

  10. AC日记——任务查询系统 洛谷 P3168

    题目描述 最近实验室正在为其管理的超级计算机编制一套任务管理系统,而你被安排完成其中的查询部分.超级计算机中的任务用三元组(Si,Ei,Pi)描述,(Si,Ei,Pi)表示任务从第Si秒开始,在第Ei ...