学习Vue入门到实战——学习笔记（三）

1.过滤器

                全局

                私有

2.Vue生命周期

               什么是生命周期

               主要的生命周期函数分类

               图文助解

               代码助解

过滤器

先看看官网是怎么说的：

Vue.js 允许你自定义过滤器，可被用于一些常见的文本格式化。过滤器可以用在两个地方：双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持)。过滤器应该被添加在 Javascript 表达式的尾部，由“管道”符号指示：

{{ message | capitalize }}

全局过滤器

所有的vm实例都共享的。

示例：

将字符串中所有的 “单纯”  替换成   ”邪恶“

过滤器函数总接收表达式的值 (之前的操作链的结果) 作为第一个参数。在上述例子中，capitalize 过滤器函数将会收到 message 的值作为第一个参数。

在 调用 过滤器 ：  character    时，可以传参数

过滤器可多次使用

 日期格式化：

将昨天小颖写的文章  学习Vue 入门到实战——学习笔记（二）  中的  ctime 格式化为‘yyyy’-'mm'-'dd'形式

过滤器为

Vue.filter('dateFormat', function (dateStr) {

var dt = new Date(dateStr),

y = dt.getFullYear(),

m = dt.getMonth() + 1,

d = dt.getDate();

// return y + '-' + m + '-' + d;

//模板字符串

if(m.toString().length<2){

m='0'+m;

}

if(d.toString().length<2){

d='0'+d;

}

return `${y}-${m}-${d}`;

});

强化

私有

过滤器调用的时候采用就近原则，如果私有过滤器和全局过滤器名称一致，这时候优先调用私有过滤器。

示例：

 附带提下：ES2017 引入了字符串补全长度的功能。如果某个字符串不够指定长度，会在头部或尾部补全。padStart()用于头部补全，padEnd()用于尾部补全。

则过滤器代码可修改为：

Vue.filter('dateFormat', function (dateStr, pattern) {

var dt = new Date(dateStr),

y = dt.getFullYear(),

m = (dt.getMonth() + 1).toString().padStart(2, '0'),

d = dt.getDate().toString().padStart(2, '0');

// return y + '-' + m + '-' + d;

//模板字符串

// return `${y}-${m}-${d}`;

if (pattern && pattern.toLowerCase() == 'yyyy-mm-dd') {

return `${y}-${m}-${d}`;

} else {

var hh = dt.getHours().toString().padStart(2, '0'),

mm = dt.getMinutes().toString().padStart(2, '0'),

ss = dt.getSeconds().toString().padStart(2, '0');

return `${y}-${m}-${d} ${hh}:${mm}:${ss}`;

}

});

2.Vue生命周期

什么是生命周期：

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

生命周期钩子：就是生命周期事件的别名而已。

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

主要的生命周期函数分类：

      创建期间：

             beforeCreate：实例刚在内存中被创建出来，此时，还没有初始化好 data 和 methods 属性。

             created：实例已经在内存中创建ok，此时data 和 methods 已经创建ok，此时还没有开始编译模板。

             beforeMount：此时已经完成了模板的编译，但是还没有挂载到页面中。

             mounted：此时，已经将编译好的模板，挂载到了页面指定的容器中显示。

      运行期间：

             beforeUpdate：状态更新之前执行此函数，此时 data 中的状态值是最新的，但是界面上显示的数据还是旧的，因为此时还没有开始重新渲染DOM节点。

             update：实例更新完毕之后调用此函数，此时data中的状态值和界面上显示的数据都已经完成了更新，界面已经被重新渲染好了。

      销毁期间：

             beforeDestroy：实例销毁之前调用，在这一步，实例仍然完全可用。

             destroyed：Vue实例销毁后调用，调用后Vue实例指示的所有东西都会被解除绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。

图文助解

代码助解

公用代码：

beforeCreate

beforeCreate(){//表示实例完全被创建出来之前，会执行它

console.log(this.msg);

this.show();

//注意：在beforeCreate生命周期函数执行的时候，data和methods中的数据还没有初始化

}

created

created() {

console.log(this.msg);

this.show();

// 在create中，data和methods已经初始化好了

// 如果要调用methods中的方法或操作data中的数据，最早只能在crate中操作。

}

beforeMount

beforeMount() {//模板已经在内存中编译好，但尚未把模板渲染到页面中

console.log(document.getElementById('testP').innerText);

//在beforeMount执行时，页面中的元素还没有真正被替换过来，只是之前写的模板字符串（{{msg}}）

}

mounted

mounted(){//表示内存中的模板，已经真实的挂载到了页面中，用户已经可以看到渲染好的页面了。

console.log(document.getElementById('testP').innerText);

//注意：mounted是实例创建期间的最后一个生命周期函数了，当执行完mounted就表示，实例已经被完全创建好了，此时如果

// 没有其他操作的话，这个实例就静静的躺在我们内存中，一动不动。

}

beforeUpdate

beforeUpdate() {//这时候页面数据没有更新，但是data中的数据已经更新了

console.log('界面上的元素内容：' + document.getElementById('testP').innerText);

console.log('data中的msg数据是：' + this.msg);

//得出结论：当执行beforeUpdate时，界面中显示的数据还是旧的，此时data数据是最新的，，页面数据尚未和最新的数据同步。

}

点击按钮后：

update

updated(){

console.log('界面上的元素内容：' + document.getElementById('testP').innerText);

console.log('data中的msg数据是：' + this.msg);

// update事件执行的时候，页面和data数据已经保持同步了，都是最新的数据

}