Vue：自定义指令

最新推荐文章于 2024-09-11 15:33:18 发布

蛋蛋只要变强不要秃

最新推荐文章于 2024-09-11 15:33:18 发布

阅读量163

点赞数

分类专栏：自学vue 文章标签： javascript vue

本文链接：https://blog.csdn.net/Cindy___hhh/article/details/115943386

版权

自学vue 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

自定义指令概述
自定义指令使用来操作Dom的，且可复用。其分为全局指令和局部指令。
全局指令定义语法如下：

Vue.directive("指令id",{
        //当指令第一次绑定到元素上时调用，只调用一次，可以用来执行初始化操作
        //即：指令绑定到元素
        bind: function(){
            alert("bind");
        },

        //被绑定有自定义指令的元素被插入到Dom中时调用
        inserted: function(){
            alert("insert");
        },

        //被绑定元素在模板更新时调用
        update: function(){
            alert("update");
        },

        //被绑定元素在模板完成一次更新时调用
        componentUpdated: function(){
            alert('componentUpdated');
        },

        //指令和元素解绑时调用：只执行一次！！！
        unbind: function(){
            alert("unbind");
        }
    })

示例：页面上的输入框直接获取焦点：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>关于组件</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <p>页面上的输入框直接获取焦点</p>
        <input type="text" v-focus>
    </div>
</body>
<script>
    Vue.directive('focus',{
        //将元素插入到dom后中执行钩子函数insert
        inserted: function(el){
            //el是指当前指令绑定的dom元素
            el.focus();
        }
    })
    new Vue({
        el: '#app'
    })
</script>
</html>

自定义局部指令：在Vue实例中使用directives选项注册局部指令，语法如下：

new Vue({
	el: '#app',
	directives: {
		//定义局部指令
	}
})

钩子函数
一个指令的定义对象可以提供五种可选的钩子函数：bind, inserted, update, componentUpdated, unbind。钩子函数的参数如下：
（1）el：指令绑定的元素，可以直接来操作dom。
（2）binding：一个包含name,value等属性的对象。
（3）vnode：Vue编译生成的虚拟节点。
（4）oldVnode：上一个虚拟节点，仅在update和componentUpdated钩子中可用。
当不需要其他钩子函数时，可以简写为：

Vue.directive("指令ID",function(el,binding){
	//函数操作
})

对象字面量
如果指令需要多个值，可以传入一个Javascript对象字面量，其又称为映射，是键值对的集合。它的语法是用一对大括号包着用逗号分隔的键值对，其中键和值分别用单引号括起来，键和值之间用冒号连接。

蛋蛋只要变强不要秃

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue：自定义指令

Vue：自定义指令自定义指令概述自定义指令使用来操作Dom的，且可复用。其分为全局指令和局部指令。全局指令定义语法如下：Vue.directive("指令id",{ //当指令第一次绑定到元素上时调用，只调用一次，可以用来执行初始化操作 //即：指令绑定到元素 bind: function(){ alert("bind"); }, //被绑定有自定义指令的元素被插入到Dom中时调用
复制链接

扫一扫

专栏目录