学习Vue 入门到实战——学习笔记（三）
目录：
过滤器
先看看官网是怎么说的：
Vue.js 允许你自定义过滤器，可被用于一些常见的文本格式化。过滤器可以用在两个地方：双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持)。过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符号指示：
<!-- 在双花括号中 --> {{ message | capitalize }} <!-- 在 `v-bind` 中 --> <div v-bind:id="rawId | formatId"></div>
全局过滤器
所有的vm实例都共享的。
示例：
将字符串中所有的 “单纯” 替换成 ”邪恶“
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vue测试</title> <script src="js/vue.js"></script> </head> <body> <div id="app"> {{msg | character}} </div> <script> Vue.filter('character', function (msg) { return msg.replace(/单纯/g, '邪恶'); }); var vm = new Vue({ el: '#app', data: { msg: '魔镜魔镜谁是世界上最单纯的姑娘？魔镜魔镜谁是世界上最单纯的小伙？魔镜魔镜你是否单纯？' }, methods: {} }); </script> </body> </html>
过滤器函数总接收表达式的值 (之前的操作链的结果) 作为第一个参数。在上述例子中，capitalize 过滤器函数将会收到 message 的值作为第一个参数。
在 调用 过滤器 ： character 时，可以传参数
<div id="app"> {{msg | character('兔子','可爱')}} </div> <script> Vue.filter('character', function (msg, arg1, arg2) { return msg.replace(/单纯/g, '邪恶' + arg1 + arg2); }); var vm = new Vue({ el: '#app', data: { msg: '魔镜魔镜谁是世界上最单纯的姑娘？魔镜魔镜谁是世界上最单纯的小伙？魔镜魔镜你是否单纯？' }, methods: {} }); </script>
过滤器可多次使用
<div id="app"> {{msg | character('兔子','可爱') | ceshi}} </div> <script> Vue.filter('character', function (msg, arg1, arg2) { return msg.replace(/单纯/g, '邪恶' + arg1 + arg2); }); Vue.filter('ceshi', function (msg) { return msg + '小兔子乖乖,把门开开'; }); var vm = new Vue({ el: '#app', data: { msg: '魔镜魔镜谁是世界上最单纯的姑娘？魔镜魔镜谁是世界上最单纯的小伙？魔镜魔镜你是否单纯？' }, methods: {} }); </script>
日期格式化：
将昨天小颖写的文章 学习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}`;
});
强化
<div id="app"> <div class="panel panel-primary"> <div class="panel-heading">添加、删除、查询</div> <div class="panel-body form-inline"> <div class="form-group"> <label for="exampleInputId">Id：</label> <input type="text" class="form-control" id="exampleInputId" v-model="id"> </div> <div class="form-group"> <label for="exampleInputName">Name：</label> <input type="text" class="form-control" id="exampleInputName" v-model="name"> </div> <button type="submit" class="btn btn-primary" @click="add">添加</button> <div class="form-group"> <label for="searchName">搜索名称关键字：</label> <input type="text" class="form-control" id="searchName" v-model="keywords"> </div> </div> </div> <div class="table-content"> <table class="table table-striped table-bordered table-hover"> <thead> <tr> <th>Id</th> <th>Name</th> <th>Ctime</th> <th>operation</th> </tr> </thead> <tbody> <tr v-for="item in search(keywords)"> <td>{{item.id}}</td> <td>{{item.name}}</td> <td>{{item.ctime | dateFormat('')}}</td> <td><a @click.prevent="del(item.id)">删除</a></td> </tr> </tbody> </table> </div> </div> <script> Vue.filter('dateFormat', function (dateStr, pattern) { 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}`; if (pattern.toLowerCase() == 'yyyy-mm-dd') { return `${y}-${m}-${d}`; } else { var hh = dt.getHours(), mm = dt.getMinutes(), ss = dt.getSeconds(); return `${y}-${m}-${d} ${hh}:${mm}:${ss}`; } }); </script>
私有
过滤器调用的时候采用就近原则，如果私有过滤器和全局过滤器名称一致，这时候优先调用私有过滤器。
示例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vue测试</title> <link href="css/bootstrap.min.css" rel="stylesheet"> <script src="js/vue.js"></script> <style> .table-content { padding-top: 20px; } .table-content a, .table-content a:hover { cursor: default; text-decoration: none; } </style> </head> <body> <div id="app"> <div class="panel panel-primary"> <div class="panel-heading">添加、删除、查询</div> <div class="panel-body form-inline"> <div class="form-group"> <label for="exampleInputId">Id：</label> <input type="text" class="form-control" id="exampleInputId" v-model="id"> </div> <div class="form-group"> <label for="exampleInputName">Name：</label> <input type="text" class="form-control" id="exampleInputName" v-model="name"> </div> <button type="submit" class="btn btn-primary" @click="add">添加</button> <div class="form-group"> <label for="searchName">搜索名称关键字：</label> <input type="text" class="form-control" id="searchName" v-model="keywords"> </div> </div> </div> <div class="table-content"> <table class="table table-striped table-bordered table-hover"> <thead> <tr> <th>Id</th> <th>Name</th> <th>Ctime</th> <th>operation</th> </tr> </thead> <tbody> <tr v-for="item in search(keywords)"> <td>{{item.id}}</td> <td>{{item.name}}</td> <td>{{item.ctime | dateFormat}}</td> <td><a @click.prevent="del(item.id)">删除</a></td> </tr> </tbody> </table> </div> </div> <div id="app2"> {{dt | dateFormat}} </div> <script> Vue.filter('dateFormat', function (dateStr, pattern) { 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}`; if (pattern && pattern.toLowerCase() == 'yyyy-mm-dd') { return `${y}-${m}-${d}`; } else { var hh = dt.getHours(), mm = dt.getMinutes(), ss = dt.getSeconds(); if (hh.toString().length < 2) { hh = '0' + hh; } if (mm.toString().length < 2) { mm = '0' + mm; } if (ss.toString().length < 2) { ss = '0' + ss; } return `${y}-${m}-${d} ${hh}:${mm}:${ss}`; } }); var vm = new Vue({ el: '#app', data: { id: '', name: '', keywords: '', user: [{ id: '1', name: '李琪琪', ctime: new Date() }, { id: '2', name: '小颖颖', ctime: new Date() }, { id: '3', name: '大黑熊', ctime: new Date() }] }, methods: { add() { this.user.push({id: this.id, name: this.name, ctime: new Date()}); this.id = ''; this.name = ''; }, del(id) { //在数组的some方法中，如果return true,就会立即终止对这个歌数组的循环。 // this.user.some((item, i) => { // if (item.id == id) { // this.user.splice(i, 1); // return true; // } // }); var index = this.user.findIndex(item => { if (item.id == id) { return true; } }); this.user.splice(index, 1); }, search(keywords) { // var newList = []; // this.user.forEach(item => { // if (item.name.indexOf(keywords) != -1) { // newList.push(item); // } // }); // return newList; return this.user.filter(item => { if (item.name.includes(keywords)) { return item; } }) } } }); var vm = new Vue({ el: '#app2', data: { dt: new Date() }, methods: {}, filters: { dateFormat: function (dateStr, pattern) { 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}`; if (pattern && pattern.toLowerCase() == 'yyyy-mm-dd') { return `${y}-${m}-${d}`; } else { var hh = dt.getHours(), mm = dt.getMinutes(), ss = dt.getSeconds(); if (hh.toString().length < 2) { hh = '0' + hh; } if (mm.toString().length < 2) { mm = '0' + mm; } if (ss.toString().length < 2) { ss = '0' + ss; } return `${y}-${m}-${d} ${hh}:${mm}:${ss}`; } } } }); </script> </body> </html>
附带提下：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实例指示的所有东西都会被解除绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。
图文助解
代码助解
公用代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vue测试</title> <script src="js/vue.js"></script> </head> <body> <div id="app"> <p id="testP">{{msg}}</p> </div> <script> var vm = new Vue({ el: '#app', data: { msg:'hello world' }, methods: { show(){ console.log('执行了show方法'); } } }); </script> </body> </html>
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数据已经保持同步了，都是最新的数据 }
