笔记大全

Vue3怎么操作dom 四种方式介绍

更新时间：2023-10-12

Vue3操作DOM四种方式介绍

Vue3是当前比较火热的前端框架之一，其支持四种方式操作DOM：模板语法、JSX语法、带类型的模板语法、手动创建和更新节点。下面将详细介绍这四种方式并给出相应的代码示例。

1. 模板语法

模板语法是Vue3提供的一种简单方便的操作DOM的方式，它可以与普通的HTML标记结合，实现数据绑定和事件绑定。下面是一个使用模板语法的例子：

  
    <template>
     <div>
       {{ msg }}
       <button @click="handleClick">Click Me</button>
     </div>
    </template>

    <script>
     export default {
      data() {
       return {
         msg: 'Hello, Vue3!'
       };
      },
      methods: {
       handleClick() {
         alert('Hello, Vue3!');
       }
      }
     };
    </script>

在上述代码中，我们通过双括号{{ msg }}实现了数据绑定，并通过@click事件绑定了一个方法。这种方式是Vue3的主要方式之一，可以与大部分HTML标记结合实现强大的操作DOM的功能。

2. JSX语法

JSX语法是一种融合了HTML标记和JavaScript语法的编写方式，在Vue3的实现中，它可以方便地操作DOM。下面是一个使用JSX语法的例子：

  
    <template>
     <div>
       <MyButton :label="btnText" @onClick="handleClick" />
     </div>
    </template>

    <script>
     export default {
      data() {
       return {
         btnText: 'Click Me'
       };
      },
      methods: {
       handleClick() {
         alert('Hello, Vue3!');
       }
      }
     };
    </script>

    <script setup>
     import { defineComponent } from 'vue';
     import MyButton from './MyButton';

     const App = defineComponent({
      components: { MyButton },
      setup() {
       return {
         btnText: 'Click Me',
         handleClick: () => alert('Hello, Vue3!')
       };
      }
     });

     export default App;
    </script>

在上述代码中，我们定义了一个组件MyButton，然后在组件中使用v-bind和v-on绑定属性和事件。在setup方法中，我们import了组件并返回了需要的属性和方法。

3. 带类型的模板语法

带类型的模板语法是Vue3提供的另一种操作DOM的方式，它可以配合TypeScript使用。下面是一个使用带类型的模板语法的例子：

  
    <template>
     <div>
       {{ msg }}
       <button @click="handleClick">Click Me</button>
     </div>
    </template>

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

     interface Props {
      msg: string;
     }

     export default defineComponent({
      props: {
       msg: {
         type: String,
         required: true
       }
      },
      setup(props: Props) {
       const count = ref(0);
       const handleClick = () => {
         count.value++;
         console.log(`Clicked ${count.value} times!`);
       };

       return {
         count,
         handleClick
       };
      }
     });
    </script>

在上述代码中，我们定义了一个Props接口，用于限定接收参数类型。然后我们使用defineComponent方法创建组件，并在setup方法中使用ref定义响应式数据。通过这种方式，我们可以使用TypeScript完成操作DOM的过程，并得到强类型检查的支持。

4. 手动创建和更新节点

手动创建和更新节点是Vue3提供的另一种操作DOM的方式，它可以让我们直接操作原生DOM元素。下面是一个使用手动创建和更新节点的例子：

  
    <template>
     <div>
       <div ref="box"></div>
     </div>
    </template>

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

     export default {
      setup() {
       const box = ref(null);

       onMounted(() => {
         const newEl = document.createElement('p');
         newEl.innerHTML = 'Hello, Vue3!';

         box.value.appendChild(newEl);
       });

       return {
         box
       };
      }
     };
    </script>

在上述代码中，我们使用ref获取了HTML元素，然后通过onMounted方法在组件载入时手动创建并更新了DOM节点，实现了手动操作DOM的目的。

以上就是Vue3操作DOM的主要方式介绍，我们可以根据特定的需求选用不同的方式实现操作DOM的目的。

c语言编程笔录