除了默认设置的核心指令( 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. input[type="radio"]自定义样式

    input为radio时,虽然会有默认选中的样式,但是并不符合大多数项目的需求,我们的目标是可以随心所欲自定义它的样式.怎么做呢?其实很简单,只要抓住3点.分别是1.label 2.隐藏自带样式 3. ...

  2. Eclipse与MyEclipse增加主题

    下载所需文件 下载地址:https://pan.baidu.com/s/1slq9lFn 如果eclipse和myeclipse里的MyEclipse 10\dropins存在features和plu ...

  3. http://store.microsoft.com/home.aspx

    原文发布时间为:2009-07-26 -- 来源于本人的百度文章 [由搬家工具导入] http://store.microsoft.com/home.aspx

  4. post sharp 与log4net 结合使用，含执行源码 转拷

    环境: VS 2012 PostSharp-4.1.28 (下载地址)https://visualstudiogallery.msdn.microsoft.com/a058d5d3-e654-43f8 ...

  5. hdu 5972 Regular Number 字符串Shift-And算法 + bitset

    题目链接 题意 给定两个串\(S,T\),找出\(S\)中所有与\(T\)匹配的子串. 这里,\(T\)的每位上可以有若干(\(\leq 10\))种选择,匹配的含义是:对于\(S\)的子串的每一位, ...

  6. delphi 内存泄露 分析

  7. Scala 封装可break和continue的foreach循环

    发现scala里没有break和continue, 有时候实在是需要的话就要自己try catch异常,代码看起来有点蛋疼, 所以封装了一个可break和continue的foreach. impor ...

  8. 用户找回密码功能JS验证邮箱通过点击下一步隐藏邮箱输入框并修改下一步按钮的ID

    //这里是BaseDao /** * 获得一个对象 * @param hql * @param param * @return */ public Object get(String hql, Obj ...

  9. HDU1086 You can Solve a Geometry Problem too(计算几何)

    You can Solve a Geometry Problem too                                         Time Limit: 2000/1000 M ...

  10. 2016北京集训测试赛（八）Problem C: 直径

    Solution 一个定理: 把两棵树用一条边练成一棵树后, 树的直径在原来两棵树的四个直径端点中产生. 放到这一题, 我们通过DP先求出大树中以每个点为根的子树中的直径, 再取每棵小树中与其他树有连 ...