Vue学习笔记-03-事件绑定
文章目录一、Vue如何处理事件？1.1 v-on指令用法1.2 事件函数的调用方式一、Vue如何处理事件？1.1 v-on指令用法v-on指令用法：<button v-on:click='num++'>点击</button>v-on简写新式:<button @click='num++'>点击1</button>1.2 事件函数的调用方式直接绑定函数名
·
文章目录
一、Vue如何处理事件？
1.1 v-on指令用法
v-on指令用法：
<button v-on:click='num++'>点击</button>
v-on简写形式:
<button @click='num++'>点击1</button>
二、 事件函数的调用方式
2.1 直接绑定函数名称
<button @click='handle'>点击1</button>
2.2 调用函数
<button @click="handle()">点击2</button>
//1、直接绑定函数名称：
<button @click='handle'>点击1</button>
//2、调用函数
<button @click="handle()">点击2</button>
<script>
let vm=new Vue({
el:"#app",
data:{
num:0,
},
methods: {
handle:function(){
if(this === vm);
this.num++;
}
}
});
</script>
三、 事件修饰符
3.1 .stop 阻止冒泡
3.2 .prevent 阻止默认行为
<div v-on:click='handle0'>
<button v-on:click.stop='handle1'>点击1</button>
</div>
<a href="https://www.baidu.com" @click.prevent='handle2'>百度</a>
<script>
let vm = new Vue({
el:"#app",
data:{
num:0
},
methods: {
handle0:function(){
this.num++
},
handle1:function(){
// 原生JS阻止冒泡
// event.stopPropagation();
},
handle2:function(){
// 原生JS阻止默认行为
// event.preventDefault();
}
},
})
</script>
效果：
四、按键事件修饰符
官方文档：Vue.js 事件修饰符
4.1 .enter 回车键
<input v-on:keyup.enter='submit'>
4.2 .delete 删除键
<input v-on:keyup.delete='handle'>
实例：
<div id="app">
<form action="">
<div>
用户名:
<input type="text" v-on:keyup.delete='clearContent' v-model='uname'>
</div>
<div>
密码:
<input type="text" @keyup.enter='handleSubmit' v-model='pwd'>
</div>
<div>
<input type="button" @click='handleSubmit' value="提交">
</div>
</form>
</div>
<script>
let vm = new Vue({
el:"#app",
data:{
uname:'',
pwd:'',
age:0
},
methods: {
clearContent:function(){
// 按delete键的时候，清空用户名
this.uname = '';
},
handleSubmit:function(){
console.log(this.uname,this.pwd);
}
},
})
</script>
解读：
当在第一个文本框当中输入内容过后，按删除键，就会直接清空输入框
当在第二个文本框当中按下回车键，就会直接执行handleSubmit方法
效果：
4.3 自定义按键修饰符
全局 config.keyCodes 对象
Vue.config.keyCodes.f1 = 112
<div id="app">
<input type="text" v-on:keyup='handle' v-model='info'>
<input type="text" v-on:keyup.65='handle' v-model='info'>
<!-- <input type="text" v-on:keyup.a='handle' v-model='info'> -->
</div>
<script>
/*
事件绑定:自定义按键修饰符
规则：自定义按键修饰符名字是自定义的，但是对应的值必须是按键对应event.keyCode值
*/
Vue.config.keyCodes.a=65;
let vm = new Vue({
el:"#app",
data:{
info:''
},
methods:{
handle:function(event){
console.log(event.keyCode);
}
}
});
</script>
效果：
解读：
input框只会监听a键
五、属性绑定
5.1 v-bind指令用法
<a v-bind:href="url">百度</a>
缩写形式：
<a :href="url">百度1</a>
<body>
<div id="app">
<a v-bind:href="url">百度</a>
<a :href="url">百度1</a>
<button v-on:click='handle'>切换</button>
</div>
<script src="vue.js"></script>
<script>
var vm = new Vue({
el:"#app",
data:{
url :'https://www.baidu.com',
},
methods:{
handle:function(){
this.url = 'http://www.lzy.edu.cn';
}
}
});
</script>
</body>
六、v-model的低层实现原理分析
6.1 MVVM设计思想
6.2 v-model的低层实现原理分析
注：v-model可以实现数据的双向绑定
这里我们手写一个双向数据绑定的例子。
注：input 是一个DOM事件，当input框输入内容时触发。
<body>
<div id="app">
<div>{{msg}}</div>
<input type="text" v-bind:value='msg' v-on:input='handle'>
<!-- <input type="text" v-bind:value='msg' v-on:input='msg=$event.target.value'> -->
<!-- <input type="text" v-model='msg'> -->
</div>
<script src="vue.js"></script>
<script>
let vm = new Vue({
el:"#app",
data:{
msg:"hello",
},
methods:{
handle:function(event){
//使用输入域中的最新数据覆盖原来的数据
this.msg=event.target.value;
}
}
});
</script>
</body>
前往低代码交流专区
更多推荐
1
0- 0
已为社区贡献19条内容
所有评论(0)