<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<style>

</style>
<script src="vue.js"></script>
<script>
window.onload=function(){
new Vue({
el:'#box',
data:{ //数据
arr:['apple','banana','orange','pear'],
json:{a:'apple',b:'banana',c:'orange'}
},
methods:{
add:function(){
this.arr.push('tomato');
}
}
});
};
</script>
</head>
<body>
<div id="box">
<input type="button" value="按钮" v-on:dblclick="add()">
<br>
<ul>
<li v-for="value in arr">
{{value}}
</li>
</ul>
</div>
</body>
</html>

vue简单事件的更多相关文章

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

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

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

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

  3. Vue.js-----轻量高效的MVVM框架（二、Vue.js的简单入门）

    1.hello vue.js! (1)引入vue.js <script type="text/javascript" src="js/vue.js"> ...

  4. 前端Vue框架-vuex状态管理详解

    新人报道!多多关照-多提宝贵意见 谢谢- vuex理解 采用集中式存储管理模式.用来管理组件的状态,并以自定义规则去观测实时监听值得变化. 状态模式管理理解 属性 理解 state 驱动应用的数据源 ...

  5. Vue成员与指令介绍

    一.Vue介绍 1.什么是vue 通过对框架的了解与运用程度,来决定其在整个项目中的应用范围, 可以独立完成前后端分离式web项目的渐进式JavaScript框架 2.为什么要学vue 三大主流框架之 ...

  6. Vue.js 和 MVVM 小细节

    MVVM 是Model-View-ViewModel 的缩写,它是一种基于前端开发的架构模式,其核心是提供对View 和 ViewModel 的双向数据绑定,这使得ViewModel 的状态改变可以自 ...

  7. wepack+sass+vue 入门教程（三）

    十一.安装sass文件转换为css需要的相关依赖包 npm install --save-dev sass-loader style-loader css-loader loader的作用是辅助web ...

  8. wepack+sass+vue 入门教程（二）

    六.新建webpack配置文件 webpack.config.js 文件整体框架内容如下,后续会详细说明每个配置项的配置 webpack.config.js直接放在项目demo目录下 module.e ...

  9. wepack+sass+vue 入门教程（一）

    一.安装node.js node.js是基础,必须先安装.而且最新版的node.js,已经集成了npm. 下载地址 node安装,一路按默认即可. 二.全局安装webpack npm install ...

随机推荐

  1. 第四篇 HTML 表单深入了解、注释和a标签的运用

    表单深入了解.注释和a标签的运用 注释,HTML中的注释格式: 开头  <!--  结束 -->   例子: <!-- <div>我被注释了</div>  - ...

  2. 享元模式<Flyweight Pattern>

    1.What-是什么?   享元模式是一种轻量级的结构型模式.旨在以共享的方式高效的支持大量的细粒度对象的复用.要求能够共享的对象必须是细粒度对象,这些对象比较相似,状态变化小. 2.Why-为什么? ...

  3. 2019-11-29-Roslyn-通过-NuGet-库修改应用程序入口函数

    title author date CreateTime categories Roslyn 通过 NuGet 库修改应用程序入口函数 lindexi 2019-11-29 08:37:49 +080 ...

  4. 【异常】Reason: Executor heartbeat timed out after 140927 ms

    1 详细异常 ERROR scheduler.JobScheduler: Error running job streaming job ms. org.apache.spark.SparkExcep ...

  5. C#异步编程研究学习（一）

    可以使用Func<T>或者Action<T>简单实现如: Func<string, string,string,string, int> func = new Fu ...

  6. xss技巧记录

    1.iframe的srcdoc属性 先演示一下 <iframe srcdoc="<script>alert(1)</script>"> 浏览器渲 ...

  7. poj2182 Lost Cows[BIT二分]

    blog题解鸽了许久了..本来说好的切一题写一个题解的说 一个$1 \sim n$数列,已知每个数前面比他小的数个数,试确定该序列. 相当的一道水题.可以发现数列最后一个数是首先可以确定下来的.然后把 ...

  8. django-视图层与模板层

    1.视图层 小白必会三板斧 1.HttpResponse return HttpResponse(‘字符串’) 2.render return render(request,‘HTML页面’ ,{‘n ...

  9. Acwing-102-最佳牛围栏(二分,实数)

    链接: https://www.acwing.com/problem/content/104/ 题意: 农夫约翰的农场由 N 块田地组成,每块地里都有一定数量的牛,其数量不会少于1头,也不会超过200 ...

  10. python---wav音频

    import pyaudio #导入库 import wave #导入wav音频库 import sys from PyQt5.QtWidgets import QApplication, QWidg ...