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

使用directive自定义全局指令

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

HTML

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>

<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>

</head>

<body>

<div id="app">

    <p>页面载入时，input 元素自动获取焦点：</p>

    <input v-focus>

</div>

<script>

// 注册一个全局自定义指令 v-focus

Vue.directive('focus', {

  // 当绑定元素插入到 DOM 中。

  inserted: function (el) {

    // 聚焦元素

    el.focus()

  }

})

// 创建根实例

new Vue({

  el: '#app'

})

</script>

</body>

</html>

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

使用 directives自定义局部指令

HTML

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>

<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>

</head>

<body>

<div id="app">

  <p>页面载入时，input 元素自动获取焦点：</p>

  <input v-focus>

</div>

<script>

// 创建根实例

new Vue({

  el: '#app',

  directives: {

    // 注册一个局部的自定义指令 v-focus

    focus: {

      // 指令的定义

      inserted: function (el) {

        // 聚焦元素

        el.focus()

      }

    }

  }

})

</script>

</body>

</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. PE415

    那个条件其实是个结论吧..除非全部共线就是存在一条线只经过两点.. 那就容斥一发,然后变成个传统数论题,xjb杜教筛就好了.. (最终那个式子不太好看的..)

  2. mac 应用程序安装目录

    java 安装目录 :/Library/Java/JavaVirtualMachines/jdk1.8.0_<more numbers>.jdk/Contents/Home maven 安 ...

  3. 【HDOJ5555】Immortality of Frog（状压DP）

    题意:给你一个NxN的网格,第N行的每一列都有个青蛙,这些青蛙只会往上走, 上帝会在每个膜中随机等概率放一个长生不老的药, 一共有N个膜,每个膜覆盖一些区间,如果这个区间恰好为N那么就是好膜,否则是坏 ...

  4. node 监听接口

    var http = require('http'); var mysql = require('mysql'); var connection = mysql.createConnection({ ...

  5. LeetCode OJ-- Palindrome Partitioning II ***

    https://oj.leetcode.com/problems/palindrome-partitioning-ii/ 给定一个串,让把它划分成子串,要求每个子串都是回文的. 动态规划: 设数组 a ...

  6. 交换机的工作模式：IVL和SVL

    IVL(independent vlan learning)每个vlan建一个表,看起来好像有很多表,其实这里所说的表是指逻辑上的表,实际上在交换机中还是只有一个表.如果将VID相同的记 录都提取出来 ...

  7. 微信小程序 图片路径自动加上文件目录导致渲染报错问题

    最近 在做小程序时候,发现一些商品图片在渲染时一直报错,也不显示,但是控制台打印出来 的路径却有没有问题 报错提示出错的路径会在前面自动加上“page/**”,思索了之后想到了微信只能解释https的 ...

  8. Apache + mod_wsgi部署webpy应用

    Apache + mod_wsgi部署webpy应用   引用:http://webpy.org/cookbook/mod_wsgi-apache.zh-cn 下面的步骤在Apache-2.2.3 ( ...

  9. [XJOI-NOI2015-13-C]白黑树

    题目大意: 给你一个$n(n\leq300000)$个结点的以$1$为根的树,结点有黑白两种颜色,每个点初始权值为$0$.进行以下2种共$m(m\leq300000)$次操作: 1.给定结点$u$,对 ...

  10. Spring中使用集成MongoDB Client启动时报错：rc: 48

    一定是所在的服务器也装了MongoDB导致端口冲突,解决方法:kill掉全部MongoDB的进程. ps aux | grep mongod PID 参考: http://blog.csdn.net/ ...