vue

第一章
三大框架：
vue.js：
优点：更轻量，单页面，简单易学
缺点：不支持IE8
开发团队：中国国内团队开发，作者：尤雨溪
Angular：
优点：完善的框架，包含模板，数据双向绑定，路由，模块化，服务，过滤器，依赖注入等所有功能
缺点：比较笨重，学习成本高，不兼容IE6/7
开发团队：google谷歌
react：
优点：速度快、跨浏览器兼容、单向数据流、兼容性好
缺点：并不是一个完整的框架，需要加上ReactRouter和Flux才能完成（目前百度阿里等企业已经开始弃用）
开发团队：facebook脸书
开发模式：
MVC：Model View Controller
MVP：Model-View-Presenter
MVVM：Model-View-ViewModel
CDN版本：
（1）开发环境版本，包含了完整的警告和调试模式

第二章
实例与数据绑定：
（1）创建根实例（2）挂载根实例（3）绑定数据
常用基本指令：
（1）(原始HTML)v-html原始HTML：取值为一个带有HTML标记代码的变量，该指令会将变量中的HTML代码翻译为最终的显示效果。
（2）（单向绑定）v-once：该指令无需取值，让双向绑定变为单向绑定，直接添加到开始标签即可。
（3）（跳跃编译）v-pre：该指令无需取值，跳过文本插值的编译过程，显示文本原样。即跳过这个元素和它的子元素的编译过程，用来显示原始 Mustache 标签{{}}。
（4）（属性绑定）v-bind动态属性：常用于动态绑定HTML元素的属性，例如id、class、href、src等属性。改变任一方数据后都会实时更新。
（5）v-on事件绑定—>监听DOM事件 注意：事件处理函数必须书写在Vue实例的methods选项下
（6）v-bind:可以省略v-bind，直接写一个冒号： v-on:可以省略v-on，直接写一个@
第三章
vue中显隐方法常用两种，v-show和v-if，但这两种是有区别的

一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。
基本指令v-on：
v-on方法名 v-on用于绑定事件监听器，实现一些交互功能。
语法：v-on:事件类型=”方法名”
v-on表达式
语法：v-on:事件类型=”内联语句”
表达式除了方法名，也可以是内联语句
v-on修饰符：
（1）.stop：阻止事件的传递，即阻止事件向上冒泡。
（2）.prevent：阻止对象的默认行为。.prevent会调用 event.preventDefault() 即取消事件的默认动作。
（3）.once：绑定的事件只能触发一次
（4）keyup.keyCode键值修饰符，用来监听键盘事件。可以通过按键名称来监听，也可以自定义按键名称（键盘修饰符及自定义键盘修饰符）
第四章
console对象，提供5种方法，用来显示信息：
日志信息console.log()、一般信息console.info()
除错信息console.debug()、警告提示console.warn()
错误提示console.error()
console对象的上面5种方法，都可以使用printf（格式化输出）风格的占位符。不过，占位符的种类比较少，只支持字符（%s）、整数（%d或%i）、浮点数（%f）和对象（%o）、CSS格式化样式（%c）五种。

如果信息太多，可以分组显示，用到的方法是console.group()和console.groupEnd()。
注意：点击组标题，该组信息会折叠或展开；可以用console.groupEnd()引起来，也可以不引起来或者最后引起。

console.dir()可以显示一个对象所有的属性和方法。
console.dirxml()用来显示网页的某个节点（node）所包含的html/xml代码。
console.clear()清空控制台内容
console.time(),console.timeEnd()方法计算一个操作的执行的时间
console.time()是开始，console.timeEnd()是结束。
console.count()方法用于计数，输出它被调用了多少次。
console.table()方法可以将传入的对象或数组这些复合数据以表格形式输出。
第五章
Vue 组件的生命周期分为四个阶段，每个阶段有两个生命钩子，注意前后钩子
（1）创建阶段：主要用于组件创建时，获取数据设置组件。
beforeCreate组件实例刚被创建，组件属性data、el等还未生成
created（能够访问创建成功的组件实例，但不能访问 模板，el 或 DOM）
（2）挂载阶段：主要用于访问组件 DOM
beforeMount在挂载开始之前被调用，完成了 el 和 data 初始化
mounted（能够访问组件模板，模板挂载完毕，el 被新创建的 vm.$el 替换）
（3）更新阶段：数据变化，组件重新渲染。
beforeUpdate（能够访问组件更新后的数据，但无法访问 DOM）
updated（能够访问 DOM）
（4）销毁阶段：（用于销毁组件，做清理工作）
beforeDestory（销毁前还能访问组件实例）
destoryed销毁完毕，销毁实例，清理实例连接，解绑它的全部指令及事件监听器，并不会清除data的数据或者清除dom
本章总结
（1）什么是生命周期？
从Vue实例创建、运行、到销毁期间，总是伴随着各种各样的事件，这些事件，统称为生命周期！
（2）生命周期钩子选项/生命周期钩子？
就是生命周期事件的别名而已。
（3）生命周期钩子 = 生命周期函数 = 生命周期事件
（4）主要的生命周期函数分类：
①创建期间的生命周期函数
②运行期间的生命周期函数
③销毁期间的生命周期函数
（5）创建期间的生命周期函数：
①beforeCreate：实例刚在内存中被创建出来，此时，还没有初始化好 data 和 methods 属性
②created：实例已经在内存中创建OK，此时 data 和 methods 已经创建OK，此时还没有开始 编译模板
③beforeMount：此时已经完成了模板的编译，但是还没有挂载到页面中
④mounted：此时，已经将编译好的模板，挂载到了页面指定的容器中显示
（6）运行期间的生命周期函数：
①beforeUpdate：状态更新之前执行此函数， 此时 data 中的状态值是最新的，但是界面上显示的 数据还是旧的，因为此时还没有开始重新渲染DOM节点
②updated：实例更新完毕之后调用此函数，此时 data 中的状态值 和 界面上显示的数据，都已经完成了更新，界面已经被重新渲染好了！
（7）销毁期间的生命周期函数：
①beforeDestroy：实例销毁之前调用。在这一步，实例仍然完全可用。
②destroyed：Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。
第六章
当逻辑较为复杂时，可以写在computed计算属性内，需要reture返回结果
计算属性包含getter和setter，利用getter读取，用setter设置，默认用getter读取就可以了

计算属性可以依赖其他计算属性
不仅可以依赖当前Vue实例的数据，还可以依赖其他实例数据

computed 基于他的依赖缓存，只有相关依赖发生改变时才会重新取值
methods 除了提供computed之外，还提供了一种侦听器：watch  由于相对繁琐不建议使用

第七章
class对象语法：
1.单类名切换：


2.多类名切换：


3.类名共存：


4.对象包裹：


5.计算属性：


class数组语法：
1.普通数组：


2.表达式：


3.数组对象嵌套：


4.计算属性：


内联样式style：
1.对象语法
2.对象包裹语法
3.计算属性语法

第八章

安装chrome助手的步骤 ：
（1）搜索谷歌助手，点击下载，之后扫码获取下载验证码http://chromecj.com/productivity/2018-11/1650/download.html
（2）修改文件后缀 下载后文件后缀为.crx，这种后缀在chrome无法识别，所以需要修改后缀为.rar，之后解压
（3）修改文件夹名 解压文件，打开该文件夹，把里面的"_metadata"文件夹改名为"metadata"（去掉开头的下杠）
（4）打开chrome扩展程序管理页面
（5）加入chrome扩展程 进入扩展程序中心，启用开发者模式，加载正在开发的程序包，选择刚才的文件夹就行了
（6）按照提示，进行设置主页，进行**。 由于其不稳定性，可能经常需要重启**
安装vue-devtools
（1）因为之前安装了chrome访问助手，所以现在可以使用谷歌搜索引擎搜索下载。
首先输入下载网址（https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd?hl=zh-CN），添加至chrome
（2）助手页面查看添加结果
（3）配置打开权限，允许访问文件位置 （这样便可以支持本地开发时 file 前缀文件类型进行访问。）
（4）打开控制台查看 （添加完vue-devtools扩展程序之后，我们在调试vue应用的时候，chrome开发者工具中会看一个vue的一栏，点击之后就可以看见当前页面vue对象的一些信息。vue-devtools使用起来还是比较简单的，上手非常的容易，这里就细讲其使用说明了。）
（5）常见问题：
（1）打开后没有vue栏
方案：关闭控制台，刷新页面重新打开
（2）Vue Devtools安装成功后无法启用Vue.js not detected chorme
方案：浏览器环境,没有使用配置node环境，以file协议打开引用了vue.js的网页，chorme里面这个扩展总是灰色的，点击之后就显示not detected，自定义设置即可

第九章
拓展：JS迭代器
迭代器模式是一种相对简单的模式，迭代器的使用可以极大地简化数据操作，目前的绝大部分语言都内置了迭代器
（1）forEach迭代器 forEach方法接收一个函数作为参数，对数组中每个元素使用这个函数，只调用这个函数

（2）map迭代器 map迭代器和forEach有些类似

（3）every迭代器（有假即假） every方法接受一个返回值为布尔类型的函数，对数组中每个元素使用这个函数，如果对于所有元素，该函数均返回true，则该方法返回true，否则返回false

（4）some迭代器（有真即真） some方法也是接受一个返回值为布尔类型的函数，只要有一个元素使得该函数返回true，该方法就返回true

基本指令之v-cloak
v-cloak不需要表达式，它会在Vue实例编译结束时从绑定的HTML元素上移除，经常和CSS的display:none;配合使用。
对于屏幕闪动，只要在v-cloak基础上再加一句CSS即可[v-cloak]{display:none;}
一般情况下，v-cloak是解决初始化慢导致页面闪动的最佳方案，对于简单项目很实用。但在工程化的项目里，项目的HTML结构只有一个空的div元素，剩余的内容都是由路由去挂载不同组件完成的，所以不再需要v-cloak。
v-if指令回顾
v-if指条件性渲染，为true时渲染DOM，否则不进行渲染：当数据show为true时，元素会被插入，为false时则会被移除。
数据驱动DOM是Vue.js的核心理念，所以尽量避免直接操作DOM，只需要维护关注数据即可，DOM的事Vue会进行处理。
与JS条件语句if、else-if、else类似，Vue条件指令也可以根据表达式的值在DOM中创建或销毁元素/组件。
例如v-if与v-else，使用 v-else 指令来表示 v-if 的“else 块”：
双路分支：
show为true是显示文本1，否则显示文本2。
进阶： 添加按钮点击切换显隐
注意：v-else 元素必须紧跟在带 v-if 或者 v-else-if 的元素的后面，否则它将不会被识别。 (加key)
v-for：列表渲染 (加key)
遍历数组可以接收三个参数：element，index，self
遍历对象可以接收三个参数：value，key，index
控制循环次数的两种方法：
item of items.slice(0,2)
通过v-if控制
第十章
ES6拓展:
（1）遍历对象for-in
（2）遍历对象键–Object.keys() 构造函数Object里面自带的方法Object.keys()（取键名）
（3）遍历对象值–Object.values 构造函数Object里面自带的方法Object.values()（取键值）
注意：遍历对象值–Object.values 不是所有浏览器都支持.values - 你可以使用.map来获取所有值的数组
（4）for…of遍历
JS数组操作：
（1）末尾添加-push，会改变原始数组，返回值为数组更新后的新数组长度。
（2）末尾删除-pop，会改变原始数组，返回值为被删除的数组元素。
（3）开头添加-unshift，会改变原始数组，返回更新后新数组长度
（4）开头删除-shift，会改变原始数组，返回被删除的数组元素
（5）添加、删除、替换-splice，会改变原始数组
1、删除：删除(任意个数)—参数1：开始的索引；参数2：删除的长度 返回被删除的数组元素
2、添加(任意个数): 插入起始位置、0（要删除的项数）和要插入的项。 返回空；如果要插入多个项，可以再传入第四、第五…任意多个项
替换：替换(任意个数)：即删除和插入数量相等项数的综合应用，可以指向指定位置插入任意数量的项，且同时删除任意数量的项
3、指定3个指定参数：起始位置、要删除的项数和要插入的任意数量项。 返回被替换掉的数组元素；注意：插入的项数是不必与删除的项数相等
（6）排序-sort，会改变原始数组，返回排序后的数组 排序时按照ASCII码进行排序，先看首个字符的ASCII码值，按照码值进行排序。
（7）翻转-reverse，会改变原始数组，返回翻转后的数组
（8）筛选-filter，不会改变原始数组，返回筛选后的新数组

（9）拼接-concat，不会改变原始数组，返回拼接后的新数组

（10）截取-slice:包含开头索引不含结尾索引，返回截取的数组元素
由于 JavaScript 的限制，Vue 不能检测以下变动的数组：
①利用索引直接设置一个项时，例如：vm.items[indexOfItem] = newValue
②修改数组的长度时，例如：vm.items.length = newLength
方法：利用索引直接设置，无法响应 为了解决第一类问题，有两种方式都可以实现和 vm.items[indexOfItem] = newValue 相同的效果，同时也将触发状态更新
JS限制-数组操作：
（1）set方法 语法结构：Vue.set(vm.items, indexOfItem, newValue)
使用 Vue.set(object, key, value) 方法向嵌套对象添加响应式属性
（2）splice替换 语法结构：vm.items.splice(indexOfItem, number, newValue)
（3）修改数组的长度时，例如：vm.items.length = newLength 这种问题也可以直接用splice来解决
字符串和数字大小对比：
（1）纯字符串比较，转换成ASCII码在进行比较；
（2）纯数字和数字字符串相比较，则将字符串数字隐式转换成数字再进行比较；
（3）纯数字和非数字字符串比较，都返回false；
ASCII码值：
（1）charCodeAt() 方法可返回指定位置的字符的 Unicode 编码。这个返回值是 0 - 65535 之间的整数。 语法：stringObject.charCodeAt(index)
字符串中第一个字符的下标是 0。如果 index 是负数，或大于等于字符串的长度，则 charCodeAt() 返回 NaN。
（2）charAt() 方法可返回指定位置的字符 可以直接用charAt() 方法可返回指定位置的字符
ASCII码值小结
1、charCodeAt() 方法可返回指定位置的字符的 Unicode 编码。这个返回值是 0 - 65535 之间的整数。
2、charAt() 方法可返回指定位置的字符。
3、方法 charCodeAt() 与 charAt() 方法执行的操作相似，只不过前者返回的是位于指定位置的字符的编码，而后者返回的是字符子串。