vue.js v-on事件使用，vue.js event事件绑定
================================
©Copyright 蕃薯耀 2018年12月04日
http://fanshuyao.iteye.com/
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>vue 事件绑定</title>
</head>
<body>
<div id="vue-div">
使用v-on:click
<img :src="imgUrl" style="width: 50px;height: 50px;display: block;" v-on:click="imgClick"/>
使用 @click
<img :src="imgUrl" style="width: 50px;height: 50px;display: block;" @click="imgClick2"/>
使用 @click，带参数
<img :src="imgUrl" style="width: 50px;height: 50px;display: block;" @click="imgClick3('张三')"/>
使用 @click，带Vue变量值
<img :src="imgUrl" style="width: 50px;height: 50px;display: block;" @click="imgClick3(msg)"/>
使用 @click，默认带event
<button @click="click4">测试按钮</button>
使用 @click，带event
<button @click="click5($event)">测试按钮$event</button>
<div style="margin-top : 30px;">
<div>事件冒泡：点击内层div，内层会提示，外层也会提示，即提示2次</div>
<div @click="outerClick" style="width:300px;height: 300px;background-color: red;">
<div @click="innerClick" style="width:100px;height: 100px;background-color: blue;"></div>
</div>
</div>
<div style="margin-top : 30px;">
<div>阻止事件冒泡：点击内层div，只提示一次（@click.stop）</div>
<div @click="outerClick2" style="width:300px;height: 300px;background-color: red;">
<div @click.stop="innerClick2" style="width:100px;height: 100px;background-color: blue;"></div>
</div>
</div>
<div style="margin-top : 30px;">
<div>阻止事件，即点击链接不跳转</div>
<a href="www.baidu.com" @click.prevent="preventGo">我要去百度</a>
</div>
<div style="margin-top : 30px;">
<div>keyup 回车事件</div>
第一种写法（@keyup.enter）：
<input type="text" @keyup.enter="enter"/>
第二种写法（@keyup.13）：
<input type="text" @keyup.13="enter"/>
</div>
</div>
<script type="text/javascript" src="../js/vue.min.js"></script>
<script type="text/javascript">
var app = new Vue({
el: "#vue-div",
data: {
msg : "aabbdDD-Hello-World",
imgUrl : "https://cn.vuejs.org/images/logo.png"
},
methods : {
imgClick(){
alert("imgClick()");
},
imgClick2(){
alert("22()");
},
imgClick3(params){
alert("参数："+params);
},
click4(event){
alert("参数："+event.target.innerHTML);
},
click5(event){
alert("参数："+event.target.innerHTML);
},
outerClick(event){
alert("outerClick");
},
innerClick(event){
alert("innerClick");
},
outerClick2(event){
alert("outerClick-22222222222222");
},
innerClick2(event){
alert("innerClick-222222222222222");
},
preventGo(){
alert("preventGo");
},
enter(event){
alert(event.target.value);
}
}
});
</script>
</body>
</html>
================================
©Copyright 蕃薯耀 2018年12月04日
http://fanshuyao.iteye.com/
相关推荐
在Vue.js中，可以使用v-on指令来监听事件，并可以使用.native修饰符来监听原生事件。 16. 运行以下代码，页面中的输出结果是二等。 在上面的代码中，使用了v-if和v-else-if指令来实现条件判断，根据score数据的值...
本文将深入探讨Vue.js中的v-on指令，它是用来绑定DOM事件并执行相应JavaScript代码的关键工具。 1. **v-on指令的使用** v-on指令用于监听DOM事件，例如点击、输入等，并在事件触发时执行指定的JavaScript代码。在...
它支持条件语句（v-if/v-else）、循环（v-for）、事件绑定（@event）和指令（v-bind/v-on）等。 3. 组件化：Vue.js的一个强大之处在于组件系统，它允许开发者将UI拆分为可复用的部分。组件有自己的数据、方法和生命...
- **使用v-on指令**：在模板中使用`v-on`指令来绑定事件。 - **使用事件修饰符**：如`.stop`、`.prevent`等。 - **使用方法引用**：在methods中定义方法，并在模板中引用。 #### 16. Vue.js中如何实现异步组件加载...
- **事件绑定**：`v-on`用于绑定事件处理程序，可简写为`@`。 - `(1)">+1</button>`：当点击按钮时，调用add方法并将1作为参数传递。 - `(1)">-1</button>`：同上，但调用的是subtract方法。 #### 四、Vue实例...
Vue.js 是一款非常流行的前端JavaScript框架，以其轻量级、易学易用和组件化的特点在Web开发领域占据了重要的地位。这份"Vue.js 最浅显易懂的API手册"是针对企业和初学者精心编写的，旨在帮助他们快速掌握Vue.js的...
Vue中可以使用`v-on:mousemove`指令来实现： ```html (${mousePosition.x}px) translateY(${mousePosition.y}px)` }"> ``` ```javascript data() { return { mousePosition: { x: 0, y: 0 }, }; }, methods: { ...
在这个“vue.js学习加油”的主题中，我们将深入探讨如何使用Vue.js中的`v-on`指令来处理事件。 首先，让我们理解`v-on`指令的基本用法。`v-on`用于监听DOM元素的事件，当事件触发时，它会调用我们在Vue实例中定义的...
`v-on`指令也可以与Vue的表达式配合使用，动态绑定事件处理函数： ```html <button v-on:click="handleClick(user.id)">Delete ``` 在上面的例子中，`handleClick`方法会接收到`user.id`作为参数。 ### 5. 内联...
Vue.js是一种广泛使用的前端JavaScript框架，它以组件化开发、易用性和灵活性著称。这款“Vue.js标准型+科学型计算器插件”是利用Vue.js的特性构建的一个多功能计算器应用，可以满足用户在标准计算和科学计算模式下...
- **模板语法与绑定**：Vue.js 的模板语法允许使用Mustache语法（{{ }}）进行文本绑定，还可以使用v-bind和v-on指令绑定元素属性和事件。 - **过滤器 Filter**：过滤器用于对数据进行转换，如`{{ message | ...
Vue.js 是一款轻量级的前端JavaScript框架，以其易学易用、高性能和组件化的特点在Web开发领域受到广泛欢迎。本课程“CSDN课程Vue.js知识点各个击破”旨在帮助开发者深入理解和掌握Vue.js的核心概念与技术，通过一...
Vue.js 的组件通信包括父组件向子组件传递数据（props）、子组件向父组件发送消息（emit）、以及在兄弟组件之间或跨级组件间进行通信，通常借助事件总线（Event Bus）或Vuex进行状态管理。组件中的props是用来接收父...
在Vue 2.0中，组件的定义更加规范，可以使用props接收父组件的数据，使用`v-on`或`@`处理事件，以及使用slots进行内容分发。组件间通信可以通过props、事件总线（Event Bus）或Vuex状态管理库实现。 Vue 2.0对生命...
3. **指令系统**：Vue提供了多种指令，如`v-if`（条件渲染）、`v-for`（循环渲染）、`v-bind`（动态绑定属性）和`v-on`（处理事件）等，它们在模板中增强HTML的功能。 4. **计算属性与侦听器**：计算属性是基于它们...
- 这里使用了Vue.js v2.5.17版本和vue-resource v1.5.1版本。 2. **数据模型定义** ```javascript data: { myData: [], // 存储搜索建议的数据 t1: "", // 输入框中的文本 now: -1 // 当前选中的下拉项索引 ...
Vue.js 为 v-on 提供了事件修饰符来处理 DOM 事件细节，如：event.preventDefault() 或 event.stopPropagation()。Vue.js通过由点(.)表示的指令后缀来调用修饰符。 <!-- 阻止单击事件冒泡 --> ...
在Vue.js中，`v-on`事件指令是用于处理DOM事件的关键工具，允许开发者将JavaScript方法与HTML元素的事件绑定在一起。本文将深入探讨`v-on`事件指令的基础用法、调用DOM事件、事件修饰符以及按键修饰符。 1. **基础...
将v-touch事件添加到元素时，它会使用完全声明性的语法在台式机和移动设备上运行。 与其他库不同，您无需在组件中添加任何特殊代码即可完成此工作。 您只需要全局注册库，它就可以在整个应用程序中启用新事件。 ...