JS实现输入框默认获得焦点且文本全选中状态

ps：仅记录作为个人学习使用，也分享给同样需要的小伙伴，如有错误麻烦评论指教一下，谢谢！

下面的例子是Vue的一个实例（JavaScript中同理使用，因为Vue的本质就是一套构建用户界面的渐进式JavaScript框架）。
获得焦点的操作比较常见，可以重点关注如何实现在获得焦点的同时实现文本全选中状态：

<div id="app">
    <button @click='focusEvent'>获取焦点且文本选中状态</button>
    <input type="text" id="test" value="Hello Vue!">
</div>

<script type="text/javascript">
    var app = new Vue({
        el: "#app",
        methods: {
            focusEvent: function () {
                var input = document.querySelector('#test')  //获取dom对象
                var value = input.value  //获取input的值
                input.focus()  //获得焦点
                input.setSelectionRange(0, value.length)  //设置选中全部文本
            }
        }
    })
</script>

因此，获取对象用的是focus()函数，选中全部文本用的是setSelectionRange(start,end)函数！