VueJS自定义全局和局部指令
除了默认设置的核心指令( 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自定义全局和局部指令的更多相关文章
- vue自定义全局和局部指令
一.介绍 1.除了核心功能默认内置的指令 (v-model 和 v-show),Vue 也允许注册自定义指令. 2.自定义指令的分类 1.全局指令 2.局部指令 3.自定义全局指令格式 V ...
- Vuejs自定义全局组件--loading
不管是使用框架,还是不使用任何的框架,我们都不可避免的需要与“加载中……”打交道,刚刚学习了Vuejs自定义组件的写法,就现学现卖,介绍一下吧! 先看一下目录结构,一般情况下,每一个组件都新建一个新的 ...
- Django---FORM组件.FORM组件的字段,FORM组件校验流程,FORM组件的全局和局部钩子,FORM和Model的组合
Django---FORM组件.FORM组件的字段,FORM组件校验流程,FORM组件的全局和局部钩子,FORM和Model的组合 一丶FORM的介绍 1.生成页面可用的HTML标签 2.对用户提交的 ...
- mvc自定义全局异常处理
异常信息处理是任何网站必不可少的一个环节,怎么有效显示,记录,传递异常信息又成为重中之重的问题.本篇将基于上篇介绍的html2cancas截图功能,实现mvc自定义全局异常处理.先看一下最终实现效果: ...
- Asp.net mvc 自定义全局的错误事件HandleErrorAttribute无效
Asp.net mvc 自定义全局的错误事件HandleErrorAttribute,结果无效, 原因: 1.没有在RegisterGlobalFilters 里面添加或者你要的位置添加. 2.你把这 ...
- JNDI在server.xml中的配置（全局和局部的）
总结: 全局就是在数据源server.xml中配置,然后通过和项目名相同的xml来进行映射.对所有的项目都起作用.那个项目需要就在对应的tomcat下配置一个与项目名相同的xml映射文件. 局部的就是 ...
- js 函数 作用域 全局作用域 局部作用域 闭包
一个变量没有声明但调用 直接报错,声明没有赋值会显示未定义. 作用域 作用域(scope):一条数据可以在哪个范围中使用. 通常来说,一段程序代码中所用到的数据并不总是有效/可用的,而限定这个数据的可 ...
- vue教程3-03 vue组件，定义全局、局部组件，配合模板，动态组件
vue教程3-03 vue组件,定义全局.局部组件,配合模板,动态组件 一.定义一个组件 定义一个组件: 1. 全局组件 var Aaa=Vue.extend({ template:'<h3&g ...
- [ python ] 全局和局部作用域变量的引用
全局与局部变量的引用 (a)locals(b)globals 这里还需要在补充2个关键字一起比较学习,关键字:(c)nonlocal(d)global locals 和 globals locals: ...
随机推荐
- 开启dns服务时，/etc/init.d/named start 卡住了的解决办法。
在命令行输入 rndc-confgen -r /dev/urandom -a 再次开启服务 /etc/init.d/named start ok
- 东野圭吾--嫌疑人X的献身读后感
经推荐,打算看日本大作家东野圭吾的<嫌疑人X的献身>.书很薄,八开大小的书两百多页,一下午的时间差不多就能读完.读了前面几章,代入感很强,压抑浓郁的气氛着实让人难受,所以打算先看一下电影, ...
- Swing要点
1. 布局管理器会控制潜逃在其他组件中组件的大小和位置. 2. 当某个组件加到背景组件上面时,被加入的组件是由背景组件的布局管理器管理的. 3. 布局管理器在做决定之前会询问组件的理想大小(setSi ...
- 如何在Linux的桌面上创建快捷方式或启动器
如果在Linux桌面系统中你经常使用一个程序,你可能想去创建一个“桌面快捷方式”,以便于你在桌面只要点击一下快捷方式就可以启动它.虽然不少带有图形界面的程序会在安装时自动在桌面上创建快捷方式,还有一些 ...
- duilib入门简明教程 -- 响应按钮事件(4) （转）
原文转自 http://www.cnblogs.com/Alberl/p/3343610.html 上一个Hello World的教程里有一句代码是这样的:CControlUI *pWnd = ...
- ZOJ 3593.One Person Game-扩展欧几里得(exgcd)
智障了,智障了,水一水博客. 本来是个水题,但是for循环遍历那里写挫了... One Person Game Time Limit: 2 Seconds Memory Limit: 655 ...
- Educational Codeforces Round 35 B. Two Cakes【枚举/给盘子个数，两份蛋糕块数，最少需要在每个盘子放几块蛋糕保证所有蛋糕块都装下】
B. Two Cakes time limit per test 1 second memory limit per test 256 megabytes input standard input o ...
- usaco-Money Systems
题意: 给出几种硬币,求可用这几种硬币组合出价值为n的方案数.分析: 设dp[i]表示组合出价值i的方案数,则,dp[i]=∑dp[i-val[j]]. #include <iostream&g ...
- Linked List Cycle - LeetCode
Given a linked list, determine if it has a cycle in it. Follow up:Can you solve it without using ext ...
- Akka之Circuit Breaker
这周在项目中遇到了一个错误,就是Circuit Breaker time out.以前没有接触过,因此学习了下akka的断路器. 一.为什么使用Circuit Breaker 断路器是为了防止分布式系 ...