VIP30/v3_project/11_ref获取元素/App.vue

<template>
  <h2>ref获取元素</h2>
  <input type="text" ref="inputRef">
  <!-- <input type="text"> -->
</template>

<script lang="ts">
import { defineComponent,onMounted,ref } from 'vue'

export default defineComponent({
  //需求： 当页面加载完毕的之后 页面中的文本框可以直接获取焦点(自动获取焦点)
  setup () {
    //默认是空的 页面加载完毕说明组件已经存在 获取文本元素
    const inputRef = ref<HTMLElement | null>(null)
    //页面加载之后的API
    onMounted(()=>{
      inputRef.value && inputRef.value.focus() //自动获取焦点
    })
    return {
      inputRef
    }
  }
})
</script>

<style scoped>

</style>