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. paramiko 模块 ---- python2.7

    模拟远程执行命令: ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 import paramiko   #设置日志记录 paramiko ...

  2. 【转】Camera 简介

    一.摄像头(CAMERA)又称为电脑相机.电脑眼等,它作为一种视频输入设备,在过去被广泛的运用于视频会议.远程医疗及实时监控等方面. 近年以来,随着互联网技术的发展,网络速度的不断提高,再加上感光成像 ...

  3. php实现视频拍照上传头像功能实例代码

    如果要在php中实现视频拍照我们需要借助于flash插件了,由flash拍出的确照片我们再通过php的$GLOBALS ['HTTP_RAW_POST_DATA']接受数据,然后保存成图片就可以了,下 ...

  4. 6. 二十不惑，ObjectMapper使用也不再迷惑

    一滴水,用显微镜看,也是一个大世界.本文已被 https://www.yourbatman.cn 收录,里面一并有Spring技术栈.MyBatis.JVM.中间件等小而美的专栏供以免费学习.关注公众 ...

  5. Java数据结构——2-3树

    定义2-3树是平衡的3路查找树,其中2(2-node)是指拥有两个分支的节点,3(3-node)是指拥有三个分支的节点.B-树是一种平衡的多路查找树,2-3树属于b-树,其也同样具有B-树的性质,如m ...

  6. .NetCore使用Redis，StackExchange.Redis队列，发布与订阅，分布式锁的简单使用

    环境:之前一直是使用serverStack.Redis的客服端,今天来使用一下StackExchange.Redis(个人感觉更加的人性化一些,也是免费的,性能也不会差太多),版本为StackExch ...

  7. 《Head First 设计模式》：外观模式

    正文 一.定义 外观模式提供了一个统一的接口,用来访问子系统中的一群接口.外观定义了一个高层接口,让子系统更容易使用. 要点: 外观模式将一个或数个类的复杂的一切都隐藏在背后,只显露出一个干净美好的外 ...

  8. js对象数组新增、修改时的验证是否重复的逻辑

    JS代码: // 定义数据集合 const persons = [ { id: 1, name: '张三' }, { id: 2, name: '李四' } ] console.log('') con ...

  9. 2个案例带你快速实现Response返回值

    今天先来学习一下Response的相关知识. 所有返回前台的内容其实都应该是Response的对象或者其子类,我们看到如果返回的是字符串直接可以写成return u'字符串内容'的形式,但是其实这个字 ...

  10. android开发之 listview中的item去掉分割线 隐藏分割线

    有三种方法: 1> 设置android:divider="@null" 2> android:divider="#00000000" #000000 ...