Vue学习记录——数据绑定、el和data两种写法、MVVM模型

本文记录Vue学习过程中的核心概念,包括容器与实例的关系、数据绑定的单向和双向绑定原理,重点讲解v-bind和v-model的使用场景。v-model通常用于表单元素,实现视图与模型的双向同步。同时,提到了Vue实例的挂载选项el以及data对象的定义方式,并强调了避免使用箭头函数以保持正确的this指向。最后,探讨了MVVM模型以及Object.defineProperty方法在数据响应性中的作用。

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

Vue学习记录

容器和实例是一一对应的关系

数据绑定

v-bind和v-model
v-bind是单向绑定 不能通过界面修改数据
v-model是双向绑定 可以通过界面修改数据
v-model的使用是有范围的,只能应用在表单类元素类(input、select)
v-model:value可以简写为 v-model 因为v-model默认收集的就是value的

el和data两种写法

el:(两种都可以用)
第一种写法:el:‘#root’
第二种写法:v.$mount(‘#root’)
data

第一种写法:
data:{
name:'Mary'
}
第二种写法:(只能用这种)
data:funcion(){
return{
name:'Mary'
}
}
可以简写为
data(){
return{
name:'Mary'
}
}

注意由Vue管理的函数 一定不能写成箭头函数 否则this就不再是Vue实例了

MVVM模型

在这里插入图片描述
在这里插入图片描述

Object.defineProperty方法

		 	Object.defineProperty(person,'age',{
            value:18,
            enumerable:true,//控制属性是否可以被枚举 默认是false
            writable:true,//控制属性是否可以被修改,默认是false
            configurable:true,//控制属性是否可以被删除,默认是false
        })这样设置属性便于给属性设置一些限制

在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值