vue_day02

在Vue中,使用事件绑定机制,为元素指定处理函数的时候,如果加了小括号,说明可以传参.

新建 DOC 文档44.png

常用方法介绍:

some(callback[, thisObject]) 只要数组中有一项在callback上被返回true，就返回true。

新建 DOC 文档120.png

在数组的some方法中,如果return ture,就会立即终止这个数组的后续循环.

findIndex(callback), 查找目标元素，只要在数组中找到满足的记录,就会return true,findIndex方法会返回当前这个索引.

新建 DOC 文档244.png

注意: forEach some filter findIndex 都是属于数组的新方法,都会对数组执行遍历,并执行相应的操作.

在ES6中,提供字符串新方法,String.prototype.includes("要包含的字符串"),如果包含,则返回true,否则返回false.

过滤器:

可以被用作一些常见文本格式化,过滤器可以用在两个地方,mustache插值和v-bind表达式,过滤器应该被添加在JavaScript表达式的尾部,由"管道符"标识.

全局过滤器:

过滤器中的function,第一个参数,默认是 过滤器 管道符 前端传递过来的数据

新建 DOC 文档531.png

过滤器中返回的数据,会返回到插值表达式的位置,然后渲染展示给用户.

私有过滤器:

和全局过滤器区别:

  所谓全局过滤器,就是所有的VM实例都共享的.

定义位置:

新建 DOC 文档622.png

过滤器调用的时候,采用的是就近原则,如果私有过滤器和全局过滤器名称一致,会优先使用私有过滤器.

按键修饰符:

内置的按键修饰符:

.enter

.tab

.delete(捕获"删除"和"退格"键)

.esc

.space

.up

.down

.left

.right

自定义按键修饰符:

可以通过键码来进行事件修饰.

新建 DOC 文档786.png

也可以通过自定义全局按键修饰符

新建 DOC 文档804.png

自定义全局指令:

注意:Vue中所有的指令,在调用的时候,都会以 v- 开头

使用Vue.directive() 定义全局的指令,v-focus

TIM截图20180814171048.png

其中: 参数1 指令的名称, 注意 在定义的时候,指令的名称前面, 不需要加 v- 前缀. 但是 在调用的时候, 必须在指令名称前 加上 v- 前缀来进行调用.

参数2: 是一个对象,这个对象身上,有一些指令相关的函数,这些函数可以在特点的阶段,执行相关的操作.

bind: 每当指令绑定到元素上的时候,会立即执行这个bind函数,只执行一次.

inserted: inserted 表示元素 插入到DOM中的时候,会执行inserted函数[触发一次].

updated: 当VNode更新的时候,回执行updated,可能会触发多次.

新建 DOC 文档1153.png

在每个函数中,第一个参数,永远是 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: 绑定值的字符串形式,如果是表达式,那么也会原样返回.

自定义私有指令:

新建 DOC 文档1821.png

函数简写:

大多数情况下,我们可能只想在bind和update钩子上做重复动作,并且不想关心其他的钩子函数(他会把代码写到了bind 和 update 中去)

新建 DOC 文档1905.png

Vue实例的生命周期:

从Vue实例创建、运行、到销毁期间，总是伴随着各种各样的事件，这些事件，统称为生命周期。

生命周期钩子 = 生命周期函数 = 生命周期事件

新建 DOC 文档1906.png

状态：

Init Events&Lifecycle：

表示刚初始化了一个Vue空的实例对象，这时候，这个对象身上，只有默认的一些生命周期函数和默认的事件，其余的东西未创建。

Init Injections&reactivity

表示开始加载data和methods中的数据

新建 DOC 文档2135.png

这里表示Vue开始编译模板，把Vue代码中的那些指令进行执行，最终，在内存中生成一个编译好的最终模板字符串，然后把这个模板字符串，渲染为内存中的DOM，此时，只是在内存中，渲染好了模板，并没有把模板挂载到真正的页面中去。

Create vm.$el and replace 'el' with it:

这一步将内存中编译好的模板,真实的替换到浏览器的页面中去.

新建 DOC 文档2320.png

这是组件运行期间的生命周期函数,当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 来设置成功的回调函数.

新建 DOC 文档3310.png

手动发起的POST提交没有表单格式(application/x-www-form-urlencoded),所以 有的服务器处理不了.

新建 DOC 文档3380.png

解决方法:设置提交的参数 { emulateJSON: true },他会将请求头设置为表单格式.

JSONP实现原理:

由于浏览器存在安全限制,不允许ajax进行跨域请求,(协议不同,域名不同,端口号不同)的数据接口,浏览器认为这种访问不安全.

可以通过动态创建script标签的形式,把script标签的src属性,指向数据接口的地址,因为script标签不存在跨域限制,这种数据获取方式,叫做JSONP(注意:根据JSONP实现原理,知道只支持GET请求)

具体实现过程:

先在客户端定义一个回调方法,预定义对数据的操作.

再把这个回调方法的名称,通过url传参的形式,提交到服务器的数据接口.

服务器数据接口组织好要发送给客户端的数据,再拿着客户端传递过来的回调方法名称,拼接出一个调用这个方法的字符串,发送给客户端去解析执行.

客户端拿到服务器返回的字符串之后,当做script脚本去解析执行,这样就能够拿到JSONP的数据了.