"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. autocad2014一直显示正在检查许可

    64位CAD2014安装成功后启动时在检查许可卡住的解决方法,以下方法经本人测试,真实可行.1.下载CCcleaner.2.将CCcleaner设置成中文版,英文好的继续第三步.(设置方法:选项opt ...

  2. 设计模式-Template(行为模式) 采用 继承的方式 将算法封装在抽象基类中，在子类中实现细节。利用面向对象中的多态实现算法实现细节和高层接口的松耦合。

    以下代码来源: 设计模式精解-GoF 23种设计模式解析附C++实现源码 //Template.h class AbstractClass { public: virtual ~AbstractCla ...

  3. 给Java0基础的五个学习的思路?

    关于Java初学者来说,想学习Java教程,需求了解,根底打好才干学得更好,Java教程之学习Java的路线图的五个必经阶段,希望能对Java学习者有所帮忙. 第一个阶段-java根底阶段 1.jav ...

  4. WPF 精修篇 DataGrid 筛选

    原文:WPF 精修篇 DataGrid 筛选 DataGrid也可以分组 但是用的地方不多 就没写 筛选还是可以的 比如Datagrid数据量比较大 要做数据筛选 贴码 <DataGrid x: ...

  5. OpenFOAM——过渡管中的湍流

    本算例来自<ANSYS Fluid Dynamics Verification Manual>中的VMFL016:Turbulent Flow in a Transition Duct 一 ...

  6. 想成为Python高手，必须看这篇爬虫原理介绍！（附29个爬虫项目）

    互联网是由一个个站点和网络设备组成的大网,我们通过浏览器访问站点,站点把HTML.JS.CSS代码返回给浏览器,这些代码经过浏览器解析.渲染,将丰富多彩的网页呈现我们眼前. 一.爬虫是什么? 如果我们 ...

  7. 图像处理-裁剪具有透明背景的png

    我遇到了需要裁剪具有透明背景的png的问题,用 https://www.yasuotu.com/editor 这个压缩图网站解决了问题. 这里可以选择裁剪的宽度和高度,记得点击确定按钮. 裁剪完成后, ...

  8. WPF 使用SetParent嵌套窗口

    有点类似与Winform的MDI窗口. 使用函数为SetParent和MoveWindow(经常配合). [DllImport("user32.dll", SetLastError ...

  9. C#数组1

    using System; namespace ConsoleApp3 { class Program { static void Main(string[] args) { , , , , , }; ...

  10. css利用padding-top设置等比例遇到的问题

    外层盒子如果设置了左右margin,外层盒子设置对应比例的时候,是按外层盒子的宽+两边的margin算做横向总长度的,不是只算宽度的.