06-vue3的ref属性

1.vue2中获取ref

1.vue2.0获取单个ref
    1.通过ref属性绑定该元素
    2.通过this.$refs.box获取元素

2.vue2.0 获取v-for遍历的多个元素
	1.通过ref属性绑定被遍历的元素
	2.通过this.$ref.li获取所有的遍历元素

2.vue3中获取ref

1.vue3.0获取单个ref
 想要绑定ref属性,
  1.1 先定义一个空的响应式数据,ref定义的
  1.2 setup中返回该数据,你想获取那个dom元素,在该元素上使用ref属性绑定该数据即可
  
2.获取v-for遍历的元素
  2.1定义一个空数组,接收所有的li
  2.2 定义一个函数,往空数组push DoM

<template>
<div>
 <div ref="box">我是box盒子</div>
 <ul>
   <li v-for="i in 4" :key="i" :ref="setdom" >我是第{{i}}个元素</li>
 </ul>
  </div>
</template>
<script setup>
  import {ref,onMounted} from "vue"
  //1.先定义一个空的响应式数据,ref定义的
  //2.setup中返回该数据,你想获取那个dom元素,在该元素上使用ref属性绑定该数据即可
  const box=ref(null);
  
  onMounted(()=>{
     box.value.style.width="200px";
     box.value.style.height="200px";
     box.value.style.background="pink";
    //console.log(box)
  })

  //2.获取v-for遍历的元素
  //2.1定义一个空数组,接收所有的li
  //2.2 定义一个函数,往空数组push DoM

   const domList=[]
   const setdom=(el)=>{
     //console.log(el);
     domList.push(el);
   }
   console.log(domList);
   onMounted(()=>{
     domList.forEach(el=>el.style.color="red")
   })
 
</script>

总结:
1.单个元素:先声明ref响应式数据,返回给魔板使用,通过ref绑定数据
2.遍历的元素,先定义一个空数组,定一个函数获取元素,返回给模板使用,通过ref绑定这个函数

3.实现获取页面坐标的demo

<template>
    <div>
      <p>获取当前鼠标坐标x:{{mousePoint.x}}</p>
      <p>获取当前鼠标坐标y:{{mousePoint.y}}</p>
    </div>
</template>  

<script setup>
  import {ref,onMounted,reactive,onUnmounted} from "vue"
   //记录鼠标坐标
const mousePoint=reactive({
  x:0,
  y:0
})
//修改响应式数据
const move=(e)=>{
  mousePoint.x=e.pageX;
  mousePoint.y=e.pageY;
}
//dom渲染完毕监听事件
onMounted(()=>{
  document.addEventListener('mousemove',move)
})
//组件卸载删除事件
onUnmounted(() => {
  document.removeEventListener("mousemove",move)
})
  
</script>  

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-MJeahFYi-1681264619275)(/uploads/vue3/images/m_6769d1d69cde508bd1ca07ca9a3dfe63_r.png)]