自定义指令
//全局指令
Vue.directive('指令名字',{
//钩子函数（不同时期自动调用）
bind(el,binding){
//el 是绑定元素(dom对象)
//binding 是对象 name 是指令名字 value 使用指令传的参数
// 只触发一次
},
inserted(el,binding){
//el 是绑定元素(dom对象)
//binding 是对象 name 是指令名字 value 使用指令传的参数
// 当前元素 插入到 父节点中 触发
}
})
let Home = {
template:{},
data(){
return{}
},
directives:{
"指令名":{
bind(el,binding){
//el 是绑定元素(dom对象)
//binding 是对象 name 是指令名字 value 使用指令传的参数
// 只触发一次
},
inserted(el,binding){
//el 是绑定元素(dom对象)
//binding 是对象 name 是指令名字 value 使用指令传的参数
// 当前元素 插入到 父节点中 触发
}
}
}
}
<body>
<div id="app">
<input type="text" v-focus="100">
</div>
</body>
<script src="./js/vue.js"></script>
<script>
//定义一个指令全局,自动获取焦点
Vue.directive('focus',{
inserted(el,binding){
//el代指使用该指令的元素
el.focus();
//binding 传入的一些数据
}
})
let vm = new Vue({
el:'#app',
data:{
}
})
</script>
<style>
body {
height: 2500px;
}
button {
display: block;
width: 30px;
height: 120px;
text-align: center;
line-height: 30px;
border-radius: 10px 10px 0px 0px;
position: fixed;
bottom: 70px;
right: 40px;
display: none;
}
</style>
</head>
<body>
<div id="app">
<button v-scroll="500">回到顶部</button>
</div>
</body>
<script src="./js/vue.js"></script>
<script src="./js/jquery.min.js"></script>
<script>
//定义一个指令全局,回到顶部案例
Vue.directive('scroll',{
inserted(el,binding){
//el代指使用该指令的元素
//binding 传入的一些数据(这里是500)
let top = binding.value;
//绑定滚轮事件
window.onscroll = function(){
let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
if(scrollTop > top){
// el.style.display = "block"
$(el).fadeIn()
}else {
$(el).fadeOut()
}
}
//绑定事件回到顶部
$(el).click(function(){
window.scrollTo({
top:0,
behavior:"smooth"
})
})
},
//移除事件,提高性能
unbind(){
//如果在inserted创建了定时器没清除，或者绑定了全局的事件，需要清除操作
window.onscroll = null;
}
})
let vm = new Vue({
el:'#app',
data:{
}
})
</script>
钩子函数
钩子函数
一个指令定义对象可以提供如下几个钩子函数 (均为可选)：
bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。
inserted：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。
update：所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变，也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新 (详细的钩子函数参数见下)。
我们会在稍后讨论渲染函数时介绍更多 VNodes 的细节。
componentUpdated：指令所在组件的 VNode 及其子 VNode 全部更新后调用。
unbind：只调用一次，指令与元素解绑时调用。
接下来我们来看一下钩子函数的参数 (即 el、binding、vnode 和 oldVnode)。
钩子函数参数
指令钩子函数会被传入以下参数：
el：指令所绑定的元素，可以用来直接操作 DOM。
binding：一个对象，包含以下 property：
name：指令名，不包括 v- 前缀。
value：指令的绑定值，例如：v-my-directive="1 + 1" 中，绑定值为 2。
oldValue：指令绑定的前一个值，仅在 update 和 componentUpdated 钩子中可用。无论值是否改变都可用。
expression：字符串形式的指令表达式。例如 v-my-directive="1 + 1" 中，表达式为 "1 + 1"。
arg：传给指令的参数，可选。例如 v-my-directive:foo 中，参数为 "foo"。
modifiers：一个包含修饰符的对象。例如：v-my-directive.foo.bar 中，修饰符对象为 { foo: true, bar: true }。
vnode：Vue 编译生成的虚拟节点。移步 VNode API 来了解更多详情。
oldVnode：上一个虚拟节点，仅在 update 和 componentUpdated 钩子中可用。
局部指令定义
//局部自定义指令,和局部组件components类似
let Home = {
directives:{
focus:{
bind(){
},
inserted(el,binding){
}
}
}
}
