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. MVC与MVVM设计模式理解

    MVC设计模式(View和Model之间不能直接通信) MVC是一种架构模式,M表示Model,V表示视图View,C表示控制器Controller: Model负责存储.定义.操作数据.从网络中获取 ...

  2. no awt in java.libary.path

    缺少依赖包. linux下进入jdk安装路径/jre/lib/i386 使用ldd查看依赖包情况: ldd libawt.so 如果发现有not found的,就安装上,或者从jdk下查找,使用软连接 ...

  3. golang基础--map字典

    map 类似python语言中的dict(字典类型),以key-value形式存储数据 Key必须是支持==或!=比较运算的类型,不可以是函数,map或slice map查找比线性搜素快很多,但比使用 ...

  4. [PY3]——logging

    logging模块的logger.handler.filter.formatter Logger记录器 提供日志接口,供应用代码使用.logger最长用的操作有两类:配置和发送日志消息.可以通过log ...

  5. 功能------常用快捷键(在win10下)

    功能------win10 常用快捷键 在进行学习,记录,编写代码时,需要用到一些功能,用鼠标浪费时间,可以使用快捷键来快速的处理.方便操作. 以下内容分为两类.快捷键以及触控板类(不能享用鼠标) 快 ...

  6. Start transaction not working with Revit 2014

    You're right, it's not being used correctly. The Transaction needs to take place inside the Idling e ...

  7. docker 简单安装java web项目

    前言: Docker 是一个开源的应用容器引擎,基于 Go 语言 并遵从Apache2.0协议开源. Docker 可以让开发者打包他们的应用以及依赖包到一个轻量级.可移植的容器中,然后发布到任何流行 ...

  8. DOM-添加元素、节点

    createElement()方法能够根据参数指定的标签名称创建一个新元素,并返回新建元素的引用,用法如下 var element=document.createElement("tagNa ...

  9. CSS3 颜色属性

    关键字颜色 red 十六进制颜色 #FF0000 RGB颜色   rgb(255,0,0) 新增的颜色表示方法 RGBa: RGB代表光的三原色,Red.Green和Blue CSS3中可以增加一个值 ...

  10. 撩课-Web大前端每天5道面试题-Day17

    1.apply, call和bind有什么区别? 三者都可以把一个函数应用到其他对象上,注意不是自身对象． apply,call是直接执行函数调用,bind是绑定,执行需要再次调用． apply和ca ...