前端学习-vue学习008-生命周期和模板引用

官方教程链接

ref标签（模板引用）

手动操作 DOM，使用模板引用，就是指向模板中一个 DOM 元素的 ref

<p ref="pElementRef">hello</p>

要访问该引用，我们需要声明一个同名的 ref：

const pElementRef = ref(null)

生命周期

详见前端学习-vue视频学习010-生命周期

<template>
  <!-- html -->
  <div class="app">
      <Todo/>
      <p ref="pElementRef">hello</p>
  </div>
</template>

<script lang="ts" setup>
  import Todo from './components/Todo.vue';
  import { ref,onMounted } from 'vue';

  const pElementRef = ref()

  onMounted(() => {
    pElementRef.value.textContent = 'bye'
  })
  
</script>

<style>

</style>