Vue学习之路第六篇：v-on
v-on指令用来触发页面事件的指令。
<body>
<div id="app">
<button v-on:click="show()">点击</button>
</div> <script type="text/javascript">
var vm = new Vue({
el : "#app",
data : {},
methods:{
show:function(){
alert('aa');
}
}
});
</script>
</body>
如上代码，指令书写格式为：v-on:事件名称，不要忘记书写:，等于号后面的内容是Vue对象里声明的方法。
在Vue对象里，我们添加了一个新的属性，叫做methods，它用来声明方法对象，其中show即为我们声明的方法对象。
运行结果：
在Vue中，我们还可以对v-on进行简化，用@来代替，效果是一样的，代码如下所示：
<button @click="show()">点击</button>
除了click事件，我们还可以定义其他的一些常用事件，如：
mouseover：鼠标放上事件
change：内容改变
dblclick：双击事件
focus：聚焦事件
接下来讲解一个ECMAScript6的小知识点：方法的定义
//之前的写法
show:function(){
alert('aa');
} //ECMAScript6的新写法
show(){
alert('aa');
}
简单了很多，大家都可以自己尝试一下。
每天进步一点点！
Vue学习之路第六篇：v-on的更多相关文章
- Vue学习之路第七篇：跑马灯项目实现
前面六篇讲解了Vue的一些基础知识,正所谓:学以致用,今天我们将用前六篇的基础知识,来实现类似跑马灯的项目. 学前准备: 需要掌握定时器的两个函数:setInterval和clearInterval以 ...
- Vue学习之路第三篇：插值表达式和v-text的区别
上一篇说到插值表达式有一个问题: 页面频繁刷新或者网速加载很慢的时候,页面会先出现“{{ msg }}”,再一闪而过出现真实的数据. 对于这个问题Vue给予了解决办法,看具体事例. <div i ...
- vue学习指南：第六篇(详细) - Vue的组件 component
1. 什么是组件?有两种解释 1. 第一种解释: 什么是组件? 1. 组件是 vue 中的一个可复用的实例,所以new Vue() 是vue中最大的那个组件(根组件),有名字,使用的时候以单标签或双标 ...
- Vue学习之路第二十篇：Vue生命周期函数-组件创建期间的4个钩子函数
1.每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如,需要设置数据监听.编译模板.将实例挂载到 DOM 并在数据变化时更新 DOM 等.同时在这个过程中也会运行一些叫做生命周期钩子的函数 ...
- Vue学习之路第十一篇：为页面元素设置class类样式
1.class为页面元素的一个属性,通过前面第五篇的内容可知,操作属性需要使用到v-bind指定(也可简写为 :). 2.先来看一个简单的页面样式内容: <!DOCTYPE html> & ...
- Vue学习之路第十篇：简单计算器的实现
前面九篇讲解了vue的一些基础知识,正所谓:学以致用,今天我们将用前九篇的基础知识,来模拟实现计算器的简单功能,项目价值不高,纯粹是为了加深掌握所学知识. 学前准备: 需要掌握JavaScript的e ...
- Vue学习之路第八篇：事件修饰符
学习准备: ①.顾名思义,“事件修饰符”那么肯定是用来修饰事件,既然和事件有关系,那么肯定和“v-on”指令(也可简写为:@)有关系了. ②.事件修饰符有以下几类: .stop:阻止冒泡 .preve ...
- Vue学习之路第五篇：v-bind
v-bind:是Vue提供的用于绑定html属性的指令. html中常见的属性有:id.class.src.title.style等,他们都是以 名称/值对 的形式出现,如:id="firs ...
- Vue学习之路第四篇：v-html指令
上一篇我们讲解了两种方式,把Vue对象的数据展示在页面上: 1.插值表达式 2.v-text指令 但是如果我们展示的数据包含元素标签或者样式,我们想展示标签或样式所定义的属性作用,该怎么进行渲染,比如 ...
随机推荐
- /proc/vmstat 详解
参考 #cat /proc/vmstat nr_free_pages 20223354 nr_alloc_batch 899 nr_inactive_anon 393025 nr_active_ano ...
- 利用UNIX时间戳来计算ASP的在线时间
<%@LANGUAGE="VBSCRIPT" CODEPAGE="65001"%><!DOCTYPE html PUBLIC "-/ ...
- 当li设置为line-block时，元素之间出现间隙的原因和解决方法
原因 因为浏览器默认把inline元素之间的空白符(Tab.空格.换行)渲染成一个空格.而如下述代码,两个li元素之间的换行符被渲染成一个空格,则元素之间产生了间隙. 用Chrome浏览器将场景模拟出 ...
- CF528D Fuzzy Search (生成函数+FFT)
题目传送门 题目大意:给你两个只包含A,G,C,T的字符串$S$,$T$,$S$长$T$短,按照如下图方式匹配 解释不明白直接上图 能容错的距离不超过$K$,求能$T$被匹配上的次数 $S$串同一个位 ...
- 找不到javax.servlet.http.HttpServletResponse和javax.servlet.http.HttpServletRequest
导了个项目进eclipse,发现很多文件都报了错,错误提示是没有引入javax.servlet.http.HttpServletRequest和javax.servlet.http.HttpServl ...
- Tensorflow 之物体检测
1)安装Protobuf TensorFlow内部使用Protocol Buffers,物体检测需要特别安装一下. # yum info protobuf protobuf-compiler 2.5. ...
- 使用gson进行数据（集合数据）的转换 并且返回给前端 进行动态解析 并添加
后台使用gson转换工具把list集合数据 以json字符串的方式返回给前台 解压: 加入到工程中 前台页面进行数据解析时 需要把得到的字符串 转换为object数组 -------------- ...
- 用友ERP T6技术解析（六） 库龄分析
2.4 库存管理 2.4.1 库龄分析 介绍:库存账龄是在某时间节点,某种或某类存货的库存时间的加权平均值,跟库存周转率关系明显,库存周转率越高,库存账龄越低,可是二者又不是反比关系.不能简单把库 ...
- .NET开源的背后：是无奈，还是顺应潮流？
摘要:微软.NET的开源,让很多开发者欣喜若狂.同一时候也有很多人好奇其背后的故事,过去视开源为癌症的微软为什么会突然有这一举措,是出于无奈,还是顺应潮流,而这当中的种种也许能够用文中的六个观点来说明 ...
- ROS-Rviz-turtlebot3仿真信息查看
前言:Rviz是ROS自带的一种3D可视化工具. 一.安装turtlebot3功能包 1.1 安装依赖包 sudo apt-get install ros-kinetic-joy ros-kineti ...