学习Vue 入门到实战——学习笔记（三）
1.过滤器
全局
私有
2.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数据已经保持同步了，都是最新的数据
}
以上是 学习Vue 入门到实战——学习笔记（三） 的全部内容， 来源链接： utcz.com/z/377644.html
