VueJS自定义全局和局部指令
2024-10-21 05:45:14
除了默认设置的核心指令( 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>
效果同上。
最新文章
- 【异常】INFO: TopologyManager: EndpointListener changed ...
- 在Sublime中编辑批处理并运行
- js物理弹性窗口
- vim查找替换
- FME中Cass扩展属性转Shp的方法
- C#初级知识点整理及VS的简单使用
- new,delete和malloc,free以及allocator<T>
- 自己的一个LESS工具函数库
- FloatingActionButton
- 在文件地理数据库中使用 SQL 进行报告和分析 (转)
- js四舍五入的bug和方法
- POJ1017 packets
- JVM调优总结（九）-新一代的垃圾回收算法
- githup教程
- c++字符串的输入的思考
- kubernetes 手绘画，先收藏一下
- flex调用JS报安全沙箱错误解决办法
- java的接口
- 从内部入手,浅谈malloc和new的区别
- JVM学习03：性能监控工具