vue-----------ref和$refs的使用-----示例mounted钩子函数

ref相当于元素的标识,它是一个唯一值,类似id值
$refs可以用来获取拥有ref设置的元素,它是一个对象

示例需求:加载页面完成时自动获取表单光标
生命周期的钩子函数:满足条件自动触发的函数
mounted的钩子函数:当触发时,说明已经编译完毕,将要进行渲染

.<template>
  <div>用户名:<input type="text" ref="myid" /></div>
</template>
<script>
export default {
    
    
  // mounted的钩子函数:当触发时,说明已经编译完毕,将要进行渲染
  mounted() {
    
    
    //this.$refs:从单文件中获取所有拥有ref的元素,它是一个对象
    this.$refs.myid.focus();
  },
};
</script>

<style>
</style>

效果

总结:

可以通过ref这个值引用

上面的代码有一个不足就是固定为某个元素添加效果,不方便后期需求的变化
如果希望这些类似的功能时按需添加的,自定义指令就是用来完成这种场合的
vue--------自定义属性的使用--------局部/全局封装