<!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>vue的单击事件</title>

     <script type="text/javascript" src="./js/vue.js"></script>

     <script type="text/javascript">

     window.onload = function(){

         var app = new Vue({

             el:".c",

             data:{

                 //定义计数器

                 counter:0,

             }

         });

     }

     </script>

 </head>

 <body>

     <div class="c">

         <!-- 定义一个按钮，使用counter做累加-->

         <button v-on:click="counter += 1"><font size="2" color="blue">+</font></button>

         <input type="text" v-model="counter" style="width: 40px;background-color: pink;text-align:center" />

         <button v-on:click="counter -= 1"><font size="2" color="blue">-</font></button>

     </div>

 </body>

 </html>

vue累加计数器的更多相关文章

  1. Vue.js 和 MVVM 小细节

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

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

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

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

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

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

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

  5. Vue + Webpack + Vue-loader 系列教程（2）相关配置篇

    原文地址:https://lvyongbo.gitbooks.io/vue-loader/content/ 使用预处理器 在 Webpack 中,所有的预处理器需要和一个相应的加载器一同使用.vue- ...

  6. Vue + Webpack + Vue-loader 系列教程（1）功能介绍篇

    原文地址:https://lvyongbo.gitbooks.io/vue-loader/content/ Vue-loader 是什么? vue-loader 是一个加载器,能把如下格式的 Vue ...

  7. 关于Vue.js 2.0 的 Vuex 2.0，你需要更新的知识库

    应用结构 实际上,Vuex 在怎么组织你的代码结构上面没有任何限制,相反,它强制规定了一系列高级的原则: 应用级的状态集中放在 store 中. 改变状态的唯一方式是提交mutations,这是个同步 ...

  8. Vue.js 2.0 和 React、Augular等其他框架的全方位对比

    引言 这个页面无疑是最难编写的,但也是非常重要的.或许你遇到了一些问题并且先前用其他的框架解决了.来这里的目的是看看Vue是否有更好的解决方案.那么你就来对了. 客观来说,作为核心团队成员,显然我们会 ...

  9. 窥探Vue.js 2.0 - Virtual DOM到底是个什么鬼？

    引言 你可能听说在Vue.js 2.0已经发布,并且在其中新添加如了一些新功能.其中一个功能就是"Virtual DOM". Virtual DOM是什么 在之前,React和Em ...

随机推荐

  1. mysql limit查询入门

  2. Django（十一）视图详解：基本使用、登录实例、HttpReqeust对象、HttpResponse对象

    一.视图(基于类的视图) [参考]https://docs.djangoproject.com/zh-hans/3.0/topics/class-based-views/intro/ 1)视图的功能 ...

  3. 吴裕雄--天生自然java开发常用类库学习笔记：大数操作

    import java.math.* ; class MyMath{ public static double add(double d1,double d2){ // 进行加法计算 BigDecim ...

  4. linux内核链表的实现

    .\linux-2.6.22.6_vscode\include\linux\list.h #ifndef _LINUX_LIST_H#define _LINUX_LIST_H #ifdef __KER ...

  5. redis学习（四）

    一.Redis 键(key) 1.Redis 键命令用于管理 redis 的键. 2.Redis 键命令的基本语法如下:redis 127.0.0.1:6379> COMMAND KEY_NAM ...

  6. LeetCode1029 两地调度（贪心+java自定义排序回顾）

    题目: 公司计划面试 2N 人.第 i 人飞往 A 市的费用为 costs[i][0],飞往 B 市的费用为 costs[i][1]. 返回将每个人都飞到某座城市的最低费用,要求每个城市都有 N 人抵 ...

  7. POJ 1905：Expanding Rods 求函数的二分

    Expanding Rods Time Limit: 1000MS   Memory Limit: 30000K Total Submissions: 13780   Accepted: 3563 D ...

  8. Bug 佛祖镇楼

    原文链接:https://www.cnblogs.com/xdp-gacl/p/4198935.html // _ooOoo_ // o8888888o // 88" . "88 ...

  9. jvm 性能监控与linux常用命令

    linux日常的运维 .Java开发 管理监控命令  ,较为浅显,欢迎提意见,我将在后面持续补充.

  10. vue 循环和v-if 不能混合使用

    <div class="item page-item" v-for="(item,i) in pageNum" @click="setCurre ...