vue2-day1

建立一个鼠标移动显示鼠标坐标

代码：

<template>
  <div>
   当前鼠标位置
  </div>
  <div>x:{{ mouse.x }}</div>
  <div>y:{{ mouse.y }}</div>
</template>

<script>
  import { onMounted,reactive,onUnmounted,ref } from 'vue';

  function useCount(){
    const count = ref(0);
    const add = () =>{
      count.value++
    }
    return{add,count}
  }

  function useMouse(){
    const mouse= reactive({
      x:0,
      y:0
    })
    const move =(e) => {
      mouse.x = e.pageX
      mouse.y = e.pageY
    }
    onMounted(()=>{
      document.addEventListener('mousemove',move)
    })
    onUnmounted(()=>{
      document.removeEventListener('mousemove',move)
    })
    return mouse
  }
  export default{
    setup(){const {count,add} = useCount()
  const mouse = useMouse()
  return {count,add,mouse}}
  }
  
</script>

 二、监听器——watch

watch([如果是数字就用[]，不是就不用]，newValue)
{
  console.log(newValue)  
}