<!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. mybatis-generator遇到到的问题

    1.Unknown system variable 'query_cache_size' https://blog.csdn.net/qq_21870555/article/details/80711 ...

  2. 百度的echarts报表数据直接显示

    最近在使用百度的echarts开发,在使用过程中,遇到点需求,就是希望显示的数据直接在图标上显示,而不是鼠标滑动以后才显示,于是百度搜了下相关的文章正好找到了,然后使用了这个方法是可以用的,所以这里记 ...

  3. 享元模式<Flyweight Pattern>

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

  4. 网络初级篇之OSPF（一）原理

    一.OSPF是什么 Open Shortest Path First, 开放最短路径优先协议,是一种开源的使用最短路径优先(SPF)算法的内部网关协议(IGP).常用于路由器的动态选路. 二.OSPF ...

  5. centos6.8 上传文件到amazon s3

    centos6.8 上传文件到amazon s3 0.参考 AWS CLI Cinnabd Reference Possible to sync a single file with aws s3 s ...

  6. python将str类型的数据变成datetime时间类型数据

    如下: import datetime date_str = '2019_05_09' date_date = datetime.date(*map(int, date_str.split('_')) ...

  7. spring-data-neo4j 4.2.4release文档概要

    Neo4j是一种开源的NoSQL图数据库,将数据以图(把一个个实体当作节点,连接节点的边表示节点间的关系)的形式保存,Neo4j也支持ACID事务管理.关系型数据库数据访问采用的是ORM(对象关系映射 ...

  8. mysql5.6新功能索引条件下推（转载）

    原文地址:http://www.cnblogs.com/zengkefu/p/5684101.html 一什么是"索引条件下推" "索引条件下推",称为 Ind ...

  9. Spring资源

    资源 官网:http://spring.io 文档:https://docs.spring.io/spring/docs/current/spring-framework-reference/.htt ...

  10. 一例基于thinkphp，jquery和bootstrap渲染的查询数据分页器

    对于某些查询记录很多的结果,web页面不得不采用分页器,现在奉上一例代码,其主要逻辑是:由页面的dom 节点发起ajax请求,返回的查询结果根据页面布局需要进行切片:并根据总记录数和页面展现的条数算出 ...