VUE_学习笔记

一、 xx

二、模板语法

1.模板语法之差值语法 ：{{ }}

主要研究：{{ 这里可以写什么}}

1. 在data中声明的变量、函数等都可以。
2. 常量
3. 只要是合法的javascript表达式，都可以。
4. 模板表达式都被放在沙盒中，只能访问全局变量的一个白名单，如Math和Date等。（见Vue官网）

2.模板语法之指令语法： v-？？？

指令语法：

1. 什么事指令？有什么用？
   指令的职责是：当表达式的值改变是，将其产生的连带影响，响应式的作用于DOM。
2. Vue框架中的所有指令的名字都已“v-”开始。
3. 差值是写在标签体当中的，那么指令写在哪里呢？
   Vue框架中所有的指令都是以html标签的属性形式存在的，
   例如：<span 指令是写在这里的>{{这是插值语法的位置}}< /span >
   注意：虽然指令是写在标签的属性位置上，但是这个指令浏览器是无法直接看懂的；
   是需要先让Vue框架进行编译的，编译之后的内容浏览器是可以看懂的。
4. 指令的语法规则：
   指令的一个完成的语法格式：
   <HTML标签 v-指令名：参数=“javascript表达式”></HTML标签>
   表达式：之前在插值语法中{{这里可以写什么}}，那么指令中的表达式就可以写什么。实际上是一样的 。
   但是需要注意的是：在指令中的表达式位置不能在外层再添加一个{{}}。
   不是所有的指令都有参数和表达式：
   有的指令，不需要参数，也不需要表达式，例如v-once
   有的指令，不需要参数，但是需要表达式，例如v-if="表达式"
   有的指令，既需要参数，又需要表达式，例如v-bind:参数="表达式"
5. v-once 指令
   作用： 只渲染元素一次。随后的重新渲染，元素及其所有的子节点将被视为静态内容并跳过。这可以用于优化更新性能。
6. v-if=“表达式” 指令
   作用：表达式的执行结果需要是一个布尔类型的数据：true或false
   true：这个指令所在的标签，会被渲染到浏览器当中。
   false：这个指令所在的标签，不会被渲染到浏览器当中。
7. v-bind 指令
   它是一个负责动态绑定的指令。
   v-bind 指令详解：
   1.这个指令是干啥的？
   它可以让HTML标签的某个属性的值阐释动态的效果。
   2.v-bind指令的语法格式：
   <HTML标签 v-bind:参数=“表达式”></HTML标签>
   3.v-bind指令的编译原理：
   编译前：<HTML标签 v-bind:参数=“表达式”></HTML标签>
   编译后：<HTML标签 参数=“表达式的执行结果”></HTML标签>
   注意两项：
   第一：在编译的时候v-bind后面的“参数名”会被编译为HTML标签的“属性名”。
   第二：表达式会关联data，当data发声改变之后，表达式的执行结果就会发声变化。
   所以，连带的就会产生动态效果。
   4.v-bind因为很常用，所以Vue框架对该指令提供了一种简写方式：
   只是针对v-bind提供了一下简写方式：
   < img :src=“imgPath”>
   5.什么时候使用插值语法？设么时候使用指令？
   凡是标签体当中的内容要想动态，需要使用插值语法；
   只要想HTML标签的属性动态，需要使用指令语法。
8. v-model 指令
   v-bind和v-model的区别和联系
   1. v-bind和v-model这两个指令都可以完成数据绑定
   2. b-bind是单向数据绑定。
   3. v-model是上香数据绑定
   4. v-bind可以使用在任何HTML标签汇总，v-model只能使用在表单元素上，
      例如：input，select、textarea标签等
      为什么v-model的使用会有这个限制呢？
      因为表单类的元素才能给用户提供交互输入的界面。
   5. v-bind和v-model都有简写方式：
      v-bind简写方式：
      v-bind:参数=“表达式” 简写为： ：参数=“表达式”
      b-model简写方式：
      v-model:value=“表达式” 简写为 v-model=“表达式”

三、MVVM分层思想

1. MVVM是什么？
   M：Model（模型/数据）
   V：View（视图）
   VM：ViewModel（视图模型）：VM是MVVM中的核心部门。
   MVVM是目前前端开发领域中非常流行的开发思想（一种架构模式）。
   目前前端的大部分主流框架都实现了这个MVVM思想，例如Vue，React等。
2. Vue框架遵循MVVM吗？
   虽然没有完全遵循MVVM模型，但是Vue的设计也受到了它的启发。
   Vue框架基本上也是符合MVVM思想的。
3. MVVM模型当中倡导了Model和View进行了分离，为什么要分离？
   加入Model和View不分离，使用最原始的原生的javascript代码写项目，如果数据发生任意的改动，接下来我们需要编写大篇幅的操作DOM元素的JS代码。
   将Model和View分离之后，出现了一个VM核心，这个VM把所有的脏活累活给做了，也就是说，当Model发生改变之后，VM自动去更新View，当View放生改动之后，VM自动去更新Model。我们再也不需要不间歇操作DOM的JS代码了。开发效率提高了很多。

四、认识vm

1. 通过Vue实例都可以访问哪些属性（通过vm都可以vm.什么）？
   Vue实力老钟的属性很多，有的以“$”开始，有的以{“}_{”}开始所有以“$”开始的属性，可以看做是公开的属性，这些属性是提供程序员使用的。
   所有以“_”开始的属性，可以看做是私有的属性，这些属性是Vue框架低层使用的。一般程序员很少使用。
   通过vm 也可以方位Vue实例对象的原型对象上的属性，例如：vm.$delete …

五、Object.defineProperty()

1. 这个方法是ES5新增的 。
2. 这个方法的作用是：给对象新增属性，或者设置对象原有的属性。
3. 怎么用？
   Object.defineProperty(给那个对象新增属性，’ 新增的这个属性叫啥 '，{给新增的属性设置相关的配置项key：value对})
4. 第三个参数时属性相关的 配置项，配置项都有哪些？每个配置项的左右是啥？
   value 配置项：给属性指定值
   writable 配置项：设置该属性的值是否可以被修改。true标识可以修改。false表示不能修改。
   getter方法 配置项： 不需要手动调用。当读取属性值的时候，getter方法被自动调用。
   getter方法的返回值非常重要，这个返回值就代表这个属性的它的值；
   setter方法 配置项： 不需要手动调用。当修改属性值的时候，setter方法被自动调用。
   setter方法上是有一个参数的，这个参数可以接受传过来的值。
   注意：当配置项当中有setter和setter的时候，value和writable配置项都不能存在。
   

六、数据代理机制

1. 什么是数据代理机制？
   通过方位代理对象的属性来简介访问目标对象的属性。
2. 数据代理机制的实现需要依靠：Object。defineProperty()方法。

七、Vue数据代理时对属性名的要求

1. Vue实例不会给以“_”和“$”开始的属性名做数据代理。
2. 为什么？
   如果允许给“_”和“KaTeX parse error: Expected group after '_' at position 41: …力上可能会出现“_xxx”或“_̲xxx”属性，而这个属性名可以会和Vue框架自身的属性名冲突。
3. 在Vue当中，给data对象的属性名命名的时候，不猛以_或$开始

八、手写Vue框架数据代理的实现

九、事件绑定

Vue事件处理：

1. 指令的语法格式：
   <标签 v-指令名：参数名=“表达式”>{{插值语法}}</标签>
   “表达式”位置都可以写什么？
   常量、JS表达式、Vue实例所管理的XXX
2. 在Vue当中完成事件绑定需要哪个指令呢？
   v-on指令。
   语法格式： v-on：事件名=“表达式”
   例如：
   v-on：click=“表达式” 表示当鼠标单击事件之后，执行表达式。
   v-on：keydown=“表达式” 表示当发声键盘按下事件之后，执行表达式。
3. 在Vue当中，所有是哪所关联的回调函数，需要在Vue实例的配置项methods中进行定义。
   methods是一个对象：{}，
   在这个methods对象中可以定义多个回调函数。
4. v-on指令也有简写形式
   v-on：click 简写为 @click
   v-on：keydown 简写为 @keydown
   v-on：mouseover 简写为 @mouseover
   …
5. 绑定的回调函数，如果函数调用时不需要传递任何参数，小括号（）可以省略。

<button v-on:click="sayHelle()">hello</button>
<button @click="sayHi()">指令简写形式</button>
<button @click="sayHi">不带小括号</button>

6. Vue在调用回调函数的时候，会自动给回调函数传递一个对象，这个对象是：当前发生的事件对象。
7. 在绑定回调函数的时候，可以在回调函数的参数上使用$event占位符，Vue框架看到这个$event占位符之后，会自动将当前时间以对象的形式传过去。

十、关于事件回调函数的this

在methods对象中的普通方法中，this指的是Vue实例，
箭函数中没有this，箭头函数中的this是从父级作用域当中继承过来的。

十一、methods实现原理

1. methods对象中的方法可以通过vm去访问吗？
   可以
2. methods对象中的方法有没有后做数据代理呢？
   没有

十二、事件修饰符

Vue当中提供的事件修饰符：
.stop：停止事件冒泡，等同于event.stopPropagation()。
.prevent:等同于event.prenentDefault() 阻止事件的默认行为。
.capture：添加事件监听器时使用事件捕获模式
添加事件监听器包括两种不同的方式：
一种是从内发哦外添加（事件冒泡模式）
一种是从外到内添加（事件捕获模式）
.self这个事件如果是“我自己元素”上发生的事件，这个事件不是别人给我传过来的事件，则执行对应程序。
.once : 事件只发生一次
.passive ：passive翻译为顺从/不抵抗。直接继续（立即）执行事件的默认行为。
.passive 和 .prevent 修饰符是对立的，不可以共存。
.prevent:阻止事件的默认行为。
.passive: 解除阻止。

在Vue当中，事件修饰符是可以多个联合使用的。
但需要注意：
@click.self.stop: 先.self，再.stop
@click.stop.self: 先.stop， 再.self

十三、按键修饰符

怎么获取某个键的按键修饰符？
第一步：通过event.key获取这个键的真实名字
第二步： 将这个真实名字以kebab-case风格进行命名。
例如：PageDown 是键的真实名字，则经过命名之后：page-down。
按键修饰符是可以自定义的：
通过Vue的全局配置对象config来进行按键修饰符的自定义。
语法规则：
Vue.config.keyCodes.按键修饰符的名字 = 键值
如： Vue.config.keyCodes.huiche = 13

系统修饰键：4个比较特殊的键
ctrl、alt、shift、meta
对于keydown事件来说，只要按下ctrl键，keydown事件就会触发。
对于keyup事件来说：需要按下ctrl键，并且加上按下组合键，然后松开组合键之后，keyup事件才能触发。

十四、计算属性

1. 什么是计算属性？
   使用Vue的原有属性，经过一系列的运算/计算，最终得到了一个全新的属性，叫做计算属性。
   Vue的原有属性：data对象当中的属性，可以叫做Vue的原有属性。
   全新的属性：表示生成了一个新的属性，和data中的属性无关了，新的属性也有自己的属性名和属性值。
2. 计算属性怎么用？
   语法格式：需要一个新的配置项 computed
   computed：{
   // 这是一个计算属性
   计算属性1：{
   //setter和getter方法
   //当读取计算属性1的值的时候，getter方法被自动调用。
   //第一个时机：第一次访问这个属性的时候。
   //第二个时机：该计算属性所关联的Vue原有属性的值发声变化时，getter方法会被重新调用一次。
   get(){
   },
   //当修改计算属性1的值的时候，setter方法被自动调用。
   set(val){
   //怎么修改计算属性？原理：计算属性的值变还是不变，取决于计算属性关联的Vue原始属性的值。
   //本质上：修改计算属性，实际上就是通过修改Vue的原始属性来实现的。
   }
   }，
   //这是另一个计算属性
   计算属性2：{}，
   }
3. 计算属性的作用？
   代码得到了复用，
   代码更加便于维护。
   代码的执行效率高了。

十五、侦听属性的变化

可以监视多个属性，可以监视Vue的原有属性，也可以监视计算属性

computed和watch

1. computed和watch如果都能够完成某个功能，优先选择computed。
2. 有一种情况下，必须使用watch，computed无法完成。
   如果在程序当中采用了异步的方式，只能是用watch。
3. 什么时候使用箭头函数？什么时候使用普通函数？
   看看这个箭头函数是否属于Vue管理的。
   是Vue管理的函数：统一写普通函数。
   不是Vue管理的函数：统一写箭头函数。