Vue的事件：

v-on: click/mouseover/mouseover/mousedown/dbclick/...

下面是点击事件介绍：

1.点击事件

<!DOCTYPE html>

<html>

<head>

    <title></title>

    <meta charset="utf-8">

    <script src="http://unpkg.com/vue/dist/vue.js"></script>

    <script type="text/javascript">

        window.onload = function(){

            var vm = new Vue({

                el:'#box',

                methods:{

                    show:function(){

                        alert('这是点击事件！');

                    }

                }

            });

        }

    </script>

</head>

<body>

    <div id="box">

        <input type="button" value="按钮" v-on:click="show()">

    </div>

</body>

</html>

当点击按钮的时候，弹出alert!

2.向数组添加元素

<!DOCTYPE html>

<html>

<head>

    <title></title>

    <meta charset="utf-8">

    <script src="http://unpkg.com/vue/dist/vue.js"></script>

    <script type="text/javascript">

        window.onload = function(){

            var vm = new Vue({

                el:'#box',

                data:{

                    arr:['1','2']

                },

                methods:{

                    add:function(){

                        var num = this.arr.length+1;

                        this.arr.push(num); //给数组累加1

                        //这里的this就是实例化后的对象vm

                    }

                }

            });

        }

    </script>

</head>

<body>

    <div id="box">

        <input type="button" value="按钮" v-on:click="add()"> <br />

        <ul>

            <li v-for="value in arr">{{value}}</li>

        </ul>

    </div>

</body>

</html>

结果，按一次列表累加1

Vue2学习笔记:v-on的更多相关文章

  1. Vue2 学习笔记1

    什么是Vue.js Vue.js 是目前最火的一个前端框架,React是最流行的一个前端框架(React除了开发网站,还可以开发手机App,Vue语法也是可以用于进行手机App开发的,需要借助于Wee ...

  2. Vue2 学习笔记3

    文中例子代码请参考github 定义Vue组件 什么是组件: 组件的出现,就是为了拆分Vue实例的代码量的,能够让我们以不同的组件,来划分不同的功能模块,将来我们需要什么样的功能,就可以去调用对应的组 ...

  3. vue2 学习笔记2

    文中例子代码请参考github 品牌管理案例 添加新品牌 <body> <div id="app"> <div class="panel p ...

  4. Vue2学习笔记:键盘事件

    Vue2键盘事件:keydown/keyup... 1.使用 <!DOCTYPE html> <html> <head> <title></tit ...

  5. Vue2学习笔记:v-for指令

    1.使用 <!DOCTYPE html> <html> <head> <title></title> <meta charset=&q ...

  6. vue2 学习笔记

    一.部署环境1.安装nodeJS -- 地址:https://nodejs.org/zh-cn/ 2.安装vue脚手架 (用于创建VUE项目的) 进入项目文件或者新建一个文件 npm install ...

  7. Vue2 学习笔记5

    文中例子代码请参考github watch属性的使用 考虑一个问题:想要实现 名 和 姓 两个文本框的内容改变,则全名的文本框中的值也跟着改变:(用以前的知识如何实现???) 监听data中属性的改变 ...

  8. Vue2 学习笔记4

    文中例子代码请参考github 父组件向子组件传值 组件实例定义方式,注意:一定要使用props属性来定义父组件传递过来的数据 <script> // 创建 Vue 实例,得到 ViewM ...

  9. Vue2学习笔记:计算属性（computed）

    参考:https://www.cnblogs.com/zycbloger/p/6428907.html

  10. Vue2学习笔记:组件（Component）

    组件 组件(Component)是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码.在较高层面上,组件是自定义元素, Vue.js 的编译器为它添加特殊功能.在有些情况 ...

随机推荐

  1. 【树】Path Sum II（递归）

    题目: Given a binary tree and a sum, find all root-to-leaf paths where each path's sum equals the give ...

  2. 转载：Spring学习总结

    地址:http://www.cnblogs.com/best/tag/Spring/

  3. visual studio 2008 快捷键

    Ctrl+m+Crtr+o折叠所有大纲Ctrl+M+Crtr+P: 停止大纲显示Ctrl+K+Crtr+C: 注释选定内容Ctrl+K+Crtr+U: 取消选定注释内容Ctrl+J : 列出成员 智能 ...

  4. Go语言学习笔记九： 指针

    Go语言学习笔记九: 指针 指针的概念是当时学C语言时了解的.Go语言的指针感觉与C语言的没啥不同. 指针定义与使用 指针变量是保存内存地址的变量.其他变量保存的是数值,而指针变量保存的是内存地址.这 ...

  5. logback 日志打印输出

    slf4j 其实是一个日志的抽象层, 其本质仍然需要真正的实现 他可以解决代码中独立于任意特定的日志类库, 可以减少很多维护日志的麻烦, 除此之外, 还有占位符的特性, {}, 类似于String#f ...

  6. boost::asio基本使用

    一.Asio网络库 截止到C++17,C++标准库都没有加入网络通信库.实际项目网络编程是非常常见的功能,直接使用操作系统API是低效率且不稳定的,比较好的方法是借助第三方成熟可靠的网络库.据我所知C ...

  7. Oracle数据库中的分页--rownum

    1. 介绍 当我们在做查询时,经常会遇到如查询限定行数或分页查询的需求,MySQL中可以使用LIMIT子句完成,在MSSQL中可以使用TOP子句完成,那么在Oracle中,我们如何实现呢? Oracl ...

  8. MJRefresh源码框架分析

    MJRefresh是一款非常优秀的刷新控件.代码简洁,优雅.今天有时间对源代码阅读了一下.对MJRefresh的宏观设计非常赞叹.所谓大道至简就是这样吧.   MJRefresh所采用的主要设计模式非 ...

  9. NAS DAS SAN 磁带机 tco

    部分摘录自: 百科:http://baike.baidu.com/link?url=7HOH3pJHfaxT-a01T0EhTZBnvvfMoyOZTthUbjMQM85LVxwfFP47YInuo1 ...

  10. Firebird reset SYSDBA password

    Firebird 重置超级管理员SYSDBA密码 首先登陆到服务器上(以下以Windows系统演示),命令行进入安装目录,我这里是 D:\-Installer\-Firebird\Firebird-3 ...