<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可能会执行多次哦。
和css样式有关的操作 放在bind函数中
和js行为有关的操作 可以写在inserted()这个函数中去
bind:每当指令绑定到元素上的时候，就会立刻执行bind这个函数，
在这三个函数中，第一个参数永远是el,表示被绑定了指令的那个元素，这个el是一个原生的js对象。
inserted：表示元素插入到DOM中的时候，会执行inserted函数。
updated:当数据跟新的时候，就会执行updated,可能会触发多次
ps==>但是在element-ui中，你这种你要使用原生的哪一种方式
你使用自定义指令会失去效果 因为el-input是div哦，而不是input
<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>
