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指令 但是如果我们展示的数据包含元素标签或者样式,我们想展示标签或样式所定义的属性作用,该怎么进行渲染,比如 ...
随机推荐
- Centos 搭建activemq
Centos 搭建activemq 1,官方下载 http://activemq.apache.org/activemq-5122-release.html apache-activemq-5.15 ...
- [USACO12MAR]摩天大楼里的奶牛Cows in a Skyscraper （状态压缩DP）
不打算把题目放着,给个空间传送门,读者们自己去看,传送门(点我) . 这题是自己做的第一道状态压缩的动态规划. 思路: 在这题中,我们设f[i]为i在二进制下表示的那些牛所用的最小电梯数. 设g ...
- python第五周：模块、标准库
模块相关知识: 定义:用来从逻辑上组织python代码(变量.函数.类.逻辑:实现一个功能)本质就是以.py结尾的python文件(文件名:test.py,对应的模块名:test) 附注:包:是用来从 ...
- Google Spanner (中文版)
温馨提示:本论文由厦门大学计算机系林子雨翻译自英文论文,转载请注明出处,仅用于学习交流,请勿用于商业用途. [本文翻译的原始出处:厦门大学计算机系数据库实验室网站林子雨老师的云数据库技术资料专区htt ...
- ShareREC for iOS v1.0.4 已经公布
ShareREC for iOS v1.0.4 已经公布 版本号:v1.0.4 2015-3-13 1.新增视频列表的筛选排序功能 2.修复在開始录制后,没有调用结束录制直接进入社区崩溃问题 3.优化 ...
- NEU 1040 Count
1040: Count 时间限制: 1 Sec 内存限制: 128 MB提交: 59 解决: 23[提交][状态][讨论版] 题目描述 Many ACM team name may be very ...
- 37.Qt网络与通信
1 获取本机网络与通信 在网络应用中,经常需要获得本机的主机名.IP地址和硬件地址等网络信息.运用QHostInfo,QNetWorkInterface,QNetworkAddressEntry可获得 ...
- k8s 架构浅析
文章目录 目录 Kubernetes 的电梯间演讲 Kubernetes 的核心层级对象 Kubernetes 的组件架构 Kubernetes 的组件通信协议/接口 Kubernetes 的分层架构 ...
- 一种比较高级的方法也可以修改windows为默认启动系统
运行: sudo mv /etc/grub.d/30_os-prober /etc/grub.d/06_os-probersudo update-grub
- c#经典书籍
1.c#本质论 讲的很清楚,通俗易懂,且比较深入. 2.WPF编程宝典.ASP.NET MVC高级编程. 界面类图书 3.Microsoft.NET企业级应用架构设计 框架类图书 4.c#深入详解