[Vue] 第1361天 在vue3中如何操作DOM？ |
您所在的位置：网站首页 › vue如何操作虚拟dom › [Vue] 第1361天 在vue3中如何操作DOM？ |
|
在Vue 3中，操作DOM的方式与Vue 2有所不同。Vue 3使用了新的API——Composition API，它提供了一些新的函数和钩子，可以更方便地操作DOM。 下面是一些在Vue 3中操作DOM的方法： 1. refref 是一个新的函数，用于在模板中引用DOM元素或组件实例。在组件中使用 ref 时，它会返回一个响应式的对象，该对象包含了DOM元素或组件实例。可以通过该对象来访问DOM元素或组件实例的属性和方法。 Click me import { ref } from 'vue'; export default { setup() { const myButton = ref(null); function handleClick() { myButton.value.innerText = 'Button clicked'; } return { myButton, handleClick, }; }, }; 复制代码在上面的代码中，使用 ref 函数来引用按钮元素，并在 setup 函数中定义了一个 handleClick 函数，当按钮被点击时，它会将按钮的文本内容修改为 'Button clicked'。 2. reactivereactive 是一个新的函数，用于创建响应式的对象。可以使用 reactive 函数来创建一个包含DOM元素属性的响应式对象，然后在组件中使用该对象来操作DOM元素。 {{ myInput.value }} import { reactive } from 'vue'; export default { setup() { const myInput = reactive({ value: '', }); return { myInput, }; }, }; 复制代码在上面的代码中，使用 reactive 函数来创建一个包含 value 属性的响应式对象 myInput，然后在模板中使用 v-model 指令来绑定输入框的值，并在模板中使用 myInput.value 来显示输入框的值。 3. onMountedonMounted 是一个新的钩子函数，用于在组件挂载后执行一些操作。可以使用 onMounted 函数来操作DOM元素，例如添加事件监听器、修改DOM元素的样式等。 Click me import { ref, onMounted } from 'vue'; export default { setup() { const myButton = ref(null); onMounted(() => { myButton.value.addEventListener('click', () => { console.log('Button clicked'); }); }); return { myButton, }; }, }; 复制代码在上面的代码中，使用 ref 函数来引用按钮元素，并在 onMounted 钩子函数中添加了一个点击事件监听器，当按钮被点击时，它会在控制台中输出 'Button clicked'。 总结在Vue 3中，可以使用 ref、reactive 和 onMounted 等新的函数和钩子来操作DOM元素。这些新的API使得操作DOM更加方便和灵活。 更多题目github.com/haizlin/fe-… |
今日新闻 |
推荐新闻 |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |