通过Vue的ref操作DOM

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


<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节点了

通过Vue的ref操作DOM_第1张图片

你可能感兴趣的:(前端开发)