文章目录
5、事件处理
监听事件–直接触发代码
<body>
<div id="box">
<p>{
{count}}</p>
<button @click="handleClick1()">click1--通过函数调用</button>
</div>
<script type="text/javascript">
var vm = new Vue({
el:'#box',
data:{
count:1
},
methods:{
handleClick1(){
this.count++;
}
},
})
</script>
</body>
显示效果：
方法事件处理器–写函数名
<body>
<div id="box">
<p>{
{count}}</p>
<button @click="handleClick2">click2--通过函数名</button>
</div>
<script type="text/javascript">
var vm = new Vue({
el:'#box',
data:{
count:1
},
methods:{
handleClick2(){
this.count++;
}
},
})
</script>
</body>
显示效果：
内敛处理器方法—执行函数表达式（尽量少用）
为了保障可读性所以尽量少用。
<body>
<div id="box">
<p>{
{count}}</p>
<button @click="count++">click3--通过表达式</button>
</div>
<script type="text/javascript">
var vm = new Vue({
el:'#box',
data:{
count:1
}
})
</script>
</body>
显示效果：
$event 事件对象：
下面两者同等
<input type="text" @input="handleInput($event)"/>
<input type="text" @input="handleInput"/>
举例：
<body>
<div id="box">
<input type="text" @input="handleInput($event)"/>
<!-- <input type="text" @input="handleInput"/>-->
</div>
<script type="text/javascript">
var vm = new Vue({
el:'#box',
data:{
},
methods:{
handleInput(ev){
console.log(ev.target.value)//获取input标签内输入的
}
},
})
</script>
</body>
事件修饰符
【1】阻止父组件触发----即阻止冒泡行为
- .stop
阻止前：
<body>
<div id="box">
<ul @click="handleulClick()">
<li @click="handleliClick1()">111</li>
<li>222</li>
<li>333</li>
</ul>
</div>
<script type="text/javascript">
var vm = new Vue({
el:'#box',
methods:{
handleliClick1(){
console.log('handleliClick1')
},
handleulClick(){
console.log("handleulClick")
}
},
})
</script>
</body>
阻止后：
<body>
<div id="box">
<ul @click="handleulClick()">
<!--为了阻止父组件触发---用.stop-----阻止冒泡----->
<li @click.stop="handleliClick1()">111</li>
<li>222</li>
<li>333</li>
</ul>
</div>
<script type="text/javascript">
var vm = new Vue({
el:'#box',
methods:{
handleliClick1(){
console.log('handleliClick1')
},
handleulClick(){
console.log("handleulClick")
}
},
})
</script>
</body>
【2】阻止默认行为
- .prevent
举例：
阻止前链接会自动跳转
<body>
<div id="box">
<a href="https://www.baidu.com" @click="handlAClick()">跳转页面</a>
</div>
<script type="text/javascript">
var vm = new Vue({
el:'#box',
methods:{
handlAClick(){
console.log("handlAClick")
}
},
})
</script>
</body>
阻止后链接不会跳转
<body>
<div id="box">
<!----用.prevent-----阻止默认行为----->
<a href="https://www.baidu.com" @click.prevent="handlAClick()">跳转页面</a>
</div>
<script type="text/javascript">
var vm = new Vue({
el:'#box',
methods:{
handlAClick(){
console.log("handlAClick")
}
},
})
</script>
</body>
【3】只触发本身
- .self
【4】自触发一次（一次之后就失效）
- .once 修饰符可自动解绑
阻止前：
<body>
<div id="box">
<ul @click.self="handleulClick()">
<!--为了阻止父组件触发---用.stop-----阻止冒泡----->
<li @click.stop="handleliClick1()">111</li>
<li>222</li>
<li @click="handleliClick3()">333</li>
</ul>
</div>
<script type="text/javascript">
var vm = new Vue({
el:'#box',
methods:{
handleliClick3(){
console.log('handleliClick3')
}
},
})
</script>
</body>
阻止后：
<body>
<div id="box">
<ul @click.self="handleulClick()">
<!--为了阻止父组件触发---用.stop-----阻止冒泡----->
<li @click.stop="handleliClick1()">111</li>
<li>222</li>
<li @click.once="handleliClick3()">333</li>
</ul>
</div>
<script type="text/javascript">
var vm = new Vue({
el:'#box',
methods:{
handleliClick3(){
console.log('handleliClick3')
}
},
})
</script>
</body>
按键修饰符
【1】按回车键触发
- .enter
只有当按下回车键的时候才会触发，其余情况不会触发。
<body>
<div id="box">
<p>todolist - <input type="text" @keydown.enter="handlekeyDown"></p>
</div>
<script type="text/javascript">
var vm = new Vue({
el:'#box',
methods:{
handlekeyDown(ev){
console.log('handlekeydown',ev.keyCode)
}
},
})
</script>
</body>
其实主要是根据keyCode来进行的操作
6、表单控件绑定/双向数据绑定
见《Vue基础学习笔记(六)之表单控件绑定/双向数据绑定》