vue小总结

1. MVVM模式

MVVM模式分为Model，View，ViewModel 三个部分

1. .Model:数据层，包含数据实体和对数据实体的操作
2. (2).View:界面层，对应于Activity，XML,View，负责数据显示以及用户交互。
3. (3).ViewModel：关联层，将Model和View进行绑定，Model或者View更改时，实时刷新对方

MVVM的劣势

1),数据绑定使得Bug很难被调试。

2),一个大的模块中，model也会很大，虽然使用方便了也很容易保证了数据的一致性，但是长期持有，不释放内存，就造成了花费更多的内存。

3),数据双向绑定不利于代码重用。客户端开发最常用的重用时View，但是数据双向绑定技术，让你在一个View都绑定了一个model，不同模块的model都不同，那就不能简单重用View了。

MVVM的优势和劣势

1),使得M,V,VM的解耦更加彻底，在mvp模式中，p需要持有V的引用，才能去刷新UI，在MVVM模式中，View和Model使用databingding进行双向绑定，一方改变会直接通知另外一方，使得viewModel能专注于业务逻辑的处理，而不需要去关心UI刷新。

2),不会像MVC一样导致Activity中代码量巨大，也不会像MVP一样出现大量的View接口(Presente与View是通过接口进行交互的)。项目结构更加低耦合。

1. CMD命令操作

cd\'  返回到根目录

cd..' 返回到上一级目录

1、 cd  显示当前目录名或改变当前目录。

2、 dir 显示目录中的文件和子目录列表。

3、 md  创建目录。

4、 del 删除一或数个文件。

5、 chkdsk 检查磁盘并显示状态报告。

6、 cacls  显示或者修改文件的访问控制表(ACL)?

7、 copy   将一份或多份文件复制到另一个位置。

8、 date   修改日期

9、 format 格式化磁盘

10、type   显示文本文件的内容。

11、move   移动文件并重命名文件和目录。

12、expand 展开一个或多个压缩文件。

13、ren    重命名文件。

14、attrib 显示或更改文件属性。

15、time   显示或设置系统时间。

16、at     at命令安排在特定日期和时间运行命令和程序。要使用AT?命令，计划服务必须已在运行中。

17、net    [user],[time],[use]多，自己去查

18、netstat 显示协议统计和当前tcp/ip连接

19、nbtstat 基于NBT（net?bios?over?tcp/ip）的协议统计和当前tcp/ip连接

20、route   操作和查看网络路由表

21、ping    就不说了，大家都熟悉吧

22、nslookup 域名查找

23、edit  命令行下的文本编辑器

24、netsh 强大的命令行下修改tcp/ip配置的工具

1. CDN (P11)

CDN是构建在现有网络基础之上的智能虚拟网络，依靠部署在各地的边缘服务器，通过中心平台的负载均衡、内容分发、调度等功能模块，使用户就近获取所需内容，降低网络拥塞，提高用户访问响应速度和命中率。CDN的关键技术主要有内容存储和分发技术

ES6-键值对(P17)

任何一个对象的成员要么是数据成员，要么是函数成员。但无论是函数据成员还是函数，在本质上都是一个“键-值”对，“键”是这个成员的名字，“值”是这个成员的内容。对于函数成员来说，“键”是函数的名字，“值”是函数的“地址”。因此，只要能够描述一个函数的名字和这个函数将要执行的操作就可以了。

模板字符串 (P20)

模板字符串：是允许嵌入表达式的字符串（可以使用多行字符串和字符串插值功能）

它的写法，以反引号 ` 开头，以反引号 ` 结尾

let str = `这是一个模板字符串`;

字符串插值的写法：
一个美元符号，花括号 ${val}，val写想插入的值

生命周期钩子 (P26)

生命周期： Vue是一个构造函数，当执行执行这个函数时，相当于初始化vue实例；在创建实例过程中，需要设置数据监听，编译模板，将实例挂载到DOM上，数据更新能够让DOM也更新，同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会。

生命周期钩子函数：

生命周期钩子函数，让够让咱们在初始化实例时，添加自己的代码；
生命周期的钩子函数中的this，会默认指向vue的实例;

钩子函数汇总：

beforeCreate：是第一个生命周期函数，表示实例完全被创建出来之前会执行这个函数。在此函数执行时，data和methods中的属性与方法定义都还没有初始化。

created：是第一个生命周期函数，在此函数中，data 和 methods 都已经被初始化好了。

beforeMount：是第三个生命周期函数，表示模板已经在内存中编辑完成了，但是还没有被渲染到页面中。

mounted：第四个生命周期函数，此时内存中的模板已经挂载到了页面中，用户可以看到渲染好的页面。mounted是实例创建期间的最后一个生命周期函数，当此函数执行完毕，表示实例已经被完全创建好了。

beforeUpdate：此时界面还没有被更新。

updated：updated 事件执行的时候，页面和 data 数据已经保持同步。

beforeDestroy：销毁之前执行，当beforeDestroy函数执行时，表示vue实例已从运行阶段进入销毁阶段，vue实例身上所有的方法与数据都处于可用状态。

destroyed：当destroy函数执行时，组件中所有的方法与数据已经被完全销毁。

其余三个钩子：

keep-alive 缓存组件 生命周期的钩子函数 activated deactivated

生命周期的钩子函数

activated(：当缓存组件有被显示出来时，会触发这个钩子函数

deactivated：  当缓存的组件隐藏时，会触发这个钩子函数；

errorCaptured ：当子孙组件出错时，会调用这个钩子函数

还有一个隐藏的钩子，经常会用到，但注意，这个钩子不是已函数形式写在script中，而是vm实例自带的一个方法，所以在vc（VueComponent）实例上也能访问：

this.$nextTick()：在下次 DOM 更新循环结束之后执行延迟回调；在修改数据之后立即使用这个方法，获取更新后的 DOM。

数组侦听(P37)

对数组的监听

    data() {

        return {

            list: [1, 2, 3, 4, 6],  //需要被监听的数组

        }

    },

    watch: {

        list(newVal, oldVal) {  //对数组进行监听

            console.log(newVal)

            console.log(oldVal)

        },

    },

    created() {

        this.list[2] = "666"   //将数组对应下标值改变

    }

以上方法watch并不会有任何监听结果，此时监听失败

解决办法，
方法一：

使用vuejs提供的变异方法，例如splice（） push() 等

    created() {

        this.list.splice(1,1,666)  //用splice方法，将数组index=1的数值改成换成666

        // this.list.push("") // 增加空值  也能监听到

        // this.list.pop()

        // this.list.shift()

        //this.length = 10  //直接改变数组长度  无效

    }

事件对象属性(P52)

button 的属性、

格式：事件对象.button
返回值：点击鼠标左键：返回0 点击鼠标滚轮：返回1 点击鼠标右键：返回2

获取鼠标位置的属性（以下三者的区别在于：原点位置不一样）（x轴以右为正，y轴向下为正）

clientX、clientY：

格式：事件对象.clientX、事件对象.clientY

返回值：以可视窗口左上角为原点，返回鼠标坐标点（不带单位）

pageX、pageY：

返回值：整个页面的左上角为原点，返回鼠标坐标点 （不带单位）

screenX、screenY：

返回值：整个电脑屏幕左上角为原点，返回鼠标坐标点 （不带单位）

offetX、offsetY

返回值：点击元素的左上角为原点，返回鼠标坐标点 （不带单位）

鼠标键+摁键属性：

shifitKey altKey ctrlKey metaKey

shifitKey 按下shifit键为true，默认为false

altKey 按下alt键为true，默认为false

ctrlKey 按下ctrl键为true，默认为false

metaKey window系统 按下window（开始键）为true，mac摁下comman键 为true

键盘键属性：

keyCode 键码

功能：返回键盘摁键 键码

返回值：键码：字母都是大写ASIIC码值，其他键都是一一对应的ASIIC码

which

功能：返回键盘摁键 键码

返回值：键码：字母都是大写ASIIC码值，其他键都是一一对应的ASIIC码

charCode字符码（仅在keypress下支持）

返回值：除了keypress事件处理函数触发输出的charCode代表字符码。其他事件处理函数触发的输出的charCode都是0

事件修饰符(P59-60)

事件的基本使用

1.使用v-on:xxx或者@xxx绑定事件，其中xxx是事件名

2.事件的回调需要配置在methods中，最终会在vm上

3.methods中配置的函数，不要用箭头函数，否则this就不是vm了

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

1. @click="demo" 和 @click="demo($event)" 效果一致，但后者可以传参

事件修饰符

1.prevent：阻止默认事件

2.stop：阻止事件冒泡（常用）

3.once：事件只触发一次（常用）

4.capture：使用事件的捕获模式；

5.self：只有event.target是当前操作的元素时才触发事件

6.passive：事件的默认行为立即执行，无需等待事件回调执行完毕

v-mmodel修饰符(P71-72)

双向绑定，针对页面中可修改的数据，只能写一个变量名

语法：v-model=“变量名”

双向绑定

<input type="text" v-model="val">

<!-- 插值表达式 -->

{{val}}

我们可以使用v-model对input框、单选框、复选框、下拉框进行很多的操作，比如选中某一个选项时，能获取到该选项的文本内容，还可以进行默认选项的设定

key属性的作用(P75)

key属性的作用：

1. 提升v-for渲染的效率

2. 提高渲染性能

若对数据进行：逆序添加、逆序删除等破坏顺序操作， 会产生没有必要的真实DOM更新，虽然界面效果没问题, 但效率低。

避免数据混乱的情况出现

如果结构中还包含输入类的DOM： 会产生错误DOM更新 ，出现数据混乱。

 开发中如何选择key?

1.最好使用每条数据的唯一标识作为key, 比如id、手机号、身份证号、学号等唯一值。

2.如果不存在对数据的逆序添加、逆序删除等破坏顺序操作，只是简单的展示数据，用index也是可以的。

3.如果对数据的逆序添加、逆序删除等破坏顺序操作，用index作为key值，效率低。

v-for_v-if一同使用的注意事项

vue2.0版v-for和v-if优先级

当它们处于同一节点，v-for 的优先级比 v-if 更高，这意味着 v-if 将分别重复运行于每个 v-for 循环中。

正确做法是通过将其更换为一个计算属性上遍历

这样做的好处：
1.过滤后的列表只会在 users 数组发生相关变化时才被重新运算，过滤更高效。
2.使用 v-for=“user in activeUsers” 之后，我们在渲染的时候只遍历活跃用户，渲染更高效。
3.解耦渲染层的逻辑，可维护性 (对逻辑的更改和扩展) 更强。

父子组件之间传递数据的方法   《P122》子组件向父组件传递数据 父组件向子组件传递数据

子组件向父组件传值（自定义事件）

第一种方式: 通过父组件给子组件绑定一个自定义事件实现子给父传数据 使用v-on或@ 结合student.vue中的sendStudentName 的emit。 如果只能点击一次则

 传输多个自定义事件:

 <student v-on:studentName="getStudentName"  v-on:studentName1="getStudentName1"></student>

第二种方式：通过父组件给子组件绑定一个自定义事件实现子给父传数据 使用ref和mounted 结合student.vue中的sendStudentName 的emit

注意：

如果组件里面写了@click这种dom的操作事件，组件会认为这是个自定义事件。所以要想为组件中的dom操作事件，只需要 @click.native加个native即可。

this.$refs.student 这里this指的是student组件并不是App,student触发则this就是student。如果是this.getStudentName getStudentName是App.vue method里面方法则这个里this就是App。如果mounted里面写的是普通function方法则这里this也是App。

只触发一次则this.$refs.student.$once('studentName',this.getStudentName)再点击没反应。

详细见：(48条消息) vue组件传值_PCthedream的博客-优快云博客

单页应用(SPA)  P126-127、

从字面上来理解：

单页面应用（SPA--------single page application），一个web项目只有一个页面（即一个HTML文件）；一个项目的所有页面的所有内容被分成了很多的小块（即组件），可以重复利用的，可以任意调整的组件，每个组件就是一个独立的部分（包括html，css和javascript代码）。

从使用的过程来理解：

单页面应用指一个系统只加载一次资源，然后下面的操作交互、数据交互是通过router、ajax等来进行，页面并没有刷新，页面只在最开始前刷新一次。

单页应用的优缺点

优点：

而单页应用则是一次性把web应用的所有代码（HTML，JavaScript和CSS）全部请求过来，有时候考虑到首屏加载太慢会按需加载。这样一来，以后用户的每一个动作都不会重新加载页面（即不用再问服务器要页面的HTML，css和js代码），取而代之的是利用 JavaScript 动态的变换HTML的内容（这不需要和服务器交互，除非数据是动态，那么只需要问服务器要数据即可）。

单页应用优点的小小总结：

1.分离前后端关注点，前端负责界面显示，后端负责数据存储和计算，减轻服务器压力，服务器只用出数据就可以，而且不会把前后端的逻辑混杂在一起；

2.API共享，后端API通用化，服务如果是多端的（浏览器端、Android、iOS、微信等），单页应用的模式便于你在多个端共用 API，可以显著减少服务端的工作量；

3.用户体验好、快，内容的改变不需要重新加载，提升了用户体验；

4.前端组件化，前端开发不再以页面为单位，更多地采用组件化的思想，代码结构和组织方式更加规范化，便于修改和调整。

缺点

1. 首次加载耗时较多，需加载大量的资源
   2.导航不可用，由于单页Web应用在一个页面中显示所有的内容，所以不能使用浏览器的前进后退功能
   3.对搜索引擎（SEO）不友好

单页应用缺点的解决方案、

1.按需加载：按照当前呈现的不同页面加载不同的文件，而不是最开始就把所有文件都加载出来，从而避免首屏加载很慢。

当首屏加载完毕后，设备&网络处于空闲状态，可以对其他路由组件进行预加载，以便提升页面切换性能。

根据路由拆分减少初始加载体积,利用异步加载方式，在路由注册时提供异步拉取组件的方法，仅在需要进入对应路由时，对应组件才会被加载进来。

2.缓存+懒加载：有一些方法可以加快单页应用的初次加载速度，比如采用多项缓存措施、需要时再加载某些模块（懒加载）

3.配置好路由信息：通过记录浏览过的历史路由信息，可以很好的记录或历史查看过的界面，有效解决导航不可用的问题

4.用 #!号代替#号：搜索引擎抓取页面首先要遵循http协议，可是#不是协议内的内容。而实际上也是这样，我们没有见过搜索引擎的搜索结果中，哪一条记录可以快速定位到网页内的某个位置的。解决的方法是用 #!号代替#号，因为谷歌会抓取带有#!的URL。我们可以解决ajax的不被搜索引擎抓取的问题。