自定義指令
//全局指令
Vue.directive('指令名字',{
//鉤子函數(shù)（不同時期自動調(diào)用）
bind(el,binding){
//el 是綁定元素(dom對象)
//binding 是對象 name 是指令名字 value 使用指令傳的參數(shù)
// 只觸發(fā)一次
},
inserted(el,binding){
//el 是綁定元素(dom對象)
//binding 是對象 name 是指令名字 value 使用指令傳的參數(shù)
// 當(dāng)前元素 插入到 父節(jié)點中 觸發(fā)
}
})
let Home = {
template:{},
data(){
return{}
},
directives:{
"指令名":{
bind(el,binding){
//el 是綁定元素(dom對象)
//binding 是對象 name 是指令名字 value 使用指令傳的參數(shù)
// 只觸發(fā)一次
},
inserted(el,binding){
//el 是綁定元素(dom對象)
//binding 是對象 name 是指令名字 value 使用指令傳的參數(shù)
// 當(dāng)前元素 插入到 父節(jié)點中 觸發(fā)
}
}
}
}
<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 傳入的一些數(shù)據(jù)
}
})
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 傳入的一些數(shù)據(jù)(這里是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創(chuàng)建了定時器沒清除，或者綁定了全局的事件，需要清除操作
window.onscroll = null;
}
})
let vm = new Vue({
el:'#app',
data:{
}
})
</script>
鉤子函數(shù)
鉤子函數(shù)
一個指令定義對象可以提供如下幾個鉤子函數(shù) (均為可選)：
bind：只調(diào)用一次，指令第一次綁定到元素時調(diào)用。在這里可以進行一次性的初始化設(shè)置。
inserted：被綁定元素插入父節(jié)點時調(diào)用 (僅保證父節(jié)點存在，但不一定已被插入文檔中)。
update：所在組件的 VNode 更新時調(diào)用，但是可能發(fā)生在其子 VNode 更新之前。指令的值可能發(fā)生了改變，也可能沒有。但是你可以通過比較更新前后的值來忽略不必要的模板更新 (詳細(xì)的鉤子函數(shù)參數(shù)見下)。
我們會在稍后討論渲染函數(shù)時介紹更多 VNodes 的細(xì)節(jié)。
componentUpdated：指令所在組件的 VNode 及其子 VNode 全部更新后調(diào)用。
unbind：只調(diào)用一次，指令與元素解綁時調(diào)用。
接下來我們來看一下鉤子函數(shù)的參數(shù) (即 el、binding、vnode 和 oldVnode)。
鉤子函數(shù)參數(shù)
指令鉤子函數(shù)會被傳入以下參數(shù)：
el：指令所綁定的元素，可以用來直接操作 DOM。
binding：一個對象，包含以下 property：
name：指令名，不包括 v- 前綴。
value：指令的綁定值，例如：v-my-directive="1 + 1" 中，綁定值為 2。
oldValue：指令綁定的前一個值，僅在 update 和 componentUpdated 鉤子中可用。無論值是否改變都可用。
expression：字符串形式的指令表達(dá)式。例如 v-my-directive="1 + 1" 中，表達(dá)式為 "1 + 1"。
arg：傳給指令的參數(shù)，可選。例如 v-my-directive:foo 中，參數(shù)為 "foo"。
modifiers：一個包含修飾符的對象。例如：v-my-directive.foo.bar 中，修飾符對象為 { foo: true, bar: true }。
vnode：Vue 編譯生成的虛擬節(jié)點。移步 VNode API 來了解更多詳情。
oldVnode：上一個虛擬節(jié)點，僅在 update 和 componentUpdated 鉤子中可用。
局部指令定義
//局部自定義指令,和局部組件components類似
let Home = {
directives:{
focus:{
bind(){
},
inserted(el,binding){
}
}
}
}
