Vue里的钩子函数

最新推荐文章于 2024-08-15 22:00:44 发布

vision_seven7

最新推荐文章于 2024-08-15 22:00:44 发布

阅读量508

点赞数 1

分类专栏： vue

本文链接：https://blog.csdn.net/vision_seven7/article/details/108086789

版权

vue 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

Vue里的钩子函数

js中的钩子函数

在js中的钩子函数，相当于回调函数
**回调函数：**让开发者在特定的时候执行自定义逻辑

//定义主函数，回调函数作为参数
function A(callback) {
    callback();  
    console.log('我是主函数');      
}

//定义回调函数
function B(){
    setTimeout("console.log('我是回调函数')", 3000);//模仿耗时操作  
}

//调用主函数，将函数B传进去
A(B);

//输出结果
我是主函数
我是回调函数

jQuery的动画钩子函数

让开发者在动画执行完毕之后执行自定义逻辑
CSS

div{
	background:#98bf21;
	height:40px;
	width:100px;
	position:relative;
	margin-bottom:5px;
}

html

<div></div>
<div id="box"></div>
<div></div>
<button class="btn1">Mark animated element</button>

<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	function aniDiv(){
		$("#box").animate({width:300},"slow");
		$("#box").animate({width:100},"slow",aniDiv);
	}
	aniDiv();
	$(".btn1").click(function(){
		$(":animated").css("background-color","blue");
	});
});
</script>

vue钩子函数

自定义指令的钩子函数

Vue.directive( ' 自定义指令名 ' , { } )
参数一是指令的名字，注意定义的时候指令前不需要加 v- 前缀，但调用的时候必须加上这个前缀
参数二是一个对象，在这对象身上有一些指令相关的函数，这些函数可以在特定阶段执行相关的操作，叫钩子函数

bind ：让开发者将自定义指令绑定到dom元素上时执行自定义逻辑
inserted：让开发者在元素插入dom树的时候执行自定义逻辑
update：让开发者在元素状态发生改变的时候执行自定义逻辑

<body>
<div id="app">
    <input type="text" id="text" v-focus><!--自定义全局指令后可在标签内直接使用这个指令-->
</div>
<script>
    //注册一个全局自定义指令
    Vue.directive('focus', {
        //每当指令绑定到元素上时，会立即执行这个bind函数，只执行一次
        bind: function () {

        },
        //inserted表示元素插入到DOM中时，会执行inserted函数，只触发一次，el表示被绑定的那个原生js对象
        inserted: function (el) {
            el.focus()
        },
        //当VNode更新时会执行updated，可能触发多次
        updated:function(){

        }
    })

    var app = new Vue({
        el: '#app',
        data: { }
    })
</script>
</body>