Vue3怎么操作dom

目录

1. 引言
2. Vue3中的DOM操作
   • 2.1 使用ref
   • 2.2 使用$refs
   • 2.3 使用v-bind和v-on
   • 2.4 使用v-model
   • 2.5 使用v-if和v-show
   • 2.6 使用v-for
   • 2.7 使用v-slot
   • 2.8 使用v-once
   • 2.9 使用v-pre
   • 2.10 使用v-cloak
3. Vue3中的生命周期钩子
   • 3.1 beforeCreate
   • 3.2 created
   • 3.3 beforeMount
   • 3.4 mounted
   • 3.5 beforeUpdate
   • 3.6 updated
   • 3.7 beforeUnmount
   • 3.8 unmounted
4. Vue3中的自定义指令
   • 4.1 全局自定义指令
   • 4.2 局部自定义指令
5. Vue3中的过渡和动画
   • 5.1 使用transition组件
   • 5.2 使用transition-group组件
   • 5.3 使用动画库
6. Vue3中的事件处理
   • 6.1 使用v-on
   • 6.2 使用事件修饰符
   • 6.3 使用按键修饰符
   • 6.4 使用系统修饰键
7. Vue3中的表单输入绑定
   • 7.1 使用v-model
   • 7.2 使用修饰符
   • 7.3 使用自定义组件
8. Vue3中的插槽
   • 8.1 默认插槽
   • 8.2 具名插槽
   • 8.3 作用域插槽
9. Vue3中的组件通信
   • 9.1 父子组件通信
   • 9.2 兄弟组件通信
   • 9.3 跨级组件通信
10. Vue3中的状态管理
    • 10.1 使用Vuex
    • 10.2 使用Composition API
11. Vue3中的路由管理
    • 11.1 使用Vue Router
    • 11.2 使用动态路由
    • 11.3 使用路由守卫
12. Vue3中的性能优化
    • 12.1 使用懒加载
    • 12.2 使用keep-alive
    • 12.3 使用虚拟DOM
13. Vue3中的测试
    • 13.1 使用Jest
    • 13.2 使用Vue Test Utils
14. Vue3中的国际化
    • 14.1 使用Vue I18n
    • 14.2 使用动态加载
15. Vue3中的安全性
    • 15.1 防止XSS攻击
    • 15.2 防止CSRF攻击
16. Vue3中的部署
    • 16.1 使用Docker
    • 16.2 使用CI/CD
17. Vue3中的最佳实践
    • 17.1 组件设计
    • 17.2 代码风格
    • 17.3 性能优化
18. 总结

引言

Vue.js 是一个流行的前端框架，它以其简洁的语法和强大的功能赢得了广泛的开发者喜爱。Vue3 是 Vue.js 的最新版本，带来了许多新特性和改进。本文将详细介绍如何在 Vue3 中操作 DOM，包括使用 ref、$refs、v-bind、v-on、v-model 等指令，以及生命周期钩子、自定义指令、过渡和动画、事件处理、表单输入绑定、插槽、组件通信、状态管理、路由管理、性能优化、测试、国际化、安全性、部署和最佳实践等方面的内容。

Vue3中的DOM操作

2.1 使用ref

在 Vue3 中，ref 是一个用于创建响应式引用的函数。它可以用于引用 DOM 元素或组件实例。

<template>
  <div ref="myDiv">Hello, Vue3!</div>
</template>

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

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

    onMounted(() => {
      console.log(myDiv.value); // 输出 <div>Hello, Vue3!</div>
    });

    return {
      myDiv,
    };
  },
};
</script>

2.2 使用$refs

在 Vue3 中，$refs 是一个对象，包含了所有通过 ref 属性注册的 DOM 元素或组件实例。

<template>
  <div ref="myDiv">Hello, Vue3!</div>
</template>

<script>
export default {
  mounted() {
    console.log(this.$refs.myDiv); // 输出 <div>Hello, Vue3!</div>
  },
};
</script>

2.3 使用v-bind和v-on

v-bind 用于动态绑定属性，v-on 用于监听事件。

<template>
  <div :class="myClass" @click="handleClick">Click me</div>
</template>

<script>
export default {
  data() {
    return {
      myClass: 'active',
    };
  },
  methods: {
    handleClick() {
      console.log('Clicked!');
    },
  },
};
</script>

2.4 使用v-model

v-model 用于在表单元素上创建双向数据绑定。

<template>
  <input v-model="message" />
  <p>{{ message }}</p>
</template>

<script>
export default {
  data() {
    return {
      message: '',
    };
  },
};
</script>

2.5 使用v-if和v-show

v-if 和 v-show 用于条件渲染。

<template>
  <div v-if="isVisible">Visible</div>
  <div v-show="isVisible">Also Visible</div>
</template>

<script>
export default {
  data() {
    return {
      isVisible: true,
    };
  },
};
</script>

2.6 使用v-for

v-for 用于列表渲染。

<template>
  <ul>
    <li v-for="item in items" :key="item.id">{{ item.name }}</li>
  </ul>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, name: 'Item 1' },
        { id: 2, name: 'Item 2' },
        { id: 3, name: 'Item 3' },
      ],
    };
  },
};
</script>

2.7 使用v-slot

v-slot 用于定义插槽内容。

<template>
  <my-component>
    <template v-slot:header>
      <h1>Header</h1>
    </template>
    <template v-slot:default>
      <p>Default content</p>
    </template>
  </my-component>
</template>

<script>
export default {
  components: {
    MyComponent,
  },
};
</script>

2.8 使用v-once

v-once 用于只渲染元素和组件一次。

<template>
  <div v-once>{{ message }}</div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello, Vue3!',
    };
  },
};
</script>

2.9 使用v-pre

v-pre 用于跳过元素和其子元素的编译过程。

<template>
  <div v-pre>{{ message }}</div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello, Vue3!',
    };
  },
};
</script>

2.10 使用v-cloak

v-cloak 用于在 Vue 实例编译完成之前隐藏未编译的 Mustache 标签。

<template>
  <div v-cloak>{{ message }}</div>
</template>

<style>
[v-cloak] {
  display: none;
}
</style>

<script>
export default {
  data() {
    return {
      message: 'Hello, Vue3!',
    };
  },
};
</script>

Vue3中的生命周期钩子

3.1 beforeCreate

beforeCreate 钩子在实例初始化之后，数据观测和事件配置之前被调用。

export default {
  beforeCreate() {
    console.log('beforeCreate');
  },
};

3.2 created

created 钩子在实例创建完成后被调用，此时数据观测和事件配置已完成。

export default {
  created() {
    console.log('created');
  },
};

3.3 beforeMount

beforeMount 钩子在挂载开始之前被调用，此时模板编译已完成。

export default {
  beforeMount() {
    console.log('beforeMount');
  },
};

3.4 mounted

mounted 钩子在挂载完成后被调用，此时 DOM 元素已插入到页面中。

export default {
  mounted() {
    console.log('mounted');
  },
};

3.5 beforeUpdate

beforeUpdate 钩子在数据更新之前被调用，此时 DOM 还未重新渲染。

export default {
  beforeUpdate() {
    console.log('beforeUpdate');
  },
};

3.6 updated

updated 钩子在数据更新之后被调用，此时 DOM 已重新渲染。

export default {
  updated() {
    console.log('updated');
  },
};

3.7 beforeUnmount

beforeUnmount 钩子在实例销毁之前被调用。

export default {
  beforeUnmount() {
    console.log('beforeUnmount');
  },
};

3.8 unmounted

unmounted 钩子在实例销毁之后被调用。

export default {
  unmounted() {
    console.log('unmounted');
  },
};

Vue3中的自定义指令

4.1 全局自定义指令

在 Vue3 中，可以使用 app.directive 方法注册全局自定义指令。

import { createApp } from 'vue';

const app = createApp({});

app.directive('focus', {
  mounted(el) {
    el.focus();
  },
});

app.mount('#app');

4.2 局部自定义指令

在 Vue3 中，可以在组件中定义局部自定义指令。

export default {
  directives: {
    focus: {
      mounted(el) {
        el.focus();
      },
    },
  },
};

Vue3中的过渡和动画

5.1 使用transition组件

transition 组件用于在元素插入、更新或移除时应用过渡效果。

<template>
  <transition name="fade">
    <div v-if="isVisible">Hello, Vue3!</div>
  </transition>
</template>

<script>
export default {
  data() {
    return {
      isVisible: true,
    };
  },
};
</script>

<style>
.fade-enter-active, .fade-leave-active {
  transition: opacity 0.5s;
}
.fade-enter, .fade-leave-to {
  opacity: 0;
}
</style>

5.2 使用transition-group组件

transition-group 组件用于在列表元素插入、更新或移除时应用过渡效果。

<template>
  <transition-group name="list" tag="ul">
    <li v-for="item in items" :key="item.id">{{ item.name }}</li>
  </transition-group>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, name: 'Item 1' },
        { id: 2, name: 'Item 2' },
        { id: 3, name: 'Item 3' },
      ],
    };
  },
};
</script>

<style>
.list-enter-active, .list-leave-active {
  transition: all 1s;
}
.list-enter, .list-leave-to {
  opacity: 0;
  transform: translateY(30px);
}
</style>

5.3 使用动画库

Vue3 支持使用第三方动画库，如 Animate.css。

<template>
  <transition
    enter-active-class="animate__animated animate__bounceIn"
    leave-active-class="animate__animated animate__bounceOut"
  >
    <div v-if="isVisible">Hello, Vue3!</div>
  </transition>
</template>

<script>
export default {
  data() {
    return {
      isVisible: true,
    };
  },
};
</script>

<style>
@import 'https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css';
</style>

Vue3中的事件处理

6.1 使用v-on

v-on 用于监听 DOM 事件。

<template>
  <button @click="handleClick">Click me</button>
</template>

<script>
export default {
  methods: {
    handleClick() {
      console.log('Clicked!');
    },
  },
};
</script>

6.2 使用事件修饰符

Vue3 提供了事件修饰符，如 .stop、.prevent、.capture、.self、.once 和 .passive。

<template>
  <button @click.stop="handleClick">Click me</button>
</template>

<script>
export default {
  methods: {
    handleClick() {
      console.log('Clicked!');
    },
  },
};
</script>

6.3 使用按键修饰符

Vue3 提供了按键修饰符，如 .enter、.tab、.delete、.esc、.space、.up、.down、.left 和 .right。

<template>
  <input @keyup.enter="handleEnter" />
</template>

<script>
export default {
  methods: {
    handleEnter() {
      console.log('Enter pressed!');
    },
  },
};
</script>

6.4 使用系统修饰键

Vue3 提供了系统修饰键，如 .ctrl、.alt、.shift 和 .meta。

<template>
  <button @click.ctrl="handleCtrlClick">Click me</button>
</template>

<script>
export default {
  methods: {
    handleCtrlClick() {
      console.log('Ctrl + Click!');
    },
  },
};
</script>

Vue3中的表单输入绑定

7.1 使用v-model

v-model 用于在表单元素上创建双向数据绑定。

<template>
  <input v-model="message" />
  <p>{{ message }}</p>
</template>

<script>
export default {
  data() {
    return {
      message: '',
    };
  },
};
</script>

7.2 使用修饰符

Vue3 提供了 v-model 修饰符，如 .lazy、.number 和 .trim。

<template>
  <input v-model.lazy="message" />
  <p>{{ message }}</p>
</template>

<script>
export default {
  data() {
    return {
      message: '',
    };
  },
};
</script>

7.3 使用自定义组件

在自定义组件中使用 v-model 时，可以通过 modelValue 和 update:modelValue 实现双向绑定。

<template>
  <custom-input v-model="message" />
  <p>{{ message }}</p>
</template>

<script>
export default {
  components: {
    CustomInput,
  },
  data() {
    return {
      message: '',
    };
  },
};
</script>

Vue3中的插槽

8.1 默认插槽

默认插槽用于在组件中插入内容。