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. Spark本地配置

    1. 下载解压安装包 tar -xvf spark-2.0.2-bin-hadoop2.6.tgz tar -xvf scala-2.11.8.tgz 2. 修改Spark配置文件 cd spark- ...

  2. python数据类型和运算符

    一.python类型判断 type,isinstance type(变量或常量):返回数据类型 a = 23.3print(type(a))b = 2e3print(b, type(b))输出: &l ...

  3. java爬取图片示例

    爬虫是什么 这里引用一下 wiki 中关于 网络爬虫的定义,相信大家看过后会有一个清晰的认识 网络爬虫(英语:web crawler),也叫网络蜘蛛(spider),是一种用来自动浏览万维网的网络机器 ...

  4. C#封装定时执行任务类

    a.日常开发中经常会遇到定时去执行一些操作,比如定时更新数据.A类需要做我们写个Timer定时去取数据,这时候B类,C类也需要做这样的事情,是不是需要写三次重复代码? 这时候把timer封装成一个帮助 ...

  5. 人到中年的程序员，请提前准备好 Plan B

    中年程序员的生存现状已经是老生常谈的话题了,有多老呢?十年前,就有一位名叫"johnfx"的程序员谈过这个话题,并且专门为此写了一篇文章.随着中年程序员生存现状的话题再次成为热点, ...

  6. 单表千万行数据库 LIKE 搜索优化手记

    我们经常在数据库中使用 LIKE 操作符来完成对数据的模糊搜索,LIKE 操作符用于在 WHERE 子句中搜索列中的指定模式. 如果需要查找客户表中所有姓氏是“张”的数据,可以使用下面的 SQL 语句 ...

  7. JVM-Java创建对象过程

    关键字:类加载过程.内存分配 指针碰撞法.空间列表法.CAS.TLAB.初始化.对象头 Java对象创建方式(不包含数组和Class对象创建): new指令 反射调用 反序列化 对象创建过程 遇到ne ...

  8. 广度优先搜索（BFS）解题总结

    定义 广度优先搜索算法(Breadth-First-Search),是一种图形搜索算法. 简单的说,BFS是从根节点开始,沿着树(图)的宽度遍历树(图)的节点. 如果所有节点均被访问,则算法中止. B ...

  9. Python post请求模拟登录淘宝并爬取商品列表

    一.前言 大概是一个月前就开始做淘宝的爬虫了,从最开始的用selenium用户配置到selenium模拟登录,再到这次的post请求模拟登录.一共是三篇博客,记录了我爬取淘宝网的经历.期间也有朋友向我 ...

  10. redis在windows下安装教程

    安装过程 1.首先先把下载的压缩包解压到一个文件夹中2.打开cmd指令窗口3.输入你刚才解压的文件路径4.然后输入redis-server redis.windows.conf 命令接下来部署Redi ...