Vue基础之属性的两种写法

本文详细介绍了Vue中data属性的两种声明方法——对象式和函数式,并通过实例解析了它们的区别。对象式直接定义数据,而函数式确保每个实例的数据独立。需要注意的是,当使用箭头函数声明data时,this将指向全局对象而非Vue实例,可能导致错误。

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

Vue基础之属性的两种写法

el属性:

创建时挂载:

var vm = new Vue({
        el: "#app",
        data: {
            message: "hello,world!"
        }
    });

创建后挂载:

var vm = new Vue({
        //el: "#app",
        data: {
            message: "hello,world!"
        }
    });
vm.$mount('#app');

data属性:

对象式:

var vm = new Vue({
        el: "#app",
        data: {
            message: "hello,world!"
        }
    });

函数式:
this为vm:

var vm = new Vue({
        el: "#app",
        data: function(){
			return{
				message:'hello,world'
			}
		}
    });

this为vm(简写):

var vm = new Vue({
        el: "#app",
        data(){
			return{
				message:'hello,world'
			}
		}
    });

this为window(会有错误):

var vm = new Vue({
        el: "#app",
        data: ()=>{
			return{
				message:'hello,world'
			}
		}
    });
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值