Vue入门（二） 2022/1/9学习笔记

2023-10-08 15:26:52

连着出去玩了三天，只断断续续地学了一点。

课程：尚硅谷Vue技术

范围：8-13节

一、数据绑定

1.1 数据绑定

vue中有两种数据绑定的方式：

1.单向绑定（v-bind）：数据只能从data流向页面。

2.双向绑定（v-model）：数据不仅能从data流向页面，还可以从页面流向data。

备注：

1.双向绑定一般都应用在表单类元素上（如：input、select等）

2.v-bind:可简写为:

3.v-model：value可以简写为v-model，因为v-model默认收集的就是value值。

<!-- 普通写法 -->
<input type="text" v-bind:value="name"><br/>    //单向数据绑定
<input type="text" v-model:value="name"><br/>    //双向数据绑定

<!-- 简写 -->
<input type="text" :value="name"><br/>    //单向数据绑定
<input type="text" v-model="name"><br/>    //双向数据绑定

如下代码是错误的，因为v-model只能应用在表单类元素（输入类元素）上。

1.2 表单元素

前面提到，双向绑定一般都应用在表单类元素上，那么表单类元素是什么呢？

HTML 表单用于搜集不同类型的用户输入。

表单类元素：指的是不同类型的 input 元素、复选框、单选按钮、提交按钮等等。

二、el与data的两种写法

el与data的2种写法

1.el有2种写法

(1).new Vue时候配置el属性。

(2).先创建Vue实例，随后再通过vm.$mount('#root')指定el的值。

//el的两种写法
const v = new Vue({
	el:'#root', //第一种写法
	data:{
			name:'尚硅谷'
		 }
})

console.log(v)
	v.$mount('#root') //第二种写法 */

2.data有2种写法

(1).对象式

(2).函数式

如何选择：目前哪种写法都可以，以后学习到组件时，data必须使用函数式，否则会报错。

//data的两种写法

new Vue({
	el:'#root',
//data的第一种写法：对象式
	data:{
		name:'尚硅谷'
		 }

//data的第二种写法：函数式
	data(){
		console.log('@@@',this) //此处的this是Vue实例对象
		return{
			name:'尚硅谷'
			  }
		  }
})

3.一个重要的原则：

由Vue管理的函数，一定不要写箭头函数，一旦写了箭头函数，this就不再是Vue实例了。

三、MVVM模型

MVVM模型

1. M：模型(Model) ：data中的数据

2. V：视图(View) ：模板代码

3. VM：视图模型(ViewModel)：Vue实例

观察发现：

1.data中所有的属性，最后都出现在了vm身上。

2.vm身上所有的属性及 Vue原型上所有属性，在Vue模板中都可以直接使用。

四、数据代理

数据代理：通过一个对象代理对另一个对象中属性的操作（读/写）。

4.1 Object.defineProperty方法

Object.defineProperty()的作用就是直接在一个对象上定义一个新属性，或者修改一个已经存在的属性。

enumerable:true //控制属性是否可以枚举，默认值是false

writable:true //控制属性是否可以被修改，默认值是false

configurable:true //控制属性是否可以被删除，默认值是false

4.2 Vue中的数据代理

1.Vue中的数据代理：

通过vm对象来代理data对象中属性的操作（读/写）

2.Vue中数据代理的好处：

更加方便的操作data中的数据

3.基本原理：

通过Object.defineProperty()把data对象中所有属性添加到vm上。

为每一个添加到vm上的属性，都指定一个getter/setter。

在getter/setter内部去操作（读/写）data中对应的属性。

码农公寓