Vue中，获取Dom节点的3种方式

Vue本来无需操作DOM来更新界面，而且Vue也不推荐我们直接操作DOM，但是我们非要拿到DOM操作DOM怎么办，那也是有方法的，而且不止一种方法方式一：（事件源）<body><div id="aa"><input type="button" value="点击" v-on:click='fun'/></div><script>new V

萝卜头888

8323人浏览 · 2021-10-29 14:56:28

萝卜头888 · 2021-10-29 14:56:28 发布

Vue本来无需操作DOM来更新界面，而且Vue也不推荐我们直接操作DOM，但是我们非要拿到DOM操作DOM怎么办，那也是有方法的，而且不止一种方法

方式一：（事件源）

<body>
    <div id="aa">
        <input type="button" value="点击" v-on:click='fun'/>
    </div>
    <script>
        new Vue({
            el:'#aa',
            methods:{
                fun:function(event){
                    console.log(event.target);
                }
            }
        })
    </script>
</body>

输出结果

当然也可以在方法中传参进去：

<body>
    <div id="aa">
        <input type="button" value="点击" v-on:click='fun($event.target)'/>
    </div>
    <script>
        new Vue({
            el:'#aa',
            methods:{
                fun(x){
                    console.log(x);
                }
            }
        })
    </script>
</body>

方式二：（使用ref）

<body>
    <div id="aa">
        <input ref='name' type="button" value="点击" v-on:click='fun'/>
    </div>
    <script>
        new Vue({
            el:'#aa',
            methods:{
                fun(){
                    console.log(this.$refs.name);
                }
            }
        })
    </script>
</body>

输出结果：

方式三：（自定义全局指令）
<body>
    <div id="aa">
        <input type="button" value="点击" v-get/>
    </div>
    <script>
        
        Vue.directive("get",{
            bind:function(el){
                console.log(el);
            }
        })
        new Vue({
            el:'#aa'
        })
    </script>
</body>
这里不用点击，就可以获取元素，好像在谷歌显示不友好，

在火狐显示会好点