通过Vue的ref操作DOM

Vue的诞生原因之一就是为了解决原生Dom操作和jQuery操作Dom所带来的渲染卡慢问题,这里通过vue里的ref属性就可以拿到Dom节点并减少Dom节点的消耗。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<script type="text/javascript" src="vue.js"></script>
<body>

<div id="app" ref="test" style="height: 100px;width:200px;background: green;"  @click="shit">哈哈</div>
<script type="text/javascript">
    let vm = new Vue({
        el:"#app",
        methods:{
            shit:function(){
                alert(this.$refs.test);
                console.log(this.$refs.test);
            }
        }
    })
</script>
</body>
</html>

结果如下:拿到dom节点了

这里写图片描述

猜你喜欢

转载自blog.csdn.net/yexudengzhidao/article/details/79067976