三、事件绑定
3.3 事件绑定:this关键字
- 在vue中,某一个成员需要使用另一个成员,需要通过
this
进行引用 - 示例:
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="./js/vue.js"></script>
</head>
<body>
<div id="app">
<input type="button" value="点我" @Click="m1">
</div>
</body>
</html>
<script>
new Vue({
el: '#app',
data: {
msg: '饺子八毛钱'
},
methods: {
m1(){
console.info(this.msg)
this.m2()
},
m2(){
console.info('奶茶十三元')
}
},
})
</script>
- 结果展示:
3.4 事件修饰符
<标签 v-on:事件.修饰符=”函数”></标签>
修饰符 | 描述 |
---|
.prevent | 阻止浏览器默认行为 |
.stop | 阻止浏览器事件冒泡 |
.once | 只触发1次 |
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="./js/vue.js"></script>
</head>
<body>
<div id="app">
<a href="http://www.czxy.com" @click.prevent="show">跳转</a>
</div>
</body>
</html>
<script>
new Vue({
el: '#app',
data: {
},
methods: {
show(){
alert('xxxxx');
}
},
})
</script>
- 结果展示:
示例2:stop
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="./js/vue.js"></script>
<style>
.outer{
background-color: red;
height: 200px;
width: 200px;
}
.inner{
background-color: green;
height: 100px;
width: 100px;
}
</style>
</head>
<body>
<div id="app">
<div class="outer" @click="outerFn">
<div class="inner" @click.stop="innerFn">
有stop
</div>
</div>
<br>
<div class="outer" @click="outerFn">
<div class="inner" @click="innerFn">
无stop
</div>
</div>
</div>
</body>
</html>
<script>
new Vue({
el: '#app',
data: {
},
methods: {
outerFn(){
alert('外层outer')
},
innerFn(){
alert('内层inner')
}
},
})
</script>
3.5 按键修饰符
- vue允许为 v-on 在监听键盘事件时, 使用按键修饰符, 约束事件的触发
- 键盘事件: keyup和keydown
<标签 v-on:事件.修饰符=”函数” ></标签>
按键修饰符 | 描述 |
---|
.enter | 回车键 |
.tab | Tab键 |
.delete (捕获 “删除” 和 “退格” 键) | Backspace键或Delete键 |
.esc | Esc键 |
.space | 空格键 |
.up | 上键 |
down | 下键 |
.left | 左键 |
.right | 右键 |
.ctrl | Ctrl键 |
.alt | Alt键 |
.shift | Shift键 |
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="./js/vue.js"></script>
</head>
<body>
<div id="app">
enter: <input type="text" @keyup.13="show" v-model="msg" >
shift+enter: <input type="text" @keyup.16.13="show" v-model="msg2" >
</div>
</body>
</html>
<script>
new Vue({
el: '#app',
data: {
msg: '',
msg2: ''
},
methods: {
show(){
console.info(this.msg)
console.info(this.msg2)
}
},
})
</script>
- 结果演示:
四、生命周期
4.1 生命周期是什么?
- Vue的生命周期, 就是Vue实例从创建到销毁的过程.
- 完整过程包含: 开始创建、初始化数据、编译模板、挂载Dom、渲染→更新→渲染、销毁
- vue生命周期含8步骤(有8个沟子函数):创建、挂载、更新、销毁
created()
创建后
mounted()
挂载后
4.2 生命周期流程:
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="./js/vue.js"></script>
</head>
<body>
<div id="app">
<input type="text" v-model="msg"> <br>
原始数据: {{msg}}
</div>
</body>
</html>
<script>
new Vue({
el: '#app',
data: {
msg: '嗯嗯'
},
beforeCreate(){
console.info('1.创建前')
},
created(){
console.info("2.创建")
},
beforeMount(){
console.info('3.挂载前')
},
mounted(){
console.info('4.挂载')
},
beforeUpdate(){
console.info('5.更新前')
},
updated(){
console.info('6.更新')
},
beforeDestroy(){
console.info('7.销毁前')
},
destroyed(){
console.info('8.销毁')
}
})
</script>
- 结果展示:
4.3 小结
属性名 | 执行时机 | 描述 |
---|
beforeCreate | 创建前 | Vue实例创建时触发, 一般不做操作 |
created | 创建后 | 挂载数据,绑定事件等之后,执行created函数一般可以获取初始数据 |
beforeMount | 挂载到页面前 | 已经创建虚拟dom, 准备渲染 |
mounted | 挂载到页面后 | 已经渲染真实dom |
beforeUpdate | 更新页面前 | |
updated | 更新页面后 | |
beforeDestroy | 销毁vue之前 | |
destroyed | 销毁之后 | |
五、综合案例:便签(todo)
5.1 需求:
- 需求1:文本框回车,完成事项添加
- 需求2:在“所有事项” 下面展示所有的事项
- 需求3:双击事项,该事项为已完成事项
- 需求4:通过单选按钮组过滤事项
5.2 代码 :
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="./js/vue.js"></script>
</head>
<body>
<div id="app">
<input type="text" placeholder="请输入需要完成事项" v-model="dosth" @keyup.13="add" > <br>
<div>
<input type="radio" value="all" name="todo" v-model="status" @change="todoFilter">全部
<input type="radio" :value="true" name="todo" v-model="status" @change="todoFilter">已完成
<input type="radio" :value="false" name="todo" v-model="status" @change="todoFilter"> 未完成 <br>
</div>
所有事项:<br>
<ul v-for="(item,index) in arrPart">
<li>
<div style="cursor:pointer" @dblclick="change(item)">
{{item.item}} ----- {{item.isok? '已完成':'未完成'}}
</div>
</li>
</ul>
</div>
</body>
</html>
<script>
new Vue({
el: '#app',
data: {
dosth:'',
arr:[],
arrPart:[],
status: 'all'
},
methods: {
add(){
this.arr.push({
item:this.dosth ,
isok:false
})
this.dosth = ''
this.arrPart = this.arr
this.todoFilter()
},
change(item){
if(item.isok == false){
item.isok = true
}
this.todoFilter()
},
todoFilter(){
this.arrPart = this.arr.filter(item=>{
if(this.status == 'all'){
return item;
}else {
if(item.isok == this.status){
return item;
}
}
})
}
}
})
</script>
5.3 展示效果