Vue中ref的使用

最新推荐文章于 2025-04-01 08:15:00 发布

原创最新推荐文章于 2025-04-01 08:15:00 发布 · 972 阅读

0 ·

CC 4.0 BY-SA版权

Vue 专栏收录该内容

14 篇文章

订阅专栏

博客对比了jq和Vue操作dom的方式。jq时代主要学习选择器以获取节点查找dom来展示处理数据，Vue则是数据驱动dom，但也提供ref属性获取dom节点。不过在项目开发中，应尽量避免使用ref，因其违背mvvm设计原则。

在jq时代，我们首要任务就是学习选择的使用，因为选择可以极其方便帮助我们获取节点查找dom，因为我们要通过dom展示处理数据。而在Vue中，我们的编程理念发生了变化，变为了数据驱动dom；但有时我们因为某些情况不得不脱离数据操作dom,因此vue为我们提供了 ref 属性获取dom节点；

<body>
    <div id="app">
        <input type="button" value="按钮" @click="get">
        <p ref="ps">211113131</p>
    </div>
</body>
   <script>
        var app=new Vue({
            el:"#app",
            methods: {
                //用来获取具有ref属性的节点对象
                get:function(){
                    alert(this.$refs.ps.innerHTML);
                }
            },
        });
   </script>

但是在项目开发中，尽可能不要使用ref，因为从一定程度上，ref 违背的mvvm设计原则；