在Vue中,使用事件绑定机制,为元素指定处理函数的时候,如果加了小括号,说明可以传参.
常用方法介绍:
some(callback[, thisObject]) 只要数组中有一项在callback上被返回true，就返回true。
在数组的some方法中,如果return ture,就会立即终止这个数组的后续循环.
findIndex(callback), 查找目标元素，只要在数组中找到满足的记录,就会return true,findIndex方法会返回当前这个索引.
注意: forEach some filter findIndex 都是属于数组的新方法,都会对数组执行遍历,并执行相应的操作.
在ES6中,提供字符串新方法,String.prototype.includes("要包含的字符串"),如果包含,则返回true,否则返回false.
过滤器:
可以被用作一些常见文本格式化,过滤器可以用在两个地方,mustache插值和v-bind表达式,过滤器应该被添加在JavaScript表达式的尾部,由"管道符"标识.
全局过滤器:
过滤器中的function,第一个参数,默认是 过滤器 管道符 前端传递过来的数据
过滤器中返回的数据,会返回到插值表达式的位置,然后渲染展示给用户.
私有过滤器:
和全局过滤器区别:
所谓全局过滤器,就是所有的VM实例都共享的.
定义位置:
过滤器调用的时候,采用的是就近原则,如果私有过滤器和全局过滤器名称一致,会优先使用私有过滤器.
按键修饰符:
内置的按键修饰符:
.enter
.tab
.delete(捕获"删除"和"退格"键)
.esc
.space
.up
.down
.left
.right
自定义按键修饰符:
可以通过键码来进行事件修饰.
也可以通过自定义全局按键修饰符
自定义全局指令:
注意:Vue中所有的指令,在调用的时候,都会以 v- 开头
使用Vue.directive() 定义全局的指令,v-focus
其中: 参数1 指令的名称, 注意 在定义的时候,指令的名称前面, 不需要加 v- 前缀. 但是 在调用的时候, 必须在指令名称前 加上 v- 前缀来进行调用.
参数2: 是一个对象,这个对象身上,有一些指令相关的函数,这些函数可以在特点的阶段,执行相关的操作.
bind: 每当指令绑定到元素上的时候,会立即执行这个bind函数,只执行一次.
inserted: inserted 表示元素 插入到DOM中的时候,会执行inserted函数[触发一次].
updated: 当VNode更新的时候,回执行updated,可能会触发多次.
在每个函数中,第一个参数,永远是 el ,表示绑定了指令的那个元素,这个 el 参数,是一个原生的JS对象(也就是一个DOM对象,可以直接操作DOM对象的方法).
注意: 在元素 刚绑定了指令的时候,还没有插入到DOM中去,这时候调用 focus方法没有作用,因为 一个元素,只有插入到DOM之后,才能获取焦点.(上述方法不会产生获取焦点效果)
调用时机的区别:
bind调用时机:是元素加载到内存之后,只要一绑定focus这个指令,就会立即在内存中调用bind对应的操作.此时执行相应的动作,但只是在内存中,样式, 只要通过指令绑定给了元素,不管这个元素有没有被插入到页面中去,这个元素肯定有了一个内联样式.将来元素肯定会显示到页面中,这时候,浏览器的渲染引擎必然会解析样式,应用给这个元素.
inserted调用时机:是元素从内存渲染到页面的过程,就是inserted,这时说明该元素已经在本页面的DOM树中存在了,可以执行相应的动作,并且会显示出来.
与样式相关的操作,一般都可以在bind中执行
与JS行为相关的操作,最好在inserted中去执行,防止JS行为不生效.
钩子函数参数:
el:指令所绑定的元素,可以用来直接操作DOM
binding:一个对象,常用属性:
name: 指令名,不包括 v- 前缀.
value: 指令的绑定值,如果是表达式,那么会返回计算后的值.
expression: 绑定值的字符串形式,如果是表达式,那么也会原样返回.
自定义私有指令:
函数简写:
大多数情况下,我们可能只想在bind和update钩子上做重复动作,并且不想关心其他的钩子函数(他会把代码写到了bind 和 update 中去)
Vue实例的生命周期:
从Vue实例创建、运行、到销毁期间，总是伴随着各种各样的事件，这些事件，统称为生命周期。
生命周期钩子 = 生命周期函数 = 生命周期事件
状态：
Init Events&Lifecycle：
表示刚初始化了一个Vue空的实例对象，这时候，这个对象身上，只有默认的一些生命周期函数和默认的事件，其余的东西未创建。
Init Injections&reactivity
表示开始加载data和methods中的数据
这里表示Vue开始编译模板，把Vue代码中的那些指令进行执行，最终，在内存中生成一个编译好的最终模板字符串，然后把这个模板字符串，渲染为内存中的DOM，此时，只是在内存中，渲染好了模板，并没有把模板挂载到真正的页面中去。
Create vm.$el and replace 'el' with it:
这一步将内存中编译好的模板,真实的替换到浏览器的页面中去.
这是组件运行期间的生命周期函数,当data改变时触发
Virtual DOM re-render and patch:
这一步执行的是,先根据data中最新的数据,在内存中重新渲染出一份最新的 内存DOM树,
当最新的内存DOM树 被更新后,会把最新的内存DOM树,重新渲染到真实的页面中去,这时候就完成了数据 从data(Model层)-->view(视图层)的更新.
分类：
创建期间的生命周期函数：
beforeCreate：表示实例完全被创建出来之前，会执行它
注意：在beforeCreate 生命周期函数执行的时候，data和methods中的数据都还没有被初始化。
created：在created中，data和methods都已经被初始化好了，如果要操作data或methods中的数据，最早只能在created中进行。
beforeMount:表示模板已经在内存中编译完成了,但是尚未把模板渲染到页面中
在beforeMount 执行的时候,页面中的元素 还没有被真正的替换过来,只是之前写的一些模板字符串.
mounted:实例创建期间的最后一个生命周期函数,当执行完mounted就表示,实例已经被完全创建好了.
运行期间的生命周期函数:
beforeUpdate:表示data数据被更新了,但是页面还没有被更新,页面尚未和最新的数据保持同步.
updated:表示页面和data数据已经保持同步了,都是最新的.
销毁期间的生命周期函数:
beforeDestroy: 当执行 beforeDestroy钩子函数的时候,Vue实例就已经从运行阶段,进入到了销毁阶段.
当执行beforeDestroy 的时候,实例身上所有的data和所有的methods,以及过滤器、指令...都是可用状态,此时,还没有真正执行销毁的过程.
destroyed:定执行到destroyed函数的时候,组件已经被完全销毁了,笔试,组件中的所有数据、方法、指令、过滤器...都已经不可用了.
Vue中实现发送ajax请求:
使用vue-resource 他给Vue实例挂载了一个属性(this.$http.get())
注意:vue-resource依赖vue,导包要注意先后顺序.
当发起get请求之后,通过 .then 来设置成功的回调函数.
手动发起的POST提交没有表单格式(application/x-www-form-urlencoded),所以 有的服务器处理不了.
解决方法:设置提交的参数 { emulateJSON: true },他会将请求头设置为表单格式.
JSONP实现原理:
由于浏览器存在安全限制,不允许ajax进行跨域请求,(协议不同,域名不同,端口号不同)的数据接口,浏览器认为这种访问不安全.
可以通过动态创建script标签的形式,把script标签的src属性,指向数据接口的地址,因为script标签不存在跨域限制,这种数据获取方式,叫做JSONP(注意:根据JSONP实现原理,知道只支持GET请求)
具体实现过程:
先在客户端定义一个回调方法,预定义对数据的操作.
再把这个回调方法的名称,通过url传参的形式,提交到服务器的数据接口.
服务器数据接口组织好要发送给客户端的数据,再拿着客户端传递过来的回调方法名称,拼接出一个调用这个方法的字符串,发送给客户端去解析执行.
客户端拿到服务器返回的字符串之后,当做script脚本去解析执行,这样就能够拿到JSONP的数据了.
