第二天
Vue
在Vue中使用事件绑定机制，为元素绑定函数时，加小括号，可以传参。
用链接标签时，不想要跳转页面，用@click.prevent,阻止默认行为
按键（键值）修饰符，（类似于点击修饰符Vue第一天中stop prevent 。。。）
过滤器：只用在mustache插值和v-bind表达式。过滤器应被添加在js表达式尾部，由"管道"符表示。
调用格式： {{ name | 过滤器名称 }} | 就是"管道"符
过滤器名称（参数），这里面这第一个参数相当于定义的过滤器中function的第二个参数。因为function中第一个参数不能改变。可以有多个参数。
调用name时先用 该过滤器 进行处理，再将处理的结果渲染到页面上。
- 定义 全局 过滤器： 在JS中写入Vue.filter('过滤器名称'，function(data){对data进行处理})。
- 过滤器中的function，第一个参数（本例中时data）已经被规定死了，是过滤器管道符前面传递过来的数据。
过滤器可以多次处理。{{ name | 过滤器1名称 | 过滤器2名称 }} 此时，name先经过过滤器1处理，再经过过滤器2处理，最后渲染出来。这里过滤器可以有无数个。
局部过滤器： 在Vue实例中添加一个属性filters，且有两个条件，名称和处理函数。
过滤器采用就近原则，局部过滤器和全局过滤器重名，调用局部过滤器。
全局过滤器可以自定义全局按键修饰符 Vue.config.keyCode.f2 = 113 (113是f2的键码，f2是自定义的名称)
自定义指令
- 自定义指令：使用Vue.directive()定义全局指令，以 v- 开头。
- 参数1，指令名称，不需要加v-，但是调用的时候一定要加 v- 。
- 参数2，是一个对象，有一些相关函数可以选取。有三个主要的方法，bind，inserted，updated。
- 和样式相关的放到bind中，和方法相关的/JS行为相关的放到inserted中。
- 在参数2对象中的函数，第一个参数必须是el，表示被绑定了指令的元素，el是一个原生的JS对象。第二个参数是binding(名字任意起)，一个对象，主要用到的属性有name，value，expression。用的时候就在函数中写binding.name/其他类似。
定义局部指令：模板 directives:{
'指令1名称':{}
'指令2名称':{}
}扫描二维码关注公众号，回复： 7543878 查看本文章
指令中函数简写: (局部指令为例) directives:{'指令名':function(el,binding)
// 注意：这个function等同于把代码写到 bind 和 update 中去
{el.style.fondSize = parseInt(binding.value) + 'px'}}
Vue实例的生命周期
（生命周期函数 = 生命周期钩子 = 生命周期事件）生命周期函数不能使用周期函数。
生命周期创建阶段：
- new Vue()
var vm = new Vue({}) - init Events & Lifecycle
这表示刚初始化了一个Vue空的实例对象，此时，对象上，只有默认的一些生命周期函数和默认的事件，其他东西都需要来创建。
初始化完后会执行 beforeCreate 函数（第一个生命周期函数），在该生命周期函数执行的时候，data和methods中的数据都没初始化。（未定义） - init injections & reactivity
初始化data和methods数据
初始化完成后会执行 created（重要） 函数（生命周期函数），在data和methods中的数据都可以被调用，且data和methods中的数据最早只能在created中操作。 - Has "el" option?
yes：进入下一项。
no： - Has "template" option?
yes：
no：
（4，5表示Vue开始编辑模板，执行Vue指令，最终，在内存中生成一个编译好的最终模板字符串，再把这个字符串渲染成内存中的DOM。此时只是在内存中渲染了，并没有把模板挂载到真正的页面中。） - beforeMount
挂载之前。第三个生命周期函数。表示模板已经在内存中编辑完成，但尚未挂载到页面中，此时，页面时旧的。 - Create vm.$el and replace "el" with it
将内存中编译好的模板，真实的替换到浏览器页面中。 - mounted（重要）
第四个生命周期函数。表示内存中的模板已经挂载到页面中，用户可以看到。如果要通过某些插件操作页面上的DOM节点，最早在mounted中进行。
- mounted 是最后一个生命周期函数。执行完了mounted，就表示整个Vue实例已经初始化完毕，组件脱离创建阶段，进入运行阶段。
- new Vue()
生命周期运行阶段：
- Mounted
When data changes:data数据改变时，会触发两个生命周期函数 beforeUpdate ，updated ，并且在两个函数中间有 Virtual DOM re-render and patch（data数据未改变则不会触发，改变多次则会触发多次。）
beforeUpdate() 该事件执行时界面还未被更新，【数据被更新了吗？ 数据已经更新了】 。当执行 beforeUpdate 的时候，页面中显示的数据还是旧的，但是 data 数据时最新的，此时，页面尚未和最新数据同步。
Virtual DOM re-render and patch 这一步执行的是，现根据data中最新数据，在内存中重新渲染出一份最新内存DOM树。更新DOM树之后，会把最新的内存DOM树，重新渲染到真实页面中，这时就完成了数据从 data(Model层) --> view(视图层) 的更新。
updated() 页面和数据已经同步。
- Mounted
生命周期销毁阶段：
- beforeDestroy 当执行beforeDestroy钩子函数时，Vue实例就已经从运行阶段，进入到销毁阶段。实例上所有data和methods，以及过滤器，指令。。。都处于可用状态，且还没有真正执行销毁过程。
- Teardown watchers, child components and event listeners
- destroy 当执行到 destroyed 函数时，组件已经销毁。组件不可用。
vue-resource / axios 实现get，post，jsonp请求
vue-resource 依赖于 vue 引入的先后顺序要注意。
example： this.$http.get(url).then(function(result){}) 当发起 get 请求后，通过 .then 来设置成功的回调函数和失败的（一般不写失败的）。
发送的 post 请求，默认没有表单格式，有的服务器无法处理。通过 post 方法的第三个参数，{emulateJSON: true} 设置提交的内容类型为普通表单数据格式。
结合node手写JSONP服务器剖析JSONP原理（不懂）
JS
new Date()返回当前日期和事件
数组方法
数组some方法：Array.some(function(),thisValue可选)判断数组中的元素是否满足传进来的函数条件，满足则返回true。
splice方法(添加或删除项目)：splice(index,howmany,item1,.....,itemX) index代表要添加或删除项目的位置，howmany要删除的项数，不删除填0，itemX表示要添加的项目
forEach方法
filter方法
findIndex方法
indexOf方法
includes方法:ES6中，为字符串提供的新方法，叫 String.prototype.includes('要包含的字符串')，如果包含，返回true。
- replace方法:replace('原字符串/字符','替换字符串/字符0')替换字符串中的第一个原字符串/字符。
- replace方法，第一个参数，除了可写一个字符串，还可以定义一个正则。上例中替换所有原字符串/字符：replace(/原字符（串）/g, '替换字符串/字符')
年月日方法
- getFullYear getMonth （从零开始记 要+1） getDate （日） getDay （星期） getHours getMinutes getSeconds
填充字符串：str.padstart(maxlength,fillString) 开头填充 / str.padend() 尾部填充 前面得是字符串，toString().padstart(,fillString)
js里键盘事件的对应值。可以自定义键盘事件。
一个元素插入到DOM中才能让focus()方法起作用，获得焦点。
在内存中和在DOM中不同
parseInt()函数，解析字符串，返回整数。