对Vue.js之事件的绑定(v-on: 或者 @ )详解

1、Vue.js事件绑定的一般格式

v-on:click='function'

v-on:click/mouseout/mouseover/

@click

2、Vue.js事件绑定的实现

2.1 JavaScript代码

<script type="text/javascript" src="../js/vue-1.0.21.js"></script>

		<script type="text/javascript">
			window.onload = function() {
				vm = new Vue({
					el: '#app',
					data: {
						arrMsg: ['apple', 'orage', 'pear']
					},
					methods: {
						show: function() {
							alert(this.arrMsg);
						}
					}

				});
			}
		</script>

2.2 html代码

<div id="app" class="container">
 <hr /> 事件的绑定方式一,v-on指令
  <button type="button" v-on:click='show' class="btn btn-primary btn-default">显示数据</button>
 <hr/>事件的绑定方式二,简写方式
  <button type="button" @click="show" class="btn btn-success btn-default">显示数据</button>
 </div>

2.3 运行结果

3、完整代码

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" href="../css/bootstrap.min.css" rel="external nofollow" />
		<script type="text/javascript" src="../js/vue-1.0.21.js"></script>

		<script type="text/javascript">
			window.onload = function() {
				vm = new Vue({
					el: '#app',
					data: {
						arrMsg: ['apple', 'orage', 'pear']
					},
					methods: {
						show: function() {
							//使用this访问数据
							alert(this.arrMsg);
						}
					}

				});
			}
		</script>
	</head>

	<body>
		<!--形式-->
		<!--v-on:click="函数"
		v-on:click/mouseout/mouseover/dbclick-->

		<div id="app" class="container">
			<hr /> 事件的绑定方式一,v-on指令（要加一个:）
			<button type="button" v-on:click='show' class="btn btn-primary btn-default">显示数据</button>
			<hr/>事件的绑定方式二,简写方式（@）
			<button type="button" @click="show" class="btn btn-success btn-default">显示数据</button>
		</div>

	</body>

</html>

以上这篇对Vue.js之事件的绑定(v-on: 或者 @ )详解就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • vue.js绑定事件监听器示例【基于v-on事件绑定】

    vue.js绑定事件监听器示例【基于v-on事件绑定】

    本文实例讲述了vue.js绑定事件监听器.分享给大家供大家参考,具体如下: <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maxi

  • 浅谈Vue.js 组件中的v-on绑定自定义事件理解

    浅谈Vue.js 组件中的v-on绑定自定义事件理解

    每个 Vue 实例都实现了事件接口(Events interface),即: 使用 $on(eventName) 监听事件 使用 $emit(eventName) 触发事件 Vue的事件系统分离自浏览器的EventTarget API.尽管它们的运行类似,但是$on 和 $emit 不是addEventListener 和 dispatchEvent 的别名. 另外,父组件可以在使用子组件的地方直接用 v-on 来监听子组件触发的事件. 下面是一个文档上面的例子: 2017年4月11日更新 <d

  • 浅谈Vue.js中的v-on(事件处理)

    浅谈Vue.js中的v-on(事件处理)

    Vue.js的事件处理 监听事件 我们可以用 v-on 指令监听 DOM 事件来触发一些 JavaScript 代码. <div class="box"> {{msg}} <input type="button" value="按钮" v-on:click="msg+=1"/> </div> var vm = new Vue({ el:".box", data:{ msg

  • 对vue中v-on绑定自定事件的实例讲解

    关于官网vue中v-on绑定自定义事件的个人理解 对官网实例进行了一些修改,如下图: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>v-on绑定自定义事件</title> <script src="vue.js"></script> </head>

  • vue的事件绑定与方法详解

    一.在vue中,绑定事件,用v-on:事件类型, 如绑定一个点击事件, 我们可以这样子做 window.onload = function () { var c = new Vue({ el : 'body', methods : { say : function(){ alert( '欢迎学习vue' ); } } }); } <input type="button" value="点我" v-on:click="say();"/>

  • 详解vue.js的事件处理器v-on:click

    详解vue.js的事件处理器v-on:click

    用 v-on 指令监听 DOM 事件 注意:HTML5中不能使用v-on,换为@ (1)html代码: <div id="example"> <button v-on:click="greet">Greet</button> // 或者 <button @click="greet">Greet</button> </div> (2)js代码: var vm = new Vue

  • 基于vue.js中事件修饰符.self的用法(详解)

    .self可以理解为跳过冒泡事件和捕获事件,只有直接作用在该元素上的事件才可以执行. 代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>self</title> <script src="vue.js"></script> <!--'''''''

  • 对Vue.js之事件的绑定(v-on: 或者 @ )详解

    1.Vue.js事件绑定的一般格式 v-on:click='function' v-on:click/mouseout/mouseover/ @click 2.Vue.js事件绑定的实现 2.1 JavaScript代码 <script type="text/javascript" src="../js/vue-1.0.21.js"></script> <script type="text/javascript"&g

  • Vue.js分页组件实现：diVuePagination的使用详解

    Vue.js分页组件实现：diVuePagination的使用详解

    一.介绍 Vue.js 是什么 Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架.与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用.Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合.另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动. 二.创建初始化项目 这里不在详细说明,我们的分页演示只需要vue和vue-router就可以了,我们直接构建项目和设置配置. main.js:

  • 对vue中的事件穿透与禁止穿透实例详解

    在开发过程中经常遇到的一个场景,就是,页面弹窗,弹窗上有一个确定或者关闭按钮,这时,如果下方有一个按钮,那你点击弹窗的时候,也会触发弹窗下层的按钮事件,vue提供的解决方法就是直接在click.stop //阻止单击事件继续传播 <a v-on:click.stop="doThis"></a> js的解决办法是,直接在事件的方法中添加event.stopPropagation() //html <button>关闭</button> //

  • Vue.js实战之使用Vuex + axios发送请求详解

    前言 Vue 原本有一个官方推荐的 ajax 插件 vue-resource,但是自从 Vue 更新到 2.0 之后,官方就不再更新 vue-resource 目前主流的 Vue 项目,都选择 axios 来完成 ajax 请求,而大型项目都会使用 Vuex 来管理数据,所以这篇博客将结合两者来发送请求 Vuex 的安装将不再赘述,可以参考之前的Vue.js实战之Vuex的入门教程 使用 cnpm 安装 axios cnpm install axios -S 安装其他插件的时候,可以直接在 ma

  • Vue.js中让人容易忽略的API详解

    目录 nextTick v-model 语法糖 .sync 修饰符 $set 计算属性的 set 总结 nextTick nextTick 是 Vue.js 提供的一个函数,并非浏览器内置.nextTick 函数接收一个回调函数 cb,在下一个 DOM 更新循环之后执行.比如下面的示例: <template> <div> <p v-if="show" ref="node">内容</p> <button @clic

  • Vue组件之事件总线和消息发布订阅详解

    Vue组件之事件总线和消息发布订阅详解

    目录 简介 事件总线 消息的发布订阅 总结 简介 主要介绍事件总线的定义和编写方法和Vue是如何实现消息的订阅与发布的. 事件总线 事件总线是组件间通信的一种方式,适用于任意组件间的通信,比如毫不相干的两个组件.父子组件间.后代组件等等,都能通信. 事件总线有两个特性: 是一个vue组件实例或者一个vue实例,充当一个消息中转站,如果A.B组件想要通信,那么A组件存消息到中转站,B消息拿,或者反过来. 所有组件都要能获取到事件总线. 如果A.B组件间通信,如果A发送数据给B的情况下,需要以下步骤

  • Vue.js自定义事件的表单输入组件方法

    Vue.js使用自定义事件的表单输入组件 自定义事件可以用来创建自定义的表单输入组件,使用 v-model 来进行数据双向绑定.要牢记: <input v-model="something"> 这不过是以下示例的语法糖: <input v-bind:value="something" v-on:input="something = $event.target.value"> 所以在组件中使用时,它相当于下面的简写: <

  • 纯JS如何实现vue.js下的双向绑定功能

    纯JS如何实现vue.js下的双向绑定功能

    目录 首先说一下实现双向绑定的思路: 再说一下实现这些功能的js主要的方法有哪些: 最后需要创建哪些工具类? 实现vue双向绑定 看下面截图 这是一个普通的html文件,也并没有引入vue.js,是不是在代码中看到有些熟悉的地方?比如:"v-model","v-on:click",还有常用的"双花括号{{}}"赋值语句. 首先说一下实现双向绑定的思路: 一.创建一个自定义vue js对象,例如上面的wslVue 对象,初始化方法里面需要的参数有:

  • vue.js学习笔记之绑定style样式和class列表

    数据绑定一个常见需求是操作元素的 class 列表和它的内联样式.因为它们都是 attribute,我们可以用 v-bind 处理它们:只需要计算出表达式最终的字符串.不过,字符串拼接麻烦又易错.因此,在 v-bind 用于 class 和 style 时,Vue.js 专门增强了它.表达式的结果类型除了字符串之外,还可以是对象或数组. 一.绑定Class属性. 绑定数据用v-bind:命令,简写成: 语法:<div v-bind:class="{ active: isActive }&q

随机推荐