直接操作DOM元素

src/App.vue

@@ -1,11 +1,27 @@
-<script setup lang="ts"></script>
-
 <template>
-  <h1>You did it!</h1>
-  <p>
-    Visit <a href="https://vuejs.org/" target="_blank" rel="noopener">vuejs.org</a> to read the
-    documentation
-  </p>
+  <div>
+    <p>姓名：<input ref="name" /></p>
+    <button @click="showRef">提交</button>
+  </div>
 </template>
 
+<script setup lang="ts">
+import { ref } from 'vue';
+
+
+let name = ref()
+
+// 获取DOM元素，直接操作DOM
+function showRef(){
+  console.log(name)
+  console.log("=====================")
+  console.log(name.value)
+  console.log("=====================")
+  console.log(name.value.value)
+}
+
+
+</script>
+
+
 <style scoped></style>