Vue的特殊特性（ref获得DOM）

最新推荐文章于 2024-06-26 10:05:35 发布

YY小怪兽

最新推荐文章于 2024-06-26 10:05:35 发布

阅读量150

点赞数

分类专栏： Vue2 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/lihui61357457/article/details/121739603

版权

Vue2 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

详情可见

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>71-Vue-特殊特性</title>
    <script src="js/vue.js"></script>
</head>
<body>
<!--
1.Vue特殊特性
Vue特点: 数据驱动界面更新, 无需操作DOM来更新界面
也就是说Vue不推荐我们直接操作DOM, 但是在企业开发中有时候我们确实需要拿到DOM操作DOM
那么如果不推荐使用原生的语法获取DOM, 我们应该如何获取DOM?
在Vue中如果想要拿到DOM元素我们可以通过ref来获取

2.ref使用
2.1在需要获取的元素上添加ref属性. 例如: <p ref="mypp">我是段落</>
2.2在使用的地方通过 this.$refs.xxx获取, 例如 this.$ref.myppp

3.ref特点
ref添加到元素DOM上, 拿到的就是元素DOM
ref添加到组件上, 拿到的就是组件
-->
<!--这里就是MVVM中的View-->
<div id="app">
    <button @click="myFn">我是按钮</button>
    <p ref="myppp">我是原生的DOM</p>
    <one id="myOne" ref="myOne"></one>
</div>
<template id="one">
    <div>
        <p>我是组件</p>
    </div>
</template>
<script>
    Vue.component("one", {
        template: "#one",
        data: function(){
            return {
                msg: "小灰灰"
            }
        },
        methods: {
            say(){
                console.log("say");
            }
        },
    });
    // 这里就是MVVM中的View Model
    let vue = new Vue({
        el: '#app',
        // 专门用于监听数据变化的
        watch: {
        },
        // 这里就是MVVM中的Model
        data: {
        },
        // 专门用于存储监听事件回调函数
        methods: {
            myFn(){
                // 注意点: 如果是通过原生的语法来获取元素, 无论是原生的元素还是自定义的组件, 拿到的都是原生的元素
                // 注意点: 并且VUE官方并不推荐我们这样获取
                // console.log(document.querySelector("p"));
                // console.log(document.querySelector("#myOne"));

                // 在Vue中如果想获取原生的元素或者获取自定义的组件, 可以通过ref来获取
                // 注意点: ref如果是添加给元素的元素, 那么拿到的就是元素的元素
                //         ref如果是添加给自定义的组件, 那么拿到的就是自定义的组件
                console.log(this.$refs);
                console.log(this.$refs.myppp);
                console.log(this.$refs.myOne);
                console.log(this.$refs.myOne.msg);
                console.log(this.$refs.myOne.say);
            }
        },
        // 专门用于定义计算属性的
        computed: {
        },
        // 专门用于定义局部组件的
        components: {
        }
    });
</script>
</body>
</html>

YY小怪兽

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue的特殊特性（ref获得DOM）

详情可见<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>71-Vue-特殊特性</title> <script src="js/vue.js"></script></head><body><!--1.Vue特殊特性Vue特点: 数据驱动界面更新, 无需操作D
复制链接

扫一扫

专栏目录