Vue.js学习笔记：v-no绑定事件

最新推荐文章于 2024-04-19 18:32:11 发布

面条请不要欺负汉堡

最新推荐文章于 2024-04-19 18:32:11 发布

阅读量1.9k

点赞数 2

分类专栏： Vue+Element+axios+store(vuex) 文章标签： Vue.js学习笔记v-no绑定事件

本文链接：https://blog.csdn.net/gao_xu_520/article/details/76434119

版权

Vue+Element+axios+store(vuex) 专栏收录该内容

70 篇文章 29 订阅

订阅专栏

v-on 指令用于监听DOM事件形式如：v-on:click 缩写为 @click

<a v-on:click="doSomething"></a>


<a @click="doSomething"></a>

（一）.监听DOM事件

以用 v-on 指令监听 DOM 事件来触发一些 JavaScript 代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-on的使用</title>
   
</head>
<body>
<div id="example-1">
	<button @click="counter += 1">增加 1</button>
	<p>这个按钮被点击了 {{ counter }} 次。</p>
</div>
<script src="js/vue.js"></script>
<script>
	var example1 = new Vue({
		el: '#example-1',
		data: {
			counter: 0
		}
	})
</script> 
</body>
</html>

(二).方法处理器

直接把 JavaScript 代码写在 v-on 指令中是不可行的。因此 v-on 可以接收一个定义的方法来调用。,绑定一个单机事件的处理方法showMsg到methods中


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-on的使用</title>
   
</head>
<body>
<div id="box">
    <button class="btn btn-success" v-on:click="showMsg">{{msg}}</button>
</div>
<script src="js/vue.js"></script>
<script>
var vm = new Vue({
    el:'#box', //el指代选择器如 id，class，tagName
    data:{
        msg:'点击按钮', //这里仅仅是为了生硬的强化记忆vue双括号标签写法
        name:'Vue.js'
    },
    methods:{  //在methods对象中定义方法
        showMsg: function(e){
            //方法中的this，指代new Vue这个实例对象，可以再次验证下
            console.log(this);
            //event 是原生DOM事件
            console.log(e.target); //打印出事件源对象button
            console.log('Hello ' + this.name + ' !');
        }
    }
});
</script> 
</body>
</html>

（三）.内联处理器方法

除了直接绑定到一个方法里面，也可以用内联Javascript语句

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-on的使用</title>
</head>
<body>
<div id="example-1">
	<button class="btn btn-default" v-on:click="say('hello ,欢迎你学习vue.js')">
	hello ,欢迎你学习vue.js</button> 
</div>
<script src="js/vue.js"></script>
<script>
	var example1 = new Vue({
		el: '#example-1',
		methods: {
		    say: function (message) {
		      console.log(message)
		    }
		}
	})
</script> 
</body>
</html>

有时也需要在内联语句处理器中访问原生DOM事件，比如阻止链接跳转。可以用特殊变量$event把它传入方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-on的使用</title>
</head>
<body>
<div id="example-1">
    <a href="http://cn.vuejs.org/guide/events.html" @click="stop(test, $event)">打开Vue官网</a>
</div>
<script src="js/vue.js"></script>
<script>
	var example1 = new Vue({
		el: '#example-1',
		data:{
	        test:'阻止链接跳转'
	    },
	    methods:{
	        stop: function(test, e){
	            e.preventDefault();
	            alert(test);
	        }
	    }
	})
</script> 
</body>
</html>

点击a链接以后，页面还能跳转到vue官网吗？

(四).事件修饰符

在事件处理器中经常需要调用event.preventDefault()或event.stopPropagation()。尽管我们可以在 methods 中轻松实现这点，但更好的方式是：methods 只有纯粹的数据逻辑，而不是去处理 DOM 事件细节。

<a v-on:click.stop="doThis"></a>


<form v-on:submit.prevent="onSubmit"></form>


<a v-on:click.stop.prevent="doThat">


<form v-on:submit.prevent></form>


<div v-on:click.capture="doThis">...</div>


<div v-on:click.self="doThat">...</div>

（五）.键值修饰符

在监听键盘事件时，我们经常需要监测常见的键值。 Vue 允许为 v-on 在监听键盘事件时添加关键修饰符：

在此之前先了解keycode的相关知识

<input v-on:keyup.13="submit"> 最体可以看官网：https://cn.vuejs.org/v2/guide/events.html#事件修饰符

（六）为什么在HTML中监听事件？

（1）、扫一眼HTML模板便能轻松定位在Javascript代码里对应的方法。

（2）、因为你无需在Javascript里手动绑定事件，你的ViewModel代码可以是非常纯粹的逻辑，和DOM完全解耦，更易于测试。

（3）、当一个ViewModel被销毁时，所有的事件处理器都会被自动删除，你无需担心如何自己清楚它们

面条请不要欺负汉堡

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue.js学习笔记：v-no绑定事件

v-on 指令用于监听DOM事件形式如：v-on:click 缩写为 @click（一）.监听DOM事件以用 v-on 指令监听 DOM 事件来触发一些 JavaScript 代码 v-on的使用增加 1 这个按钮被点击了 {{ counter }} 次。 var example1 =
复制链接

扫一扫