使用vue自定义全局指令,在加载页面的时候自动让光标聚焦到输入框
使用Vue.directive() 定义全局的指令,
语法:
Vue.directive("focus",对象) 这样定义的是全局的,如果需要定义私有的,就在vue实例中,添加directives字段
自定义的命令也是可以传参的.不过获取的形参是一个对象,需要使用.value拿到你传的值,你也可以打印形参查看数据的结构
参数:focus就是你定义的指令名,不过在调用的时候需要在前面加上 v-
所有vue的指令都是 v- 开头的
参数:对象 这个对象里面包含有与你定义的指令相关的函数,常用的bind , inserted ,updated
vue指令函数也可以缩写.使用缩写的时候, 相当于函数应用在了bind和update里面
形式如:
directives:{
"focus1":function(el){}
}
// bind和update会同时绑定这个这个函数,如果需求两个绑定不一样,就不能这么写了
代码示例
<!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",{
// 注:在每个函数中,第一个参数永远是el,表示被绑定了指令的那个元素,这是el参数是一个原生js对象
bind: function (el) { //每当指令绑定到元素上的时候会立即执行这个bind函数,只执行一次
// 在元素刚绑定了指令的时候,还没有插入到DOM中去,这时候,调用focus方法没有作用
el.focus();
},
inserted: function (el,data) {//当元素插入到DOM中的时候,会执行inserted函数
el.focus();
console.log(data.value[0],data.value[1])
},
updated: function (el) { // 当组件更新的时候,会执行updated ,可能会执行多次
}
});
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>
