<body>
<div id="app">
<input type="text" value="" id="search">
</div>
<script>
var vm = new Vue({
el: "#app",
data: {
}
});
// 原生自动获取焦点
document.getElementById("search").focus();
</script>
</body>
这种方式 虽然可以实现 但是vue不提倡我们dom操作
所以我们自己写一个v-focus的指令 请看下面
自定义v-focus 页面一刷新就获取文本
bind inserted 这两个函数只会执行一次哦,
数据发生改变的时候,updated可能会执行多次哦。
bind:每当指令绑定到元素上的时候,就会立刻执行bind这个函数,
在这三个函数中,第一个参数永远是el,表示被绑定了指令的那个元素,这个el是一个原生的js对象。
inserted:表示元素插入到DOM中的时候,会执行inserted函数。
updated:当数据跟新的时候,就会执行updated,可能会触发多次
<body>
<div id="app">
<input type="text" value="" v-focus>
</div>
<script>
Vue.directive("focus", {
bind: function (el) {
},
inserted: function (el) {
el.focus();
},
updated(el) {
//当v-model跟新的时候,就会执行这个函数 这个函数会执行多次
},
})
var vm = new Vue({
el: "#app",
data: {
}
});
</script>
</body>
页面一刷新让文本框自动获取焦点-- 和自定义v-focus指令
原文:https://www.cnblogs.com/IwishIcould/p/12006378.html