Vue 学习总结笔记 (一)

---

• 第一种是直接定义el来指定容器。

• 第二种是$mount()方法来实现来指定容器，mount意思就是挂载。

{{name}}

6.3 data 两种写法方式

---

---

• 第一种：对象式。

• 第二种：函数式。

注意函数式，非常重要，组件必须用到函数式，此外，data函数可以简化，并且这里不能使用箭头函数，因为这里的this指向必须是Vue实例对象。

在解释一下，箭头函数本身是没有this的，因此它就会向上一层查找！

{{name}}

7. MVVM的架构图

=========================================================================

---

一般我们后台代码有mvc分层架构，前端代码也是有mvc或mvvm分层架构的。

而在vue中，我们使用mvvm的分层架构。

DOM Listeners ：模块监听。

Data Bindings ： 数据绑定。

这俩个都是很重要的存在记住!

注意：

**1. data中所有的属性，最后都出现在了vm实例对象上面。

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

见源码：**

学校名称：{{name}}

学校地址：{{address}}

1+1 为什么等于 {{1+1}} ?

测试Vue的$options，{{$options}}

测试Vue原型$emit,{{$emit}}

测试没有$开头的 _c，{{_c}}

8. 数据代理 Object.defineProperty方法

=============================================================================================

8.1 Object.defineProperty方法 介绍

---

---

Object.defineProperty方法很重要，Vue的底层多处都使用到了该方法。

例如：vue的数据劫持，数据代理，计算属性等底层都使用到了该方法。

Object.defineProperty，翻译过来就是定义属性，换句话说该方法就是用来给对象定义属性的。

Object.defineProperty的参数：

• 参数1：目标对象。

• 参数2：要修改或者添加的属性名称。

• 参数3：目标对象属性的一些特征 (也就是配置项，值为格式类似{ xxx:xxx }的对象)，该对象的参数如下：

• 参数1：value:属性值

• 参数2：writable：对象属性值是否可以被修改 true允许 false不允许

• 参数3：configurable:对象属性是否可以被删除 true允许 false不允许

• 参数4：enumerable:对象属性是否可被枚举

• 参数5：get():给一个属性提供getter方法，当访问这个对象的属性值得时候触发该方法

• 参数6：set():给一个属性提供setter方法，当设置属性值得时候触发该方法

---

注意：ObjectdefineProperty增加的属性，在打印出来后，有些不一样，颜色会比其他直接定义的属性浅一些，因此，可以通过这种方式来判别一下该属性是否是ObjectdefineProperty来创建的。

---

注意：Object.defineProperty定义的属性默认都是为false：

• enumerable的默认值为false，不能被枚举的(就是不能被遍历的)。

• writable的默认值为false，对象属性值不可以被修改。

• configurable的默认值为false，对象属性不可以被删除。

---

下面演示一下enumerable枚举的效果：

下面Object.keys()的用法：可以将对象里的所以的键取出来放到一个数组中。

8.2 Object.defineProperty方法 的get和set使用

---

8.2.1 get方法(也叫getter) 使用

---

---

常用场景(重要)：

使用Object.definedProperty的get来解决上图问题：

Object.definedProperty的get其实就是getter，获取设置属性时，会调用get方法，从而return值。

---

也可以看看get和set中函数的三种写法形式：

8.2.2 set方法(也叫setter) 使用

---

---

Object.definedProperty的set其实就是setter，当有人修改该属性时，会调用set方法，并且会拿到修改的值value作为参数。

---

总结：

9. 数据代理

=====================================================================

9.1 数据代理 例子

---

---

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

其实，在上面的number和person就是类似一种数据代理的形式，number代理操作person的age属性读写操作。

下面再写一个例子，来展现两个对象之间的数据代理：

9.2 数据代理 详解

---

---

首先，说一个误区，很多人认为我们在js中定义好vue实例对象，设定好el，data等属性，我们就可以通过vm.el或vm.data获取到相应的内容，这个观点是大错特错！！！！

因为很简单，我们定义的new Vue({ el:xx , data:xx })，黄色部分仅仅是一个参数！！！并不是一个vue实例对象的变量！这是一个容易混淆的误区。

在Vue中，将data属性以及对应的值转为了_data。

---

数据代理详解图：

---

总结起来，数据代理就是通过使用Object.definedProperty(obj , attr , value)以及对应的getter和setter方法，来实现对象与对象间的代理操作！

同时也不难看出，只要做过数据代理的都在vue实例对象中查看到有get和set方法和参数值为(…)这种形式基本上都是做过数据代理的。

但是 _data 中，虽然和数据代理很像，但它采用的技术叫做数据劫持，并不是数据代理！因为它要时刻与页面的数据进行响应，也正因如此，才会对我们写js传入的data参数进行一些修改，从而得到一个_data，也不难看出 _data多出了很多属性。

---

数据代理的本意就是让vue实例对象的数据与页面的数据，链接对应起来，一方修改另一方也要被修改。

10. Vue 事件处理

==========================================================================

10.1 v-on 事件

---

---

• v-on指令：就是当什么什么时候 ，v-on可以简写为@。

• v-on:click就是当点击的时候，v-on:click可以简写为@click。

参数属性methods：来存放我们设定的函数的。

你好，{{name}}！

点我提示信息

10.2 methods方法 和 event事件对象

---

---

我们在methods方法中设定好的函数，默认第一个参数是可以接受到一个event事件对象。

对于event事件对象，我们常用的方法是target来打印一些东西等等：

你好，{{name}}！

<button @click=“myfun”>点我提示信息

---

这里就有一个原则，就是我们在methods写的方法不要写成箭头函数形式，不然this指向的不是vue对象，而是window对象。

10.3 指定参数

---

---

传参数就是在函数后面加上括号参数就可以了。

你好，{{name}}！

<button @click=“myfun”>点我提示信息(不传参数)

<button @click=“myfun2(66)”>点我提示信息2(传参)

---

但是，上面代码有个问题就是事件对象event没法得到了！为了解决这个问题，我们还可以通过传参$event来解决。

# 最后

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。

因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！不论你是刚入门Android开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门！

如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！
fun">点我提示信息(不传参数)

<button @click=“myfun2(66)”>点我提示信息2(传参)

---

但是，上面代码有个问题就是事件对象event没法得到了！为了解决这个问题，我们还可以通过传参$event来解决。

# 最后

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。

因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

[外链图片转存中…(img-iaGHqceo-1715654840429)]

[外链图片转存中…(img-th0VOUUl-1715654840430)]

[外链图片转存中…(img-C892rKsp-1715654840430)]

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！不论你是刚入门Android开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门！

如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！