小白的vue学习笔记

目录

1 插值表达式和模板语法

1.1 插值表达式      

1.2 模板语法（指令）

1.3 MVVM模型

2 数据绑定

2.1 v-bind

2.2 v-model

3 数据代理

3.1 vue中的数据代理

3.2 vue数据代理的好处 

3.3 基本原理

4 事件处理

5 计算属性

5.1 定义 

5.2 原理

5.3 get什么时候会执行

5.4 优势

5.5 一些备注

 

                          

---

1 插值表达式和模板语法

1.1 插值表达式      

         {{xxx}}放在标签体中，可以直接读取vm中的所有属性，xxx是js表达式

1.2 模板语法（指令）

        管理标签属性，用于解析标签，可以直接读取vm中的所有属性，指令是js表达式

1.3 MVVM模型

        M：model：data数据

        V：view：模板代码

        vm：是vue的实例（const vm = new Vue()…）

        data中的所有属性，最后都出现到了vm身上，

        vm里的所有属性，以及Vue原型上的所有属性，都可以在模板语法中直接调用

---

2 数据绑定

2.1 v-bind

         实现单向数据绑定，即在data中的数据可以绑定到页面上

2.2 v-model

        实现双向数据绑定，data数据影响页面，页面数据变换影响data

        v-model:value可以简写为v-model

         局限性：v-model只能应用在表单元素（输入类元素）上

---

3 数据代理

3.1 vue中的数据代理

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

3.2 vue数据代理的好处 

       更方便操作data中的数据（_data.name = name）

3.3 基本原理

       通过Object.defineProperty()把data对象中所有属性添加到vm上，为每一个添加到vm上的属性，指定一个getter/setter，在getter/setter内部去操作（读/写）data中对应的属性

---

4 事件处理

使用v-on：xxx或@xxx绑定事件

事件回调写在methods对象上，最终会在vm上

methods中的函数不能使用箭头函数，否则this就会指向window

methods中配置的函数，都是被vue所管理的函数，this指向vm或组件实例对象

---

5 计算属性

5.1 定义 

        要用的属性不存在，要通过已有的属性计算而来

5.2 原理

        底层借助了Object.defineProperty方法提供的setter和getter

5.3 get什么时候会执行

        （1）初次读取的时候会执行一次

        （2）当依赖的数据发生改变时会被再次调用

5.4 优势

        与methods相比，存在缓存机制，提高效率，调试更方便

5.5 一些备注

        （1）计算属性最终会出现在vm上，直接读取就可

        （2）如果计算属性要被修改，那必须写set函数去相应修改，且set中要引起计算依赖的数据发生变化

---

还在学习，后续待更新...