使用vue自定義全局指令,在加載頁(yè)面的時(shí)候自動(dòng)讓光標(biāo)聚焦到輸入框
使用Vue.directive() 定義全局的指令,
語(yǔ)法:
Vue.directive("focus",對(duì)象) 這樣定義的是全局的,如果需要定義私有的,就在vue實(shí)例中,添加directives字段
自定義的命令也是可以傳參的.不過(guò)獲取的形參是一個(gè)對(duì)象,需要使用.value拿到你傳的值,你也可以打印形參查看數(shù)據(jù)的結(jié)構(gòu)
參數(shù):focus就是你定義的指令名,不過(guò)在調(diào)用的時(shí)候需要在前面加上 v-
所有vue的指令都是 v- 開(kāi)頭的
參數(shù):對(duì)象 這個(gè)對(duì)象里面包含有與你定義的指令相關(guān)的函數(shù),常用的bind , inserted ,updated
vue指令函數(shù)也可以縮寫(xiě).使用縮寫(xiě)的時(shí)候, 相當(dāng)于函數(shù)應(yīng)用在了bind和update里面
形式如:
directives:{
"focus1":function(el){}
}
// bind和update會(huì)同時(shí)綁定這個(gè)這個(gè)函數(shù),如果需求兩個(gè)綁定不一樣,就不能這么寫(xiě)了
代碼示例
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="../util/vue-2.4.0.js"></script>
</head>
<body>
<div id="test">
<input type="text" v-focu="[100,200]"/><br/>
</div>
<div id="test1">
<input type="text" v-focus1="100"/>
</div>
<script>
Vue.directive("focu",{
// 注:在每個(gè)函數(shù)中,第一個(gè)參數(shù)永遠(yuǎn)是el,表示被綁定了指令的那個(gè)元素,這是el參數(shù)是一個(gè)原生js對(duì)象
bind: function (el) { //每當(dāng)指令綁定到元素上的時(shí)候會(huì)立即執(zhí)行這個(gè)bind函數(shù),只執(zhí)行一次
// 在元素剛綁定了指令的時(shí)候,還沒(méi)有插入到DOM中去,這時(shí)候,調(diào)用focus方法沒(méi)有作用
el.focus();
},
inserted: function (el,data) {//當(dāng)元素插入到DOM中的時(shí)候,會(huì)執(zhí)行inserted函數(shù)
el.focus();
console.log(data.value[0],data.value[1])
},
updated: function (el) { // 當(dāng)組件更新的時(shí)候,會(huì)執(zhí)行updated ,可能會(huì)執(zhí)行多次
}
});
var vm1 = new Vue({
el:"#test"
});
var vm2 = new Vue({
el:"#test1",
directives:{
"focus1":{
inserted: function (el, arg1) {
console.log(arg1.value)
}
}
}
})
</script>
</body>
</html>
