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. 一步步用svg做一个声波扩散动画

    有个项目需要在某个坐标显示一个声波扩散(不知道这个表达对不对)的动画. 这种需求一般做法有几种,一种做成gif图片,然后贴上去,一种是用html+css3完成,要么就是画上去,这画又分两种,一种是Ca ...

  2. 使用DataTrigger来代替Triggerr

    普通的Trigger监听鼠标移入的代码如下: <Trigger Property="IsMouseOver" Value="true">     & ...

  3. curl的head小记

    CURLINFO_HEADER_OUT,如果启用会在curl_getinfo里得到发送的头信息 CURLINFO_HEADER 如果启用,会在结果里返回回应的消息头信息

  4. BI实战派：医疗BI项目落地方案

    任何BI项目面临的两大难题是项目价值和基础数据,BI项目应该给企业带来管理优化.业绩增长.医院面临的两大难题,一:绩效管理(奖金分配):二:医患关系:在医院开始自负盈亏时日常基本运营管理显得非常重要. ...

  5. 【云+社区极客说】新一代大数据技术：构建PB级云端数仓实践

    本文来自腾讯云技术沙龙,本次沙龙主题为构建PB级云端数仓实践 在现代社会中,随着4G和光纤网络的普及.智能终端更清晰的摄像头和更灵敏的传感器.物联网设备入网等等而产生的数据,导致了PB级储存的需求加大 ...

  6. 基于obs+nginx-rtmp-module搭建自己直播的系统

    前言 一句唠叨,工欲善其事,必先利其器,在程序员的工作里,搭建各种环境往往花费过多不必要的时间,这里建议搭建服务端环境时,尽量避开win.macos这种系统,个人比较推崇centos. 操作 下面以c ...

  7. 不会几个框架，都不好意思说搞过前端： React 入门实例教程

    现在最热门的前端框架,毫无疑问是 React . 上周,基于 React 的 React Native 发布,结果一天之内,就获得了 5000 颗星,受瞩目程度可见一斑. React 起源于 Face ...

  8. c语言----<项目>_小游戏<2048>

    2048 小游戏 主要是针对逻辑思维的一个训练. 主要学习方面:1.随机数产生的概率.2.行与列在进行移动的时候几种情况.3.MessageBox的使用 #include <iostream&g ...

  9. 任务四十二：UI组件之日历组件（三）

    任务四十二:UI组件之日历组件(三) 面向人群: 有一定基础的同学 难度: 困难 重要说明 百度前端技术学院的课程任务是由百度前端工程师专为对前端不同掌握程度的同学设计.我们尽力保证课程内容的质量以及 ...

  10. JBoss 实战（1）

    转自:https://www.cnblogs.com/aiwz/p/6154594.html JBOSS的诞生 1998年,在硅谷SUN公司的SAP实验室,一个年轻人正坐在电脑前面思考,然后写着什么东 ...