Vue 教程

数据代理

定义

一个对象代理另外一个对象，通过该对象实现对另外一个对象的操作，核心方法 defineProperty。

代码

obj2 代理 obj1
Object.defineProperty(obj2, 属性值, { get 与 set 方法})

属性

• ​obj2 是指中介对象，通过该对象实现对另外一个对象的操作。
• ​属性 是指新增的属性，通过对该属性的读取或赋值可以改变另外一个对象中属性的值。
• ​get 是指当读取的时候该方法执行。
• ​set 是指当赋值的时候该方法执行。

核心

利用 get or set两个方法书写其他内容实现代理另外一个对象。

Vue 中的数据代理

定义

通过Vue创建的实例对象 vm​ 来代理vm​ 对象中的某个属性对象 data​，
即所有 data​ 对象中的额属性会全部出现在 vm​ 身上，通过操作他们就可以操作 data 中的属性。

MVVM 模型

解释

• Model 模型，代表数据，在 Vue 中是指 vm.data。
• View 视图，代表展示的界面，是指 Vue 的模板，指的 HTML 代码所组成的模板，别名容器。
• View Model，视图模型，是指 vm 实例。

绑定容器（模板）

步骤

• 第一，给模板 HTML 代码指定一个 ID。
• 第二，vm 中 用过 el 属性绑定该模板。

data（Model）

• data 是 vm 中的一个属性，其值可以是一个对象，也可以是一个函数，后者函数使用广泛，其本质是一个函数返回了一个对象。
• data 中的属性模板中可以直接使用。

模板语法

定义

模板语法是指书写在 HTML​中的 Vue代码。

分类

• 插值语法：{{xxxxx}}​，解析的是标签体中的内容，比如 <div>这里是标签体的内容</div> ，要求里面是 JS 表达式。

  JS 表达式：能够产生值的即是，比如函数返回值、三目表达式、运算符
  JS 语句：用分号隔开的，比如 if for 语句

• 指令语法：解析的是标签的内容，一般用来绑定属性和事件，语法是 v-bind:属性名​简写是 :属性名

数据绑定

定义

数据绑定是指的是模板语法中指令语法的用法，通过绑定数据 vm.data，
来实现模板中数据的渲染，主要分为两种数据绑定法：单向数据绑定和双向数据绑定。

分类

• 单向数据绑定用的指令是 v-bind。
• 双向数据绑定用的指令是 v-model，只能用在表单元素上。

计算属性

定义

定义在 vm.computed​里面的属性，本质还是一个代返回值的函数，
通过 get、set​函数，分别代表当读取时、当设置值时所做的操作，在里面定义操作已有属性 data中的来得到新的值，即计算属性。

特点

计算属性的具有缓存，效率高的优点。

写法

计算属性的写法，最后一种简写是指只有get方法可以省略。

{
...
computed:{
	计算属性:{
		get(){},
		set(){}
	}
 }
}

简写
{
...
computed:{
	计算属性:{
		return XXXXXX;
	}
 }
...
}

监视属性

定义

监视属性是指 vm.watch​中定义的属性，本质还是函数，监视的是已经定义好的属性 data中​，当属性发生改变的时候可以进行一些操作 handler。

写法

{
...
watch:{

	要监视的属性名:{

	}
 }
}

特殊属性

• ​immediate:true or false 表示是否在初始化时调用一次下方处理函数。
• ​hander(新值,旧值)，当监视的属性发生改变时执行的动作。
• ​deep:，是否开启深度监视，特指的是是否能监视对象中的属性，默认对象中的属性变化是无法监测到的。

‍