【vue学习】vue对象的操作

最新推荐文章于 2025-05-20 18:28:23 发布

Swingzzz

最新推荐文章于 2025-05-20 18:28:23 发布

阅读量1.2k

点赞数

分类专栏： Vue学习文章标签： vue js javascript

本文链接：https://blog.youkuaiyun.com/weixin_41908867/article/details/108886560

版权

Vue学习专栏收录该内容

14 篇文章

订阅专栏

本文探讨了如何在一个Vue对象中操作另一个Vue对象，包括修改属性和调用方法。同时，介绍了Vue实例的重要属性，如el、data，并提到了ref和mount在Vue对象动态绑定中的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

【Vue学习】vue对象的操作

1.可以通过一个Vue对象操作另一个Vue对象

<body>
    <div id="app1">
        {{title}}
        <input type="button" @click="toUpCase" value="toUpCase"/>
        {{toLowCase}} 
    </div>
    <div id="app2">
        <input type="button" @click="changeV1Title" value="changeV1Title">
    </div>
    
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

    <script>
        var v1 = new Vue({
            el:"#app1",
            data:{
                title:"hello vue!"
            },
            methods:{
                toUpCase:function(){
                    this.title = this.title.toUpperCase();
                }
            },
            computed:{
                toLowCase:function(){
                    return this.title.toLowerCase();
                }
            }
        });
        var v2 = new Vue({
            el:"#app2",
            methods:{
                changeV1Title:function(){
                    v1.title = "Hello Java"
                }
            }
        })
    </script>
</body>

2.Vue对象操作另一个Vue对象的内容，维度有两个，操作属性、操作方法

这些属性，是data或者computed里定义的

3.Vue的实例属性

Vue对象中的el、data等等的这些键也成为属性，这些属性就是Vue对象的实例属性！

ref的使用：

在vue里面，往往使用ref属性来代替id属性的使用。

<button type="button" ref="mybtn" @click="show" />
this.$refs.mybtn.innerHTML = "hello"

mount的使用：
- 实现了页面元素和vue对象的动态绑定，之前都是通过el的方式绑定，也可以通过mount实例属性进行绑定。

<body>
    <div id="app1"> 
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var v1 = new Vue({
            //这里没有用el绑定
            template:"<h1>hello</h1>"
        })
        //script执行到此处进行动态绑定
        v1.$mount("#app1");
    </script>
</body>