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

最新推荐文章于 2024-07-07 16:54:40 发布

原创最新推荐文章于 2024-07-07 16:54:40 发布 · 368 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js

Vue 专栏收录该内容

9 篇文章

订阅专栏

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

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
        })这样设置属性便于给属性设置一些限制