vue---vue中如何操作dom获取节点？.vue组件中通过mounted获取节点操作

原创于 2017-09-02 10:30:18 发布 · 5.3w 阅读

15 ·

CC 4.0 BY-SA版权

文章标签：

#canvas #vue #mounted #节点 #refs

vue 专栏收录该内容

16 篇文章

订阅专栏

本文介绍了在Vue框架中通过两种不同方式获取Canvas元素的方法：一是使用选择器在mounted生命周期钩子中获取；二是利用ref属性直接访问DOM节点。文章强调了在Vue中DOM操作应当在mounted钩子之后进行。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

选择器获取

<template>
    <div>
        <canvas id='cvs' >
    </div>
</template>
<script>
    export default{
        mounted(){
            let canvas=document.querySelector('#cvs');
        }
    }
</script>

ref获取

<template>
    <div>
        <canvas ref='cvs' >
    </div>
</template>
<script>
    export default{
        mounted(){
            let canvas=this.$refs.cvs;
        }
    }
</script>

//vue中，在mounted之后的钩子 函数中才能进行dom操作，mounted完成dom挂载