方法一：用特殊字符ref操作DOM

  • 解决的问题: 在vue中操作DOM元素
    步骤:

    1. 给DOM元素设置ref属性的值
    2. 在Vue中的mounted选项下通过this.$refs.属性 获取到要操作的DOM

  • 通过在控制台输出 this.$refs.ref属性值可以查看到要操作的dom元素的标签
    【Vue基础】自动获取焦点功能-编程知识网

  • 通过如下代码可实现页面自动聚焦功能：

        <div id='app'><input type="text" ref='txt'></div><script>new Vue({el: "#app",data:{},mounted() {// console.log(this.$refs.txt)this.$refs.txt.focus();}})

方法二：自定义指令

  • 使用场景:需要对普通 DOM 元素进行操作，这时候就会用到自定义指令
  • 分类:全局注册和局部注册

1. 局部注册

  1. 在vm对象的选项中设置自定义指令 directives:{}
  2. directives:{
    指令的核心名称 :{
    inserted: function(使用指令时的DOM对象) {
    具体的DOM操作 } }}
  3. 在视图中通过标签去使用指令
//视图部分
<input v-focus type="text">
//实例部分new Vue({el: "#app",directives: {focus: {inserted: function(el) {el.focus();}}

2.全局注册

  1. 在创建 Vue 实例之前定义全局自定义指令Vue.directive()
  2. Vue.directive(‘指令的名称’,{ inserted: (使用指令的DOM对象) => { 具体的DOM操作 } } );
  3. 在视图中通过"v-自定义指令名"去使用指令
 Vue.directive('focus',{insert:(el)=>{el.focus();}});

注意：

Vue.directive(自定义指令名) 不需要加v- 使用自定义指令时需要加v-
inserted: 当被绑定的元素插入到 DOM 中时,会被调用

补充：
1. 可将之前的静态页面哪里中的添加商品输入框实现自动聚焦效果~