vue 自动获取输入框的焦点（ref / 自定义指令）

一、ref

1.给要操作的dom元素设置ref属性(属性值可以随便起)

<input type="text" ref="input">

2.在选项mounted获取要操作的dom元素this.$refs.ref属性值
(mounted :页面加载完成后自动调用)

var vm = new Vue({
	el:"#app",
	data:{
	},
	methods:{
	},
	mounted(){
		this.$refs.input.focus();
	}
	
}); 

二、自定义指令

1.全局自定义指令

// 注册一个全局自定义指令 `v-focus`
Vue.directive('focus', {
  // 当被绑定的元素插入到 DOM 中时……
  // 指使用 v-focus 的元素
  	inserted: function (el) {
    // 聚焦元素
    el.focus()
  }
})

1.如果想注册局部指令，组件中也接受一个 directives 的选项：

directives: {
  focus: {
    // 指令的定义
    inserted: function (el) {
      el.focus()
    }
  }
}

2.然后你可以在模板中任何元素上使用新的 v-focus property，如下：

<input v-focus>