标签：Vue自定义指令
除了核心功能默认内置的指令 (v-model 和 v-show等)，Vue 也允许注册自定义指令。1.例子一：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
</style>
</head>
<body>
<div id="app">
<p>向下滚动页面</p>
<p v-tack="200">我固定在距离页面顶部200px的地方</p>
</div>
<script src="js/vue.min.js"></script>
<script>
// 创建自定义指令
Vue.directive(‘tack‘,{
bind(el,binding,vnode){
el.style.position = ‘fixed‘
el.style.top = binding.value + ‘px‘
console.log(el)
}
})
var app = new Vue({
el:"#app",
methods:{
}
});
</script>
</body>
</html>
2.例子二（指令传参）
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
</style>
</head>
<body>
<div id="app">
<p>向下滚动页面</p>
<p v-tack="{top:‘100‘,left:‘400‘}">Demo02</p>
</div>
<script src="js/vue.min.js"></script>
<script>
// 创建自定义指令
Vue.directive(‘tack‘,{
bind(el,binding,vnode){
el.style.position = ‘fixed‘
// const s =(binding.arg === ‘left‘?‘left‘:top)
el.style.top = binding.value.top + ‘px‘
el.style.left = binding.value.left + ‘px‘
console.log(el)
}
})
var app = new Vue({
el:"#app",
methods:{
}
});
</script>
</body>
</html>
标签：Vue自定义指令
原文地址：http://blog.51cto.com/2014fontend/2091370
