vue基础入门（2.1）
2.vue基础用法
2.1.事件处理
2.1.1.监听事件
使用v-on:事件名称 = '事件处理函数'的形式来监听事件，事件处理函数要写在methods后面的对象中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<button v-on:click="say">按钮</button>
</div>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
new Vue({
el:'#app',
data: {
message:'hello,nodeing'
},
methods:{
say(){
alert(this.message)
}
}
})
</script>
</body>
</html>
如果事件处理函数需要传参数的话，可以写成这样：
<button v-on:click="say('hi')">按钮</button>
2.1.2.事件修饰符
事件修饰符是帮助我们去处理事件相关细节的，例如，防止事件冒泡、阻止系统默认行为等，以前我们需要使用event.stopPropagation()、event.preventDefault()去实现,在vue中有更简洁的使用方式，.stop、.prevent就可以搞定，这样在方法中就只需要关注业务逻辑，不需要去关注事件细节了
1 .stop修饰符,阻止事件冒泡
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#box{
width: 300px;
height: 300px;
background-color: orangered;
}
#box-inner{
width: 100px;
height: 100px;
background-color: green;
}
</style>
</head>
<body>
<div id="app">
<div id="box" v-on:click="out">
<div id="box-inner" v-on:click.stop="inner"></div>
</div>
</div>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
new Vue({
el:'#app',
data: {
message:'hello,nodeing'
},
methods:{
inner(){
alert('inner')
},
out(){
alert('out')
}
}
})
</script>
</body>
</html>
2 .prevent 阻止默认行为
<a href="http://baidu.com" v-on:click.prevent>百度一下</a>
3 .capture 事件捕获
<div id="app">
<div id="box" v-on:click.capture="out">
<div id="box-inner" v-on:click="inner"></div>
</div>
</div>
4 .self 事件源是自身的时候触发
<div id="box" v-on:click.self="out">
<div id="box-inner" v-on:click="inner"></div>
</div>
5 .once 只触发一次
<div id="app">
<div id="box" v-on:click="out">
<div id="box-inner" v-on:click.once="inner"></div>
</div>
</div>
螺钉课堂视频课程地址：http://edu.nodeing.com
vue基础入门（2.1）的更多相关文章
- vue基础入门
Hello World <body> <!-- 在angularJS中用ng-model --> <!-- {{mseeage?message:11}}支持三元表达式 ...
- vue基础入门（4）
4.综合实例 4.1.基于数据驱动的选项卡 4.1.1.需求 需求说明: 1. 被选中的选项按钮颜色成橙色 2. 完成被选中选项下的数据列表渲染 3. 完成选项切换 4.1.2.代码实现 <!D ...
- vue基础入门（3）
3.组件基础 3.1.什么是组件? 3.1.1.理解组件 前端组件化开发是目前非常流行的方式,什么是前端组件化开发呢?就是将页面的某一部分独立出来,将这一部分的数据.视图.以及一些控制逻辑封装到一个组 ...
- vue基础入门（2.3）
2.3.样式绑定 2.3.1.绑定class样式 1.绑定单个class <!DOCTYPE html> <html lang="en"> <head ...
- vue基础入门（2.2）
2.2.基础指令 2.2.1.什么是指令 指令 (Directives) 是带有 v- 前缀的特殊特性,指令特性的值预期是单个 JavaScript 表达式,指令的职责是,当表达式的值改变时,将其产生 ...
- Vue学习笔记-Vue基础入门
此篇文章是本人在学习Vue是做的部分笔记的一个整理,内容不是很全面,希望能对阅读文章的同学有点帮助. 什么是Vue? Vue.js (读音 /vjuː/,类似于 view) 是一套构建用户界面的渐进式 ...
- Vue基础入门笔记
不是面向DOM进行编程,而是面向数据去编程.当数据发生改变,页面就会随着改变. 属性绑定(v-bind)和双向数据绑定(v-model) 模板指令(v-bind:)后面跟的内容不再是字符串而是: js ...
- vue基础入门（1）
1.vue初体验 1.1.vue简介 1.1.1.vue是什么? Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架,什么叫做渐进式呢?通俗的讲就是一层一层的,一步一 ...
- vue 基础入门（一）
app-1 :声明式渲染 app-2 :绑定元素特性 v-bind 特性被称为指令.指令带有前缀 v-,以表示它们是 Vue 提供的特殊特性. app-3 app-4 :条件与循环 app-5 ,ap ...
随机推荐
- Vue中keep-alive的使用
Vue中keep-alive的使用我总结的有两种方式应用: 首先简述一下keep-alive的作用,kee-alive可以缓存不活动的的组件.当组件之间进行相互切换的时候,默认会销毁,当重新切换回来时 ...
- （Java实现） 洛谷 P1319 压缩技术
题目描述 设某汉字由N X N的0和1的点阵图案组成,如下图.我们依照以下规则生成压缩码.连续一组数值:从汉字点阵图案的第一行第一个符号开始计算,按书写顺序从左到右,由上至下.第一个数表示连续有几个0 ...
- Java实现算法竞赛入门经典例题-蚂蚁
问题描述 一根长度为L厘米的木棍上有n只蚂蚁,每只蚂蚁要么朝左爬,要么朝右爬,速度为1厘米/秒. 当两只蚂蚁相撞时,二者同时掉头(掉头时间忽略不计). 给出每只蚂蚁的初始位置和朝向,计算T秒之后每只蚂 ...
- Java实现 蓝桥杯VIP 算法提高 交换Easy
算法提高 交换Easy 时间限制:1.0s 内存限制:512.0MB 问题描述 给定N个整数组成的序列,每次交换当前第x个与第y个整数,要求输出最终的序列. 输入格式 第一行为序列的大小N(1< ...
- java中Timer类的详细介绍（详解）
一.概念 定时计划任务功能在Java中主要使用的就是Timer对象,它在内部使用多线程的方式进行处理,所以它和多线程技术还是有非常大的关联的.在JDK中Timer类主要负责计划任务的功能,也就是在指定 ...
- java实现蓝桥杯约瑟夫环
n 个人的编号是 1~n,如果他们依编号按顺时针排成一个圆圈,从编号是1的人开始顺时针报数. (报数是从1报起)当报到 k 的时候,这个人就退出游戏圈.下一个人重新从1开始报数. 求最后剩下的人的编号 ...
- 运用Navicat for MySQL进行MSSQL数据转移MYSQL
当前不同数据库进行数据转移已经不是一件麻烦事情,特别是有很多很方便的工具,而最近我在搜集各种数据时候,也需要进行大量的数据转移,并且数据库和所转移的数据库表都不同,这次给大家介绍个最简单的方法,就是使 ...
- iOS－函数式编程 && 响应式编程概念
作为一个iOS developer,那么你一定用过Masnory / SnapKit: Masonry是一个OC开发中,非常好用的自动布局的第三方框架: SnapKit是Masonry团队打造的swi ...
- Grafana 插件地图Worldmap不显示
介绍 最近上了ELK 日志分析,想着手看下用户的分布情况,在kibana 中展示用户分布情况是没有问题的,但是索引添加到Granfana 中的话就无法展示. 问题描述 添加ES索引以后,map地图一片 ...
- 括号匹配-算法详细题解LeetCode
题目:有效的括号 给定一个只包括 '(',')','{','}','[',']' 的字符串,判断字符串是否有效. 有效字符串需满足: 左括号必须用相同类型的右括号闭合. 左括号必须以正确的顺序闭合. ...