1. MVVM模式（P5）

MVVM（Model-View-ViewModel）模式包括3个核心部分。

*Model（模型)：由核心的业务逻辑产生的数据对象，例如从数据库取出并做特定处理后得到的数据。

*View（视图）:即用户界面。

*ViewModel（视图模型）：用于链接匹配模型和视图的专用模型。

  1. Vue.js的核心思想——数据的双向绑定（P5）

View和Model之间不直接沟通，而是通过ViewModel这个桥梁进行交互。通过ViewModel这个桥梁，可实现View和Model之间的自动双向同步。当用户操作View时，ViewModel会感知到View的变化，然后通知Model发送同步改变；反之，当Model发送改变时，ViewModel也能感知到Model的变化，从而使View做出相应更新。

  1. 命令行窗口常用内部命令（P10）

dir：显示一个目录中的文件列表。

cd：进入一个目录。

md：创建一个目录。 

C:\>dir //显示当前目录中的所有文件
C:\>cd my-files //进入当前目录下的my-files目录
C:\md new-files //在当前目录下创建一个名为new-files的子目录

  1. CDN-content delivery network（P11）

所谓CDN，是指内容分发网络。通过构建分布式的内容分发网络，用户可以就近获取所需内容，这样就可以提高用户访问的响应速度和命中率。

  1. v-model（P13）

v-model是Vue提供的一个指令，其含义就是将文本输入框的内容与一个数据变量关联起来，也称为“绑定”。

  1. Vue根实例（P15）

在一个完整的项目中，虽然可能会创建多个Vue实例并由此形成层次结构，但是通常一个应用中只能有一个唯一处于最上层的Vue实例，这个Vue实例就称为“Vue根实例”。

  1. “键-值”对（P17）

任何一个对象的成员要么就是数据成员，要么就是函数成员。但无论是数据成员还是函数成员，在本质都是一个“键-值”对，“键”是这个成员的名字，“值”是这个成员的内容。对于函数成员来说，“键”是函数的名字，“值”是函数的“地址”。

  1. 字符串模版-ES6新增（P20）

以“ ` ”符号开头和结尾，代替了普通字符串开头和结尾的单引号或双引号。

优点：可以跨行，直接产生多行文本。 

let hello = `欢迎来自${this.city}的${this.name}!`

  1. 箭头函数的this指针方向（P21）

箭头函数不绑定自己的this指针，而是从父级上下文中查找this指针。

  1. 属性绑定（P22-23）

双大括号{{ }}语法可以实现HTML元素的文本插值。

但是，如果我们希望绑定的是HTML元素的属性，需要使用属性绑定指令：v-bind。

v-bind的简写形式：只保留想要绑定的属性前面的冒号。 

<ul v-bind:class="sex"></ul>
<ul :class="sex"></ul>

  1. 钩子函数（P24）

Vue.js会自动维护每个Vue实例的生命周期，也就是说，每一个Vue实例都会经历一系列的从创建到销毁的过程。

例如：创建实例对象、编译模版、将实例挂载到页面上以及最终进行销毁等。

在这个过程中，Vue实例会在不同阶段的时间点向外暴露出各自的回调函数，这些回调函数又称为“钩子函数”，开发人员可以在这些不同阶段的钩子函数中定义业务逻辑。

  1. 常用的钩子函数（P26）

beforeCreate（）：在实例创建之前调用。

created（）：在实例创建之后调用，此时尚未开始DOM编译。

beforeMounted（）：在挂载开始之前调用。

mounted（）：在实例被挂载后调用，此时页面的相关DOM节点已被新创建的vm.$el替换。它相当于JavaScript中的window.onload()方法。

beforeUpdate（）：每次页面中有元素需要更新时，在更新前就会调用beforeUpdate（）钩子函数。

updated（）:每次页面中有元素需要更新时，在更新完之后就会调用updated（）钩子函数。

beforeDestory（）：在销毁实例前调用，此时实例仍然有效。

destoryed（）：在实例被销毁之后调用。

  1. this指针指向（P26）

JavaScript中的this指针，默认情况下，this指针指向调用函数的对象。但是，JavaScript还允许使用其他方式调用函数，这使得this指针可以指向其他任何特定的对象。

在创建Vue实例的时候，我们在methods中定义的各个方法，其内部的this指针都指向Vue实例对象，这是Vue.js框架进行特殊处理后的结果。

  1. methods属性（P27）

我们在methods属性中设置的函数通常被称为“方法”，用于实现对原始数据的加工，从而方便你在视图中使用加工后的数据。

  1. 计算属性的get存取器与methods方法的区别（P29）

computed定义的属性在第一次访问时进行计算，以后再次访问时不再计算，而直接返回上次计算的结果。但是，如果计算属性的值依赖于响应式数据，那么相应式数据发生变化的时候，也会重新计算。

而定义在methods中的方法每次调用时都会计算一次。

当只计算一次，以后都不再计算时，可以使用计算属性来实现。而当每次都需要计算时，可以使用方法属性来实现。

  1. 计算属性的响应式特性（P31）

当一个计算属性依赖于响应式属性时，计算属性会随着依赖的属性而立即更新，更新以后，这个属性值也就被缓存下来，直到依赖的属性下一次更新，才会触发计算属性再次改变。

  1. 侦听器（P32）

侦听器的基本作用是在数据模型中的某个属性发生变化的时候进行拦截，从而执行指定的处理逻辑。

使用场景一：当希望在某个属性发生变化的时候执行指定的操作。（拦截操作）

使用场景二：避免频繁进行耗时操作。

在绝大数场景中，都应该使用计算属性而非耗时器，只有当遇到上面所列的两种情况并且有充分的理由时，才应考虑使用侦听器。

  1. 深度侦听（P34）

计算属性和侦听器具有很多共性，它们都能够在依赖的响应式属性发生变化时做出反应。对于计算属性，会重新计算属性值；对于侦听器，会触发指定的回调函数。

但是二者存在一个重要的区别，就是计算属性是“深度侦听”的，而侦听器如果没有特殊指定的话，那么默认情况下不是“深度侦听”的。、

所谓“深度侦听”，是指当依赖或侦听的属性是一个对象而不是简单类型的值（例如数值、字符串等）时，就会以递归方式侦听对象的所有属性。 

watch:{
deep:true}

  1. immediate参数（P36）

默认情况下，只有当侦听的对象发生变化的时候，才会执行相应的操作，但是初始化的时候不会被侦听到。在一些特殊的场景中，我们希望在初始化的时候就执行一次侦听操作，此时可以使用immediate参数。 

watch：{
immwdiate:true}

  1. 对数组进行侦听（P37）

和对象类似，数组也是引用类型，因此存在比较复杂的侦听规则。从理论上说，修改一个数组的内容，比如修改数组中某个元素的值，或者给数组添加新的元素，都不会修改数组本身的地址（引用），因此也不会被侦听到。为此，Vue.js对数组做了特殊处理，使得使用标准的数组操作方法对数组所做的修改，都可以被侦听到。

  1. 使用标准方法修改数组可以被侦听到（P37）

push（） 尾部添加

pop（） 尾部删除

unshift（） 头部添加

shift（） 头部删除

splice（） 删除、添加、替换

sort（） 排序

reverse（） 逆序

  1. 以对象方式绑定class属性（P41）

以对象方式绑定class属性的基本语法是使用v-bind指令，并设定对象的属性名为class属性从名称，值为true或false。如果值为true，那么表示class属性中将包括绑定的这个class属性的名称，否则就不包含这个class属性的名称。 

<div v-bind:class="{class_name:<true|false>}"></div>

  1. 事件（P50）

“事件”是发生在HTML元素上某些特定的事情，它的目的是使网页具有某些行为，执行某些“动作”。

在一个网页中，通常已经预先定义好了很多事件，开发人员可以编写相应的“事件处理程序”来响应相应的事件。

  1. 事件流（P51）

由于DOM是树状结构，因此当某个字元素被点击时，它的父元素实际上也被单击了，并且它的父元素的父元素实际上也单击了，直到根元素。因此，一次“鼠标单击”产生的不是一个事件，而是一系列事件，这一系列事件就组成了“事件流”。

  1. 事件流三阶段（P51）

总体来说，浏览器产生事件流分为三阶段。

从最外层的根元素html开始依次向下，称为“捕获阶段”；

到达目标元素时，称为“到达阶段”；

然后以此向上回到根元素，称为“冒泡阶段”。

DOM规范规定在捕获阶段中不会命中事件，但是实际上，目前的各种浏览器对此都进行了拓展。

如果需要的话，每个对象在捕获阶段和冒泡阶段都可以获得一次处理事件的机会。

  1. v-on指令绑定事件

声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。