一、v-on指令

v-on指令在Vue.js中用来绑定事件监听器。事件类型由参数指定。表达式可以是一个方法的名字或一个内联预计，如果没有修饰符也可以省略。

用在普通元素上时，只能监听原生DOM事件。用在自定义元素组件上时，也可以监听子组件触发的自定义事件。

用法：

v-on:事件类型="函数体"

例如：点击按钮的时候执行play事件

<button v-on:click="play">点击事件</button>

注意：

在使用v-on指令绑定事件的时候，如果要执行的是无参的函数，函数体可以加括号也可以不加括号，下面的两种写法是等价的：

<button v-on:click="play()">点击事件</button>

等同于

<button v-on:click="play">点击事件</button>

但是，如果要传递参数，则必须加括号，例如：

<button v-on:click="play(item)">点击事件</button>

上面的例子是给play函数传递item参数。

注意：v-on的缩写@

上面的代码等同于下面的代码：

<button @click="play">点击事件</button>

代码示例如下：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>v-on指令</title>

    <!--引入vue.js-->

    <script src="node_modules/vue/dist/vue.js" ></script>

    <script>

       window.onload=function(){

           // 构建vue实例

           new Vue({

               el:"#my",

               data:{

                   age:30

               },

               // 方法

               methods:{

                   //无参

                   play:function(){

                        this.age=40;

                   },

                   // 有参

                   playWithPara:function(para){

                         this.age=para;

                   }

               }

           })

       }

    </script>

</head>

<body>

    <div id="my">

         <h1>年龄:{{age}}</h1>

         <button @click="age = 20">设置年龄为20</button>

         <button @click="play">设置年龄为40</button>

         <button @click="playWithPara(50)">根据参数设置年龄</button>

    </div>

</body>

</html>

一个按钮也可以同时绑定多个事件，例如：

<button v-on="{mouseover:onOver,mouseout:onOut}">绑定多个事件</button>

上面我们通过对象的方式绑定多个事件，对象中的键是事件的名称， 值是methods中的成员属性方法

对应的方法：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>v-on指令</title>

    <!--引入vue.js-->

    <script src="node_modules/vue/dist/vue.js" ></script>

    <script>

       window.onload=function(){

           // 构建vue实例

           new Vue({

               el:"#my",

               data:{

                   age:30

               },

               // 方法

               methods:{

                   //无参

                   play:function(){

                        this.age=40;

                   },

                   // 有参

                   playWithPara:function(para){

                         this.age=para;

                   },

                   onOver:function(){

                      var current=document.getElementById("mouse");

                      current.innerText="鼠标移入";

                   },

                   onOut:function(){

                      var current=document.getElementById("mouse");

                      current.innerText="鼠标移出";

                   }

               }

           })

       }

    </script>

</head>

<body>

    <div id="my">

         <h1>年龄:{{age}}</h1>

         <h1 id="mouse">当前鼠标动作</h1>

         <button @click="age = 20">设置年龄为20</button>

         <button @click="play">设置年龄为40</button>

         <button @click="playWithPara(50)">根据参数设置年龄</button>

         <button v-on="{mouseover:onOver,mouseout:onOut}">绑定多个事件</button>

    </div>

</body>

</html>

Vue.js常用指令：v-on的更多相关文章

  1. 02: vue.js常用指令

    目录:Vue其他篇 01: vue.js安装 02: vue.js常用指令 目录: 1.1 vuejs简介 1.2 选择器:根据id.class等查找 1.3 静态绑定数据 data 1.4 插值 { ...

  2. Vue - vue.js 常用指令

    Vue - vue.js 常用指令 目录: 一. vuejs模板语法之常用指令 1. 常用指令: v-html 2. 常用指令: v-text 3. 常用指令: v-for 4. 常用指令: v-if ...

  3. vue.js常用指令

    本文摘自:http://www.cnblogs.com/rik28/p/6024425.html Vue.js的常用指令 上面用到的v-model是Vue.js常用的一个指令,那么指令是什么呢? Vu ...

  4. 【Vue】vue.js常用指令

    http://www.cnblogs.com/rik28/p/6024425.html Vue.js的指令是以v-开头的,它们作用于HTML元素,指令提供了一些特殊的特性,将指令绑定在元素上时,指令会 ...

  5. Vue.js常用指令：v-for

    一.什么是v-for指令 在Vue.js中,我们可以使用v-for指令基于源数据重复渲染元素.也就是说可以使用v-for指令实现遍历功能,包括遍历数组.对象.数组对象等. 二.遍历数组 代码示例如下: ...

  6. 新人成长之入门Vue.js常用指令介绍（一）

    写在前面 作为一个刚步入职场工作的新人,对于公司中所用的技术和框架基本上不懂,只能从最基础的开始做起,进入公司接触的第一个框架就是前端框架Vue.js,几个功能做下来,觉得Vue.js首先学习起来真的 ...

  7. Vue.js常用指令：v-model

    一.v-model指令 v-model 用来获取表单元素的值.对应input输入框获取的是输入的值,单选按钮.复选框.下拉框获取的是选择的状态. 代码示例如下: <!DOCTYPE html&g ...

  8. Vue.js常用指令：v-show和v-if

    一.v-show指令 v-show指令可以用来动态的控制DOM元素的显示或隐藏.v-show后面跟的是判断条件,语法如下: v-show="判断变量" 例如: v-show=&qu ...

  9. Vue.js常用指令：v-bind

    一.什么是v-bind指令 v-bind指令用于响应更新HTML特性,允许将一个或多个属性动态绑定到表达式.v-bind是应用在动态属性上面的. 二.语法 v-bind语法如下: v-bind:动态属 ...

随机推荐

  1. Win 10 启用 Net3.5

    dism.exe /online /enable-feature /featurename:NetFX3 /Source:H:\sources\sxs

  2. 3d角色模型 制作 全过程 。3d max 。3d role model making process.3d Max

    3d角色模型 制作 全过程 .3d max 3d role model making process.3 d Max 作者:韩梦飞沙 Author:han_meng_fei_sha 邮箱:313134 ...

  3. php 抽象类 静态 单体设计模式

    php oop----抽象类 抽象类机制使得子类可共用基类的某些信息,具体细节会留给子类,典型用在这样情形中,抽象类并不定义全部的方法,部分方法的实现推迟到子类继承抽象类时.它是介于接口和具体类间的一 ...

  4. 本地搭建Wordpress博客网站（Windows）

    最近在写一些web功能测试的一个主题分享,里边有一个分类是数据库测试,那么数据库测试有几个点的方法,其中有一个是学会看数据库的日志.由于公司内部的数据库日志我们测试人员暂时不开放查看,所以打算自己在本 ...

  5. Saltstack 安装 命令

    主机规划 10.0.0.21 master 10.0.0.22 minion 10.0.0.23 minion 基础环境 [root@10.0.0.21 ~]# cat /etc/redhat-rel ...

  6. phantomjs + python 打造一个微信机器人

    phantomjs + python 打造一个微信机器人 1.前奏   媳妇公司不能上网,但经常需要在公众号上找一些文章做一些参考,需要的时候就把文章链接分享给我,然后我在浏览器打开网页,一点点复制过 ...

  7. C#高级编程9 第16章 错误和异常

    C#高级编程9 第16章 错误和异常 了解这章可以学会如何处理系统异常以及错误信息. System.Exception类是.NET运行库抛出的异常,可以继承它定义自己的异常类. try块代码包含的代码 ...

  8. 转：甲骨文发布大数据解决方案 含最新版NoSQL数据库

    原文出处: http://www.searchdatabase.com.cn/showcontent_88247.htm 以下是部分节选: 最新发布的大数据创新成果包括: Oracle Big Dat ...

  9. Linux.Centos安装scp反复失败的解决方式

    现象 在A服务器用scp命令从B服务器拉文件时, 报找不到scp指令的错误 在A服务器运行 scp --help 发现是有指令的 在B服务器上 常规方式, 安装openssh-clients yum ...

  10. 第一章 flex单词计数程序

    学习Flex&Bison目标, 读懂SQLite中SQL解析部分代码 Flex&Bison简介Flex做词法分析Bison做语法分析 第一个Flex程序, wc.fl, 单词计数程序 ...