vue对象中的实例属性

最新推荐文章于 2024-04-23 09:40:10 发布

妙先森

最新推荐文章于 2024-04-23 09:40:10 发布

阅读量1.1k

点赞数

分类专栏： vue学习笔记文章标签： vue

本文链接：https://blog.csdn.net/weixin_43919497/article/details/116309823

版权

vue学习笔记专栏收录该内容

31 篇文章 2 订阅

订阅专栏

Vue的实例属性

直接通过vue对象.属性，访问的是来自data或computed的属性。但在vue对象中el、data等等这些键也称为属性，这些属性就是vue的实例属性。

在这里插入图片描述

ref的使用

在vue里，往往使用ref来代替id的使用。可快速通过ref的值来获得页面中的某个元素。

<body>

    <div id="app1">
        
    </div>

    <div id="app2">
        <button type="button" @click="showVueObject()">点我</button>
        <button type="button" ref="btn02" @click="changeBtnValue()" >改变自己</button>
    </div>

</body>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
<script>

    var vue1 = new Vue({
        el: "#app1",
        
    });

    var vue2 = new Vue({
        el:'#app2',
        methods:{
            showVueObject:function(){
                console.log(vue1);
            },
            changeBtnValue:function(){
                this.$refs.btn02.innerHTML = "向前走，别回头";
            }
        }
    })

</script>

mount的使用

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

<script>

    var vue1 = new Vue({
        //el: "#app1",
        template:"<h1>hello</h1>"
    });

    vue1.$mount("#app1");

</script>

妙先森

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
1
评论
vue对象中的实例属性

Vue的实例属性直接通过vue对象.属性，访问的是来自data或computed的属性。但在vue对象中el、data等等这些键也称为属性，这些属性就是vue的实例属性。ref的使用在vue里，往往使用ref来代替id的使用。可快速通过ref的值来获得页面中的某个元素。<body> <div id="app1"> </div> <div id="app2"> <button type
复制链接

扫一扫