2体系化Vue再学习——vue对象基础2

Vue收集表单数据

vue过滤器

普通使用

 这里是将time作为参数传给timeFormater，解析出来的数据，替换整个{{}}中的数据。

过滤器传参

 如果过滤器有值则str为穿过来的值，没有则用默认值

多过滤器串联

注意：

过滤器一般只用在插值和普通赋值，不能用在v-model上

vue内置指令

v-text

 将放在其中的内容全部解析为文本

v-html

支持结构性解析，但是这里需要注意安全性问题

安全性问题：

 

步骤：

1. 通过浏览器访问服务器
2. 服务器返回cookie，浏览器进行分类进行存储
3. 携带网站之前给的cookie，访问服务器。
4. 根据访问内容，通过cookie返回数据给浏览器。

Cookie数据劫持：我们在网站里面的cookie

通过document.cookie会将

 

当前网站持有的cookie，带到对应的网站。

v-cloak

在html加载时，在加载成功之后，会将改属性移除。一般用作加载时界面数据的加载

v-once

 这里v-once包裹的内容中的vue对象在展现一次之后，就不再进行变化了

v-pre

 只要加了v-pre则不会再解析了，中间是什么样就是什么样。

vue自定义属性

通过directives定义自定艺术性

 dom元素是包含了span元素的所有内容。

 需求1实现：

 需求2实现：

需求2有个问题，因为directives中的函数，是指令与元素绑定成功时调用，就会导致当时dom还没有加载到页面中，则直接用inpute.focus执行不了。

则需要引入directive执行的生命周期：

 则正式实现为：

注意：

所有自定义属性中的this，都是window

vue生命周期 

 

注意：

1、对于vm.$destroy来说，是取消了当前vue对象与DOM之间的关联，并删除相关数据。

2、对于异步的定时器，在生命周期结束时可以这样处理（如果直接调用vm.$destroy，仅仅是解绑，没有处理内部异步逻辑）