Vue基础之属性的两种写法

MoshMode

于 2021-07-13 22:33:38 发布

阅读量354

点赞数

CC 4.0 BY-SA版权

分类专栏： Vue浅谈文章标签： vue

本文链接：https://blog.youkuaiyun.com/MoshMode/article/details/118712789

7 篇文章

订阅专栏

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

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

el属性：

创建时挂载：

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

创建后挂载：

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

对象式：

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'
			}
		}
    });