Vue的数据绑定与生命周期

最新推荐文章于 2023-01-06 16:40:56 发布

Gbing1228

最新推荐文章于 2023-01-06 16:40:56 发布

阅读量3k

点赞数

CC 4.0 BY-SA版权

分类专栏： Vue

本文链接：https://blog.youkuaiyun.com/Gbing1228/article/details/90611146

Vue 专栏收录该内容

13 篇文章

订阅专栏

博客介绍了Vue的数据绑定和生命周期钩子。数据绑定通过v-model指令，其值对应Vue实例data选项中的元素字段，双向绑定后修改一方另一方也会改变。生命周期钩子包括created、mounted和beforeDestroy，分别在实例创建完成、el挂载后和实例销毁前调用。

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

数据绑定：

v-model的指令的值对应创建Vue实例中的data选项中的元素字段，
在data选项中可以声明应用内需要双向绑定的数据。

只要建立双向绑定，修改其中任何一个，另一个也会一起变化。

var MyData={
    a:1
}
var app=new Vue({
    el；APP，
    data:MyData
})

console.log(a)//1

//修改属性，原数据也会修改
app.a=2;
console.log(MyData.a);//2

//修改原数据，属性中的值也会修改
MyData.a=3;
console.log(app.a)//3

生命周期钩子：

created：实例创建完成功能后调用，$el还不能用；

mounted：el挂载到实例后调用，业务逻辑就此开始；

beforeDestroy：实例销毁之前调用，主要解绑一些使用的addEventListener监听事件；