vue学习04 v-on指令

  1. v-on的作用是为元素绑定事件，比如click单击，dbclick双击

  2. v-on指令可简写为@

代码测试

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

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

    <title>Document</title>

</head>

<body>

    <!-- 2.html的结构 -->

    <div id="app">

        <input type="button" value="v-on指令" v-on:click="doIt">

        <input type="button" value="v-on指令" @click="doIt">

        <input type="button" value="v-on双击事件" @dblclick="doIt">

        <h3 @click="changeFood">{{ food }}</h3>

    </div>

    <!-- 1.开发环境版本 -->

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

    <!-- 3.创建vue实例 -->

    <script>

        var app = new Vue({

            el:"#app",

            data:{

                food: "西红柿炒鸡蛋"

            },

            methods:{

                doIt: function(){

                    alert("点我嘎哈！");

                },

                changeFood: function(){

                    console.log(this.food);

                    this.food+="好好吃!"

                }

            },

        })

    </script>

</body>

</html>

效果图

vue学习04 v-on指令的更多相关文章

  1. Vue学习之路5-v-model指令

    1. 指令释义 v-model在表单控件或者组件上创建双向绑定,本质上是负责监听用户的输入事件(onchange,onkeyup,onkeydown等,具体是哪个,还请查阅官方底层实现文档)以更新数据 ...

  2. Vue学习之路4-v-bind指令

    1. 定义 1.1 v-bind 指令被用来响应地更新 HTML 属性,其实它是支持一个单一 JavaScript 表达式 (v-for 除外). 2. 语法 2.1 完整语法:<span v- ...

  3. Vue学习系列(三)——基本指令

    前言 在上一篇中,我们已经对组件有了更加进一步的认识,从组件的创建构造器到组件的组成,进而到组件的使用,.从组件的基本使用.组件属性,以及自定义事件实现父子通讯和巧妙运用插槽slot分发内容,进一步的 ...

  4. vue学习-day02（自定义指令，生命周期）

    目录: 1.案例:品牌管理    2.Vue-devtools的两种安装方式    3.过滤器,自定义全局或私有过滤器    4.鼠标按键事件的修饰符    5.自定义全局指令:让文本框获取焦点   ...

  5. Vue学习之路8-v-on指令学习简单事件绑定之属性

    前言 上一篇文章以v-on指令绑定click事件为例介绍了v-on指令的使用方法,本文介绍一下v-on绑定事件的一些属性的使用方法. v-on绑定指令属性 .stop属性 阻止单击事件继续向上传播(简 ...

  6. Vue学习之路7-v-on指令学习之简单事件绑定

    前言 在JavaScript中任何一个DOM元素都有其自身存在的事件对象,事件对象代表事件的状态,比如事件在其中发生的元素.键盘按键的状态.鼠标的位置和鼠标按钮的状态等.事件通常与函数结合使用,函数不 ...

  7. Vue学习五：v-for指令使用方法

    本文为博主原创,未经允许不得转载: <!DOCTYPE html> <html lang="zh"> <head> <meta http- ...

  8. Vue学习二：v-model指令使用方法

    本文为博主原创,未经允许不得转载: <!DOCTYPE html> <html lang="zh"> <head> <script src ...

  9. vue学习(十七) 使用自定义指令 使文本框获得鼠标焦点

    需求:当我们进入某个页面,页面中的第一个input会自动获得焦点 光标闪烁,代表可输入 <div id="app"> //v-focus 是自定义的 <input ...

随机推荐

  1. 计算机网络-网络层（1）IPv4和IPv6

    IPv4数据报格式: 版本号 这4比特规定了数据报的IP 协议版本.通过查看版本号,路由器能够确定如何解释IP数据报的剩余部分. 首部长度 以4字节为单位,没有选项的首部长度为5*4=20字节 服务类 ...

  2. 关于H标签 DL DT DD标签的一个小故事

    看了一篇关于SEO论坛的论文,大概故事内容是:一个专业的销售公司,里面SEO  技术多多,可就是销售网站的SEO的情况极为恼火.这天,老板又招到了一个SEO,直接聘为SEO主管全权负责网站的SEO,并 ...

  3. Logistic回归分析之二元Logistic回归

    在研究X对于Y的影响时,如果Y为定量数据,那么使用多元线性回归分析(SPSSAU通用方法里面的线性回归):如果Y为定类数据,那么使用Logistic回归分析. 结合实际情况,可以将Logistic回归 ...

  4. Go语言从入门到高薪之路（一）-- 初识与安装

    为什么要学习Go语言? Go语言又称Golang,它是21世纪的编程语言,学好了就能拿高薪,拿了高薪就能实力装逼,有了实力就能泡妹子...(我就问你吊不吊,想不想学?) Go语言有什么特点和优势? G ...

  5. csp201909-2小明种苹果续

    /* 定义输入N 二维数组 输出T总数 D掉落棵树 E掉落组数 定义last记录上次掉落的编号,flag=1表示两次连续掉落,不掉落归零 spec=1表示1 2都掉落了,spec=2表示只有1掉落 对 ...

  6. unimrcp plugin 分析

    摘要: unimrcp 访问媒体资源是通过插件实现,社区的代码给出了demo plugin,但是距离一个生产插件还是有一段的距离.这边文章介绍插件的整个逻辑过程,以及如何实现我们自己的插件.

  7. jq cdn地址

    百度CDN支持版本2.0.3, 2.0.2, 2.0.1, 2.0.0,1.11.1, 1.10.2, 1.10.1, 1.10.0, 1.9.1, 1.9.0, 1.8.3, 1.8.2, 1.8. ...

  8. Android开发之数据存储——SharedPreferences基础知识详解，饿补学会基本知识，开发者必会它的用法。

    一.数据存储选项:Data Storage --Storage Options[重点] 1.Shared Preferences Store private primitive data in key ...

  9. 总结回顾js arr的常见方法以及相关的使用场景（一）

    Array对象方法 1.arr.concat() 连接两个或更多的数组,并返回结果. 连接数组中的值 连接两个数组 连接三个数组 2.arr.join() 把数组的所有元素放入一个字符串.元素通过指定 ...

  10. Netty学习笔记-入门版

    目录 Netty学习笔记 前言 什么是Netty IO基础 概念说明 IO简单介绍 用户空间与内核空间 进程(Process) 线程(thread) 程序和进程 进程切换 进程阻塞 文件描述符 文件句 ...