"v-on:"可以简写为"@"

"click"单击

"dblclick"双加

代码:

<!doctype html>

<html lang="en">

<head>

    <meta charset="UTF-8">

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

    <title id="title">{{title}}</title>

</head>

<body>

<div id="ask"><!--vue不能控制body和html的标签-->

    <ul>

        <li v-for="(v,k) in list">

           {{v.id}} ===== {{v.content}}

            <button @click="remove(v.id)">单击</button>

            <button @dblclick="remove(v.id)">双击</button>

        </li>

    </ul>

</div>

<script>

    var vue = function (options){new Vue(options)};

    vue({

        el:'#title',

        data:{

            title:'Vue 事件的基本使用与语法差异'

        }

    });

    var app = vue({

        el:'#ask',

        data:{

            search_content:'',

            content:'',

            list:[

                {'id':3,'content':'hello'},

                {'id':5,'content':'简单记录'},

                {'id':2,'content':'个人博客'},

                {'id':1,'content':'学习笔记'},

                {'id':4,'content':'想学什么学什么 '}

            ]

        },

        methods:{

            remove(k){

                console.log(k);

            }

        }

    });

</script>

</body>

</html>

Vue 事件的基本使用与语法差异的更多相关文章

  1. C#与Java的语法差异

    C#与Java的语法差异C与Java的语法差异前言程序结构基本语法数据类型字符串变量与常量运算符判断语句循环语句访问权限方法数组结构枚举类继承多态运算符重载接口命名空间预处理器指令正则表达式异常IO泛 ...

  2. Vue事件绑定原理

    Vue事件绑定原理 Vue中通过v-on或其语法糖@指令来给元素绑定事件并且提供了事件修饰符,基本流程是进行模板编译生成AST,生成render函数后并执行得到VNode,VNode生成真实DOM节点 ...

  3. Vue的基本使用和模版语法

    Vue的基本使用和模版语法 一.Vue概述 Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架 vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目 ...

  4. Sqlite基础及其与SQLServer语法差异

    1 TOP 这是一个大家经常问到的问题,例如在SQLSERVER中可以使用如下语句来取得记录集中的前十条记录: SELECT TOP 10 * FROM [index] ORDER BY indexi ...

  5. vue 2.0 无法编译ES6语法

    # vue2.0 webpack 无法编译 ES6 语法 之前在使用 vue 1.x 时用 vue-loader@8.0.0 版本可以正常打包vue的代码,包括ES6语法也能正常转为ES5语法,但是当 ...

  6. C++、Java语法差异对照表

    C++.Java语法差异对照表 C++ and Java Syntax Differences Cheat Sheet First, two big things--the main function ...

  7. Kotlin VS Java：基本语法差异

    Kotlin比Java更年轻,但它是一个非常有前途的编程语言,它的社区不断增长. 每个人都在谈论它,并说它很酷. 但为什么这么特别? 我们准备了一系列文章,分享我们在Kotlin开发Android应用 ...

  8. Vue—事件修饰符

    Vue事件修饰符 Vue.js 为 v-on 提供了事件修饰符来处理 DOM 事件细节,如:event.preventDefault() 或 event.stopPropagation(). Vue. ...

  9. vue 事件上加阻止冒泡 阻止默认事件

    重点 vue事件修饰符 <!-- 阻止单击事件冒泡 --> <a v-on:click.stop="doThis"></a> <!-- 提 ...

随机推荐

  1. js a 标签 通过download 实现下载功能

    download 属性规定被下载的超链接目标. 在 <a> 标签中必须设置 href 属性. 该属性也可以设置一个值来规定下载文件的名称.所允许的值没有限制,浏览器将自动检测正确的文件扩展 ...

  2. CSharpGL(54)用基于图像的光照(IBL)来计算PBR的Specular部分

    CSharpGL(54)用基于图像的光照(IBL)来计算PBR的Specular部分 接下来本系列将通过翻译(https://learnopengl.com)这个网站上关于PBR的内容来学习PBR(P ...

  3. electron应用生成exe程序并打包过程记录

    1.写好应用程序后,安装 electron-packager 在 package.json 文件中加入配置项目 "scripts": { "build": &q ...

  4. 教妹学 Java：难以驾驭的多线程

    00.故事的起源 “二哥,上一篇<集合>的反响效果怎么样啊?”三妹对她提议的<教妹学 Java>专栏很关心. “这篇文章的浏览量要比第一篇<泛型>好得多.” “这是 ...

  5. Kafka常见错误整理（不断更新中）

    1.UnknownTopicOrPartitionException org.apache.kafka.common.errors.UnknownTopicOrPartitionException: ...

  6. 公益：开放一台Nacos服务端给各位Spring Cloud爱好者

    之前开放过一台公益Eureka Server给大家,以方便大家在阅读我博客中教程时候做实验.由于目前在连载Spring Cloud Alibaba,所以对应的也部署了一台Nacos,并且也开放出来,给 ...

  7. SpringMVC入门 -- 参数绑定

    一.REST与RESTful 1.简介 (1)REST(Representational State Transfer):表现层状态转移,一种软件架构风格,不是标准.REST描述的是在网络中clien ...

  8. MySQL中日期和时间类型

    1 日期类型 MySql中关于日期的类型有Date/Datetime/Timestamp三种类型. 日期赋值时,允许"不严格"语法:任何标点符都可以用做日期部分或时间部分之间的间割 ...

  9. MySQL 部署分布式架构 MyCAT (五)

    分片(水平拆分) 4.全局表 业务使用场景: 如果你的业务中有些数据类似于数据字典,比如配置文件的配置, 常用业务的配置或者数据量不大很少变动的表,这些表往往不是特别大, 而且大部分的业务场景都会用到 ...

  10. windows10 设置 socks5 代理

    这个很多年前就是这种方式了,最近配置又忘了,今天备份一下: 方法1: 方法2: 原文链接 如果能帮助到你,希望能点击右下角推荐,感谢!