【Vue】深入了解 Vue 的 DOM 操作：从基本渲染到高级操作的全面指南

<template>
  <div id="app">
    <h1 v-if="message">Hello App!</h1>
    <p v-else>{{ message }}</p>
    <ul>
      <li v-for="item in items" :key="item.id">{{ item.text }}</li>
    </ul>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      message: null,
      items: [
        { id: 1, text: 'Learn JavaScript' },
        { id: 2, text: 'Learn Vue' },
        { id: 3, text: 'Build something awesome' }
      ]
    }
  },
  mounted() {
    // DOM 操作示例：在这里可以进行DOM操作
    // 比如，我们可以在这里通过 this.$el 访问到 div#app 元素
    console.log(this.$el);
  }
}
</script>

这个 Vue 示例代码展示了基本的数据绑定、条件渲染、列表渲染以及在 mounted 钩子中的 DOM 操作。这些是 Vue 开发中常用的操作，对于了解如何在 Vue 应用中操作 DOM 是很有帮助的。