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）开发环境版本，包含了完整的警告和调试模式
      	<script src="https://vuejs.org/js/vue.js"></script>
		（2）生产环境版本，删除了警告，优化了尺寸和速度
      	<script src="https://vuejs.org/js/vue.min.js"></script>

第二章

实例与数据绑定：
	（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，但这两种是有区别的
	![图片路径](https://img-blog.csdnimg.cn/2019070115041589.PNG)
	一般来说，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方法接收一个函数作为参数，对数组中每个元素使用这个函数，只调用这个函数
 ![步骤](https://img-blog.csdnimg.cn/20190701164233638.png)
 （2）map迭代器 map迭代器和forEach有些类似
 ![步骤](https://img-blog.csdnimg.cn/20190701164338374.png)
 （3）every迭代器（有假即假） every方法接受一个返回值为布尔类型的函数，对数组中每个元素使用这个函数，如果对于所有元素，该函数均返回true，则该方法返回true，否则返回false
 ![步骤](https://img-blog.csdnimg.cn/20190701164525592.PNG)
 （4）some迭代器（有真即真） some方法也是接受一个返回值为布尔类型的函数，只要有一个元素使得该函数返回true，该方法就返回true
 ![步骤](https://img-blog.csdnimg.cn/20190701164659274.PNG)
基本指令之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遍历 ![详情](https://img-blog.csdnimg.cn/20190702091840339.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1poYW5nU2lyOA==,size_16,color_FFFFFF,t_70)
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，不会改变原始数组，返回筛选后的新数组
		![vue详情](https://img-blog.csdnimg.cn/20190702093422685.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1poYW5nU2lyOA==,size_16,color_FFFFFF,t_70)
	（9）拼接-concat，不会改变原始数组，返回拼接后的新数组
		![vue详情](https://img-blog.csdnimg.cn/20190702093559263.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1poYW5nU2lyOA==,size_16,color_FFFFFF,t_70)
	（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() 方法执行的操作相似，只不过前者返回的是位于指定位置的字符的编码，而后者返回的是字符子串。