过滤

<html>
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>test-vuejs</title>
</head>
<body>
<ol id="app">
<li v-for="n in evenNumbers">{{ n }}</li>
</ol>
<script src="./js/vue/vue.js"></script> <script>
var vm = new Vue({
el: '#app',
data: {
numbers: [ 1, 2, 3, 4, 5 ]
},
computed: {
evenNumbers: function () {
return this.numbers.filter(function (number) {
return number % 2 === 0
})
}
}
}) </script>
</body>
</html>

监听事件

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

<html>
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>test-vuejs</title>
</head>
<body>
<div id="example-1">
<button v-on:click="counter += 1">增加 1</button>
<p>这个按钮被点击了 {{ counter }} 次。</p>
</div>
<script src="./js/vue/vue.js"></script> <script>
var example1 = new Vue({
el: '#example-1',
data: {
counter: 0
}
}) </script>
</body>
</html>

方法事件处理器

许多事件处理的逻辑都很复杂,所以直接把 JavaScript 代码写在 v-on 指令中是不可行的。因此 v-on 可以接收一个定义的方法来调用。

<html>
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>test-vuejs</title>
</head>
<body>
<div id="example-2">
<!-- `greet` 是在下面定义的方法名 -->
<button v-on:click="greet">Greet</button>
</div>
<script src="./js/vue/vue.js"></script> <script>
var example2 = new Vue({
el: '#example-2',
data: {
name: 'Jim'
},
// 在 `methods` 对象中定义方法
methods: {
greet: function (event) {
// `this` 在方法里指当前 Vue 实例
alert('Hello ' + this.name + '!')
// `event` 是原生 DOM 事件
alert(event.target.tagName)
}
}
})
// 也可以用 JavaScript 直接调用方法
example2.greet() // -> 'Hello Vue.js!' </script>
</body>
</html>

内联处理器方法

除了直接绑定到一个方法,也可以用内联 JavaScript 语句,传递参数

<html>
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>test-vuejs</title>
</head>
<body>
<div id="example-3">
<button v-on:click="say('hi')">Say hi</button>
<button v-on:click="say('what')">Say what</button>
</div>
<script src="./js/vue/vue.js"></script> <script>
var example3 = new Vue({
el: '#example-3',
methods: {
say: function (message) {
alert(message)
}
}
})
// 也可以用 JavaScript 直接调用方法
example3.say('Say hello') // -> 'Hello Vue.js!' </script>
</body>
</html>

有时也需要在内联语句处理器中访问原生 DOM 事件。可以用特殊变量 $event 把它传入方法:

<html>
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>test-vuejs</title>
</head>
<body>
<div id="example-4">
<button v-on:click="warn('小小的警告', $event)">Submit</button>
</div>
<script src="./js/vue/vue.js"></script> <script>
var example4 = new Vue({
el: '#example-4',
methods: {
say: function (message) {
alert(message)
},
warn: function (message, event) {
// 现在我们可以访问原生事件对象
if (event) {
alert(event.clientX)
} alert(message)
}
}
}) </script>
</body>
</html>

事件修饰符

在事件处理程序中调用 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"></a>
<!-- 只有修饰符 -->
<form v-on:submit.prevent></form>
<!-- 添加事件侦听器时使用事件捕获模式 -->
<div v-on:click.capture="doThis">...</div>
<!-- 只当事件在该元素本身(而不是子元素)触发时触发回调 -->
<div v-on:click.self="doThat">...</div>

按键修饰符

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

<!-- 只有在 keyCode 是 13 时调用 vm.submit() -->
<input v-on:keyup.13="submit">

记住所有的 keyCode 比较困难,所以 Vue 为最常用的按键提供了别名:

<!-- 同上 -->
<input v-on:keyup.enter="submit">
<!-- 缩写语法 -->
<input @keyup.enter="submit">

Vue进阶之事件处理器的更多相关文章

  1. 详解Vue 方法与事件处理器

      本篇文章主要介绍了详解Vue 方法与事件处理器 ,小编觉得挺不错的,现在分享给大家,也给大家做个参考.一起跟随小编过来看看吧 方法与事件处理器 方法处理器 可以用 v-on 指令监听 DOM 事件 ...

  2. 关于vue.js中事件处理器的练习

    html: <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8 ...

  3. Vue.js:事件处理器

    ylbtech-Vue.js:事件处理器 1.返回顶部 1. Vue.js 事件处理器 事件监听可以使用 v-on 指令: v-on <div id="app"> &l ...

  4. Vue 方法与事件处理器

    按键修饰符 在监听键盘事件时,我们经常需要检测 keyCode.Vue.js 允许为 v-on 添加按键修饰符: <!-- 只有在 keyCode 是 时调用 vm.submit() --> ...

  5. Vue.js学习 Item8 -- 方法与事件处理器

    方法处理器 可以用 v-on 指令监听 DOM 事件: <div id="example"> <button v-on:click="greet&quo ...

  6. Vue深度学习(4)-方法与事件处理器

    方法处理器 可以用 v-on 指令监听 DOM 事件: <div id="app"> <button v-on:click = "greet" ...

  7. vue事件处理器

    1.监听事件 可以用 v-on 指令监听 DOM 事件来触发一些 JavaScript 代码. 示例: <div id="example-1"> <button ...

  8. vue 事件处理器

    事件处理器 1.监听事件 可以用v-on指令监听DOM事件来触发一些js代码. 2.方法事件处理器 许多事件处理的逻辑都很复杂,所以直接把js代码写在v-on指令中是不可行的.因此v-on可以接受一个 ...

  9. Vue样式绑定和事件处理器

    一.样式绑定 class 与 style 是 HTML 元素的属性,用于设置元素的样式,我们可以用 v-bind 来设置样式属性. v-bind 在处理 class 和 style 时, 专门增强了它 ...

随机推荐

  1. React 第一天

    第一天 从webpack到babel再到React.js Vue是如何实现组件化的: 通过.vue文件,来创建对应的组件: ·template 结构 ·script 行为 ·style 样式 Reac ...

  2. Virtualenv入门基础教程

    本文目录: [TOC]虚拟环境简介 VirtualEnv用于在一台机器上创建多个独立的Python虚拟运行环境,多个Python环境相互独立,互不影响,它能够: 在没有权限的情况下安装新套件    不 ...

  3. vue-cli解析

    前言 这段时间,算是空出手来写几篇文章了.由于很久都没有时间整理现在所用的东西了,所以,接下来会慢慢整理出一些文档来记录前段时间的工作和生活. 这篇文章的主题是vue-cli的理解.或许,很多人在开发 ...

  4. Linux学习总结(11)——Linux文件查找

    Linux下的常用查找命令 locate whereis which find locate  -i, 忽略大小写  find  根据文件名或正则表达式搜索  -name    条件限制  -a 与条 ...

  5. pycharm第一个Python程序

    print ("Hello word!"); 这是Python3.xx的语法!

  6. MVC自定义错误日志异常处理

    MVC添加错误日志处理模块很简单,只要写个继承自HandleErrorAttribute的过滤器,重新OnException方法,贴个异常处理代码如下: public class ExceptionA ...

  7. Conditionals

    1. Modulus operator (%) The modulus operator works on integers and yields the remainder when the fir ...

  8. 安卓开发--WebView

    package com.zhangxi.test01; import android.app.Activity;import android.app.ProgressDialog;import and ...

  9. vue1.0父子、兄弟间 通信案例

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  10. jdk--rpm.bin文件安装, zip解压与创建

    3,执行命令赋予安装文件777权限: # cd /usr/java(mkdir java –此目录需要创建) ①jdk-1_5_0_16-linux-i586-rpm.bin文件安装 # chmod ...