在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: '',
},