<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue</title>
<script src="../vue.js"></script>
<style>
</style>
</head>
<body>
<div id="main" class="container">
<!--用自定义指令去操作dom-->
<div v-gunsmoke>自定义指令</div>
<!--绑定初始值的指令-->
<div v-gunsmoke1="'200px'">自定义指令1</div>
</div>
<script>
Vue.directive('gunsmoke',{
//inserted生命周期只会执行一次
inserted(element) {
//element是自动传入的对象,这里输出结果为<div>自定义对象</div>
console.log(element);
//得到dom就可以为所欲为了
element.style.fontSize = '90px';
console.log('gunsmoke inserted')
}
});
Vue.directive('gunsmoke1',{
//inserted生命周期只会执行一次
inserted(element,binding) {
//element是自动传入的对象,这里输出结果为<div>自定义对象</div>
//binding是绑定的初始值
console.log(element,binding);
//得到dom就可以为所欲为了
element.style.fontSize = binding.value;
console.log('gunsmoke inserted')
},
//更新操作,每次更新都会执行
update(el,bind) {
console.log(el,bind)
}
});
new Vue({
el: '#main',
data: {
},
methods: {
}
})
</script>
</body>
</html>
901
评论
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
查看更多评论
添加红包
