vue简单事件
<!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简单事件的更多相关文章
- Vue学习之路8-v-on指令学习简单事件绑定之属性
前言 上一篇文章以v-on指令绑定click事件为例介绍了v-on指令的使用方法,本文介绍一下v-on绑定事件的一些属性的使用方法. v-on绑定指令属性 .stop属性 阻止单击事件继续向上传播(简 ...
- Vue学习之路7-v-on指令学习之简单事件绑定
前言 在JavaScript中任何一个DOM元素都有其自身存在的事件对象,事件对象代表事件的状态,比如事件在其中发生的元素.键盘按键的状态.鼠标的位置和鼠标按钮的状态等.事件通常与函数结合使用,函数不 ...
- Vue.js-----轻量高效的MVVM框架（二、Vue.js的简单入门）
1.hello vue.js! (1)引入vue.js <script type="text/javascript" src="js/vue.js"> ...
- 前端Vue框架-vuex状态管理详解
新人报道!多多关照-多提宝贵意见 谢谢- vuex理解 采用集中式存储管理模式.用来管理组件的状态,并以自定义规则去观测实时监听值得变化. 状态模式管理理解 属性 理解 state 驱动应用的数据源 ...
- Vue成员与指令介绍
一.Vue介绍 1.什么是vue 通过对框架的了解与运用程度,来决定其在整个项目中的应用范围, 可以独立完成前后端分离式web项目的渐进式JavaScript框架 2.为什么要学vue 三大主流框架之 ...
- Vue.js 和 MVVM 小细节
MVVM 是Model-View-ViewModel 的缩写,它是一种基于前端开发的架构模式,其核心是提供对View 和 ViewModel 的双向数据绑定,这使得ViewModel 的状态改变可以自 ...
- wepack+sass+vue 入门教程（三）
十一.安装sass文件转换为css需要的相关依赖包 npm install --save-dev sass-loader style-loader css-loader loader的作用是辅助web ...
- wepack+sass+vue 入门教程（二）
六.新建webpack配置文件 webpack.config.js 文件整体框架内容如下,后续会详细说明每个配置项的配置 webpack.config.js直接放在项目demo目录下 module.e ...
- wepack+sass+vue 入门教程（一）
一.安装node.js node.js是基础,必须先安装.而且最新版的node.js,已经集成了npm. 下载地址 node安装,一路按默认即可. 二.全局安装webpack npm install ...
随机推荐
- Mysql 备份数据库方法及when using LOCK TABLES错误解决方法
可以将以下代码保存为backup.bat,添加计划任务即可. @echo off ,,%" ,%" "D: -uname -pxxxx -P3306 --skip-loc ...
- upupw ： Apache Php5.5 的使用
1. 官网下载 1. 官网下载 apache php5.5点击下载 但是 现在有时候打不开,所以提供以下方法 2. 百度云网盘下载 https://pan.baidu.com/s/1eQ2k1Su ...
- 查询服务商的当月提审限额和加急次数（Quota） 调用遇到问题的来说说是什么情况{"errcode":-1,"errmsg":"system error hint: [_KbPJA05231543]"}
感觉完全是按照微信官方的要求来的,还是提示错误.大家有遇到吗?在微信开发者社区里搜索相关问题,也是有人遇到这样的错误. 还是根据社区里说的,换过用开放平台的component accesstoken ...
- flume--为搬砖而生，日志传输的一把好手
(一)flume的产生 为什么会有flume 随着互联网的发展,人们对网络日志产生的信息也越来越重视.不仅如此,我们的服务器,比如Nginx,每天都会产生大量的日志.我们要将这些日志收集到指定的地方, ...
- c++ 数组 结构体
接下来的一点时间我将会记录下我看的c++的一些心得体会,人贵在坚持,希望我可以一直坚持下去!!Go Fighting! 一.c++复合数据类型: 数组类型的一些注意事项: sizeof的用法: 当 ...
- 架构师成长之路5.3-Saltstack配置管理（State状态模块）
点击架构师成长之路 架构师成长之路5.3-Saltstack配置管理(State状态模块) 配置管理工具: Pupper:1. 采用ruby编程语言:2. 安装环境相对较复杂:3.不支持远程执行,需要 ...
- keras多gpu训练
使用multi_gpu_model即可.观察了一下GPU的利用率,非常的低,大部分时候都是0,估计在相互等待,同步更新模型: 当然了,使用多GPU最明显的好处是可以使用更大的batch size im ...
- Mysql 查看连接数,状态及最大并发数（转载）
-- show variables like '%max_connections%'; 查看最大连接数 set global max_connections=1000 重新设置 mysql> ...
- 【CF208E】Blood Cousins
题目大意:给定一个 N 个点的森林,M 个询问,每次询问对于点 u 来说,有多少个点和 u 有相同的 K 级祖先. 题解:线段树合并适合处理子树贡献的问题. 发现要回答这个询问在点 u 处计算很困难, ...
- IView 给Submenu增加click事件失效解决方案
在浏览器中,打开开发者选项(F12) 找出对应的class,给其添加一个点击事件,就可以了. 具体的 document 操作,看这里 ----> https://www.cnblogs.co ...