02-Vue的事件修饰符，过滤器和生命周期函数
四.事件修饰符
4.1 .stop
阻止冒泡
html代码:
<style>
.heade{
height: 150px;
background:red ;
}
</style>
<div id="app">
<div class="heade" @click="divHeader">
<!-- 使用.stop 阻止冒泡 -->
<input type="button" value="按钮" @click.stop="butHeader" />
</div>
</div>
vue代码:
var vm =new Vue({
el:'#app',
data:{},
methods:{
divHeader() {
console.log("div");
},
butHeader() {
console.log("but")
}
}
})
4.2 .prevent
阻止默认行为
html代码:
<div id="app">
<a href="www.baidu.com" @click.prevent="linkclick">点击一下，我不想去百度</a>
</div>
vue代码:
var vm =new Vue({
el:'#app',
data:{},
methods:{
linkclick() {
console.log("不去百度，留在页面");
}
}
})
4.3 .capture
实现捕获触发事件
html代码:
<style>
.heade{
height: 150px;
background:red ;
}
</style>
<div id="app">
<div class="heade" @click.capture="divHeader">
<input type="button" value="按钮" @click="butHeader" />
</div>
</div>
vue代码:
var vm =new Vue({
el:'#app',
data:{},
methods:{
divHeader() {
console.log("div");
},
butHeader() {
console.log("but")
}
}
})
4.4 .self
实现只有当前元素，才会触发事件处理函数
只会阻止自身的冒泡行为 ，不会阻止其他的冒泡行为
html代码:
<style>
.heade{
height: 150px;
background:red ;
}
</style>
<div id="app">
<div class="heade" @click.self="divHeader">
<input type="button" value="按钮" @click="butHeader" />
</div>
</div>
vue代码:
var vm =new Vue({
el:'#app',
data:{},
methods:{
divHeader() {
console.log("div");
},
butHeader() {
console.log("but")
}
}
})
4.5 .once
只触发一次
html代码:
<div id="app">
<a href="www.baidu.com" @click.once="linkclick">点击一下，我不想去百度</a>
</div>
vue代码:
var vm =new Vue({
el:'#app',
data:{},
methods:{
linkclick() {
console.log("啊啊啊啊，只能不去一次");
}
}
})
4.5 自定义按键修饰符
Vue.config.keyCodes.名称 = 按键值
Vue.config.keyCodes.f2=113
五.过滤器
可被用作一些常见的文本格式化
过滤器可以用在两个地方：mustache 插值和 v-bind 表达式
过滤器也可以多次调用
html代码:
<div id="app">
<p>{{msg | MsgFormat('疯狂','123') | testFormat }}</p>
</div>
vue代码:
Vue.filter('MsgFormat',function(msg,arg,arg2){
//字符串的 replace 方法第一个参数可以写字符串 也可以写正则表达式
return msg.replace(/好/g,arg+arg2)
})
//可以多次调用过滤器
Vue.filter('testFormat',function(msg){
return msg+'==========='
})
var vm = new Vue({
el: "#app",
data: {
msg:'你好我好大家好'
},
methods: {}
})
过滤器调用的格式 {{ name | 过滤器的名称 }}
5.1 定义全局过滤器
通过一个简单的案例 --- 对时间进行格式化
过滤器 是通过 Vue.filter() 定义过滤器
html代码:
<div id="app">
<div class="container">
<div class="row">
<div class="span12">
<table class="table table-hover">
<thead>
<tr>
<th>
id
</th>
<th>
name
</th>
<th>
createtime
</th>
<th>
操作
</th>
</tr>
</thead>
<tbody v-for="item in list " :key='item.id'>
<!-- 自定义一个方法 将关键字 作为参数传递到方法里-->
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td>{{item.createtime | dateFormat}}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
vue代码:
var vm = new Vue({
el: "#app",
data: {
list: [{
id: 1,
name: '宝马',
info: '很好',
createtime:new Date()
},
{
id: 2,
name: 'LV',
info: '很贵',
createtime:new Date()
}
]
},
methods: {}
})
过滤器
参数一： 'dateFormat' : 过滤器名称
参数二: 一个方法 可以有很多参数
但是第一个参数 永远都是 过滤器 管道符 --> '|' 前面传过来的数据
Vue.filter('dateFormat',function(dateString,patter=""){//patter一定要传值
// 根据指定的字符串得到特定的时间
var dt=new Date(dateString)
// padStart() 字符串在前面填充
//yyyy-mm-dd 获取年月日 时分秒
var y=dt.getFullYear()
var m=(dt.getMonth()+1).toString().padStart(2,'0')
var d=dt.getDate().toString().padStart(2,'0')
var h=dt.getHours().toString().padStart(2,'0')
var mm=dt.getMinutes().toString().padStart(2,'0')
var ss=dt.getSeconds().toString().padStart(2,'0')
//toLowerCase():将 所有英文字母转换为小写
if(patter && patter.toLowerCase() == 'yyyy-mm-dd'){
return y+'-'+m+'-'+d
}else{
return y+'-'+m+'-'+d+' '+h+':'+mm+':'+ss
}
})
5.2 自定义私有过滤器
私有局部过滤器，只能在 当前 VM 对象所控制的 View 区域进行使用
html代码:
<div id="app"></div>
<div id="app2">
<p v-color="'red'" >{{dt | dateFormat}}</p>
</div>
vue代码:
var vm2=new Vue({
el:'#app2',
data:{
dt:new Date()
},
//定义一个 私有过滤器 私有过滤器都具有[过滤器名称]和[处理函数]
//过滤器 采用就近原则
filters:{
dateFormat:function(dt,patter=""){
// 根据指定的字符串得到特定的时间
var dt=new Date(dt)
//yyyy-mm-dd 获取年月日 时分秒
var y=dt.getFullYear()
var m=dt.getMonth()+1
var d=dt.getDate()
var h=dt.getHours()
var mm=dt.getMinutes()
var ss=dt.getSeconds()
//toLowerCase():将 所有英文字母转换为小写
if(patter && patter.toLowerCase() == 'yyyy-mm-dd'){
return y+'-'+m+'-'+d
}else{
return y+'-'+m+'-'+d+' '+h+':'+mm+':'+ss
}
}
}
})
六.生命周期函数
从Vue实例创建、运行、到销毁期间，总是伴随着各种各样的事件，这些事件，统称为生命周期！
生命周期钩子（就是生命周期事件）= 生命周期函数 = 生命周期事件
6.1 创建时期的生命周期函数
6.1.1 beforeCreate()
实例刚在内存中被创建出来，此时，还没有初始化好 data 和 methods 属性
6.1.2 created()
实例已经在内存中创建OK，此时 data 和 methods 已经创建OK，此时还没有开始 编译模板
6.1.3 beforeMount()
此时已经完成了模板的编译，但是还没有挂载到页面中
6.1.4 mounted()
此时，已经将编译好的模板，挂载到了页面指定的容器中显示
6.2 运行时期的生命周期函数
6.2.1 beforeUpdate()
状态更新之前执行此函数， 此时 data 中的状态值是最新的，但是界面上显示的 数据还是旧的，因为此时还没有开始重新渲染DOM节点
6.2.2 updated()
实例更新完毕之后调用此函数，此时 data 中的状态值 和 界面上显示的数据，都已经完成了更新，界面已经被重新渲染好了！
6.3 销毁时期的生命周期函数
6.3.1 beforeDestroy()
实例销毁之前调用。在这一步，实例仍然完全可用。
6.3.2 destroyed()
Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁
浙公网安备 33010602011771号