作者：MichaelThiessen译者：前端小智来源：laracasts.com喜欢再看，养成习惯我的很多文档和教程材料。欢迎来到星和完美。面试时可参考考点复习。我希望我们能在一起。对此我摘录了一段视频讲解，请点击：https://www.ixigua.com/i67909...在做项目的时候，有时候我们需要对输入进行聚焦，才能让用户更好的使用。聚焦输入所有浏览器都有一个内置的方法来聚焦输入。首先，我们需要获取元素。在原生JS中，我们可以使用如下方法获取元素：
constinput=document.getElementById('email');Vue提供了一个更好的方法：
constinput=this.$refs.email;获取到元素后，我们就可以关注input
exportdefault{methods:{focusInput(){this.$refs.email.focus();如果您使用的是自定义组件，$ref会获取该组件而不是我们的基本元素。因此，如果您尝试聚焦该组件，您将得到一个错误。要获取自定义组件的根元素，我们可以使用$el访问它：导出默认{组件：{CustomInput，}，方法：{focusInput（）{this.$refs.email.$el.focus（）;但是如果你想在组件加载时聚焦怎么办？页面加载时聚焦我们可以挂载生命周期来聚焦元素：exportdefault{components:{CustomInput,},mounted(){this.focusInput();},方法：{focusInput(){this.$refs.email.$el.focus();}}}等待重新渲染在某些情况下，我们可能需要等待Vue重新渲染整个应用程序。例如，如果您将输入从隐藏切换为显示。所以我们需要在重新聚焦之前等待输入加载。
从'./CustomInput.vue'导入自定义输入；导出默认{组件：{CustomInput，}，数据（）{返回{inputIsVisible：false，};},mounted(){this.focusInput();},methods:{showInput(){//显示输入组件this.inputIsVisible=true;//聚焦组件，但我们必须等待//以便它首先显示。this.nextTick(()=>{this.focusInput();});},focusInput(){this.$refs.email.$el.focus();}}}在这里，我们在nextTick方法中调用了focusInput方法。因为nextTick表示Dom已经加载完毕，所以这时候我们就可以拿到input元素了。代码部署后可能存在的bug，无法实时获知。事后为了解决这些bug，花费了大量的时间在日志调试上。顺便推荐一个好用的bug监控工具Fundebug。原文：https://laracasts.com/discuss...交流文章每周更新。可以微信搜索“大千世界”阅读即时更新（比博文早一两篇）。这篇文章在GitHubhttps://github.com/qq449245884/xiaozhi已经收录，整理了很多我的文档。欢迎star和改进。可以参考考点面试。另外，关注公众号，后台会回复福利，看到福利就知道了。
