vue3：JS、TS关于doucument.querySelector()的基本使用

<script setup>
import { ref, onMounted } from "vue";
const myFunction = () => {
  document.querySelector(".demo").innerHTML = "Hello p标签!";
  // style可能点不出来，但不影响使用
  document.querySelector(".demo").style.backgroundColor = "#FFA500";
  document.querySelector(".demo").style.border = "solid 2px  pink";
  document.querySelector(".demo").style.height = "50px";
  document.querySelector("p").style.color = "yellow";
  document.querySelector("img").src =
    "https://ts1.cn.mm.bing.net/th/id/R-C.8abba3a692748bcc54d932105998522e?rik=ce7mfWMOzdbbSw&riu=http%3a%2f%2fseopic.699pic.com%2fphoto%2f50067%2f2496.jpg_wh1200.jpg&ehk=HIh4oU7uWOgzqCrPCBRYy4XVbeHBuzX%2b3ykx5CSQPG4%3d&risl=&pid=ImgRaw&r=0";

  document.querySelector("img").style.width = "200px";
  document.querySelector("img").style.height = "200px";
};
const ppfn = () => {
  document.querySelector("p").style.backgroundColor = "red";
  document.querySelector("p").style.color = "black";
};
</script>

<template>
  <p class="demo">p标签</p>
  <p>click update p标签内容</p>
  <img src="" alt="" />
  <button @click="myFunction">点我</button>
  <button @click="ppfn">点我</button>
</template>
<style scoped></style>

<script setup lang="ts">
import { ref } from "vue";

// 常用的类型有：HTMLInputElement、HTMLButtonElement、
// HTMLAnchorElement、HTMLImageElement、
// HTMLTextAreaElement、HTMLSelectElement
// 通过绑定ref，设置其属性
const eleRef = ref<null | HTMLElement>(null);
const pRef = ref<null | HTMLElement>(null);
const imgRef = ref<null | HTMLElement>(null);

const handleClick = () => {
  console.log("111111");
  if (eleRef.value) {
    eleRef.value.style.width="200px";
    eleRef.value.style.height="200px";
    eleRef.value.style.background="skyblue";
    eleRef.value.style.border="red 1px solid";
  }else{
    console.log("div no"); 
  }
  if (pRef.value) {
    pRef.value.style.color="red"
  }

  if (imgRef.value) {
    imgRef.value.style.width="100px"
    imgRef.value.style.height="100px"
  } else {
    console.log("no");
  }
};
</script>

<template>
  <div ref="eleRef" >
    <button @click="handleClick">click</button>
    <p ref="pRef">pppppp</p>
    <img ref="imgRef" alt="" src="https://img1.baidu.com/it/u=3605832793,3252065221&fm=253&fmt=auto&app=120&f=JPEG?w=800&h=1422"/>
  </div>
  </template>

<style scoped>
img{
  width: 200px;
  height: 200px;
}
</style>

小程序动态修改样式：TS
获取对象：
const notice = document.querySelector(".noticeBox") as HTMLElement
设置样式：
notice.style.display = "none"