<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>