在Vue中輸入框自動獲取焦點的三種方式

原生JS操作DOM
使用mounted鈎子函數，它表示頁面一加載進來就執行函數里面的內容（和window.onload類似）
1
//html部分
編號:<input type="text" v-model='newId' id='inputId'>
//vue對象
var vm = new Vue({
el: '#app',
data: {
newId: '',
},
// 注意：mounted鈎子函數的名字不能隨便取，而且它不能寫在methods屬性。
mounted () {
document.getElementById('inputId').focus()
}
ref方式實現
//html部分
編號:<input type="text" v-model='newId' ref='id'>
//vue對象
var vm = new Vue({
el: '#app',
data: {
newId: '',
},
mounted () {
this.$refs.id.focus();
}
使用自定義指令
1.Vue.directive('自定義指令的名字(可以隨便取，但是全部小寫)',{inserted:function(el,binding){}})
2. inserted鈎子函數，它表示自定義指令插入到標簽中的時候就執行
3. inserted鈎子函數有兩個參數（el,binding） el表示使用自定義指令的元素，binding表示自定義指令的信息
//html部分
編號:<input type="text" v-model='newId' v-myfocus>
//自定義指令
Vue.directive('myfocus', {
inserted: function(el, binding) {
//console.log(el)
el.focus()
}
})
//vue對象
var vm = new Vue({
el: '#app',
data: {
newId: '',
},