系列导航

<vue初体验> 一、 vue的引入和使用体验

<vue初体验> 二、 vue的列表展示

<vue初体验> 三、 vue的计数器

<vue初体验> 四、 vue的生命周期

一、     效果

使用v-on:click指令实现方法的绑定，点击增加按钮数字加1，点击减少按钮数字减1

二、代码结构

三、代码

03-Vue计数器.html

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>03-Vue计数器</title>

</head>

<body>

<div id="app">

  <h2>当前计数：{{counter}}</h2>

   <button type="button" v-on:click="add">+增加</button> <!--可以用@ 代替v-on-->

   <button type="button" @click="sub">-减少</button>

</div>

<script src="vue.js"></script>

<script>

  let app = new Vue({

    el: '#app',

    data: {

    	counter:0

    },

	methods:{

		add:function(){

			this.counter++

		},

		sub:function(){

			this.counter--

		}

	}

  })

</script>

</body>

</html>

四、代码解释

属性：methods，该属性用于在Vue对象中定义方法。

指令：@click, 该指令用于监听某个元素的点击事件，并且需要指定当发生点击时，执行的方法(方法通常是methods中定义的方法)

<vue初体验> 基础知识 3、vue的计数器的更多相关文章

  1. Vue框架之基础知识

    在没有学习基础知识之前,我们需要下载vue的js文件,在使用vue语法之前引包 <script src='./vue.js'></script> 一.模板语法 模板语法是一种可 ...

  2. Vue初体验（一）

    每个 Vue 应用都需要通过实例化 Vue 来实现. 语法格式如下: var vm = new Vue({ // 选项 }) 接下来让我们通过实例来看下 Vue 构造器中需要哪些内容: 可以看到在 V ...

  3. vue初体验-ES6 基础知识补充 let 和const

    本人水平有限,如内容有误,欢迎指正,谢谢. let  : 主要特点: 1.作用域只局限于当前代码块.2.使用let 声明的变量作用域不会被提升.3.在相同的作用域下不能声明相同的变量.4.for循环体 ...

  4. vue初体验：实现一个增删查改成绩单

    前端变化层出不穷,去年NG火一片,今年react,vue火一片,ng硬着头皮看了几套教程,总被其中的概念绕晕,react是faceback出品,正在不断学习中,同时抽时间了解了vue,查看了vue官方 ...

  5. Vue.js 运行环境搭建详解（基于windows的手把手安装教学）及vue、node基础知识普及

    Vue.js 是一套构建用户界面的渐进式框架.他自身不是一个全能框架——只聚焦于视图层.因此它非常容易学习,非常容易与其它库或已有项目整合.在与相关工具和支持库一起使用时,Vue.js 也能完美地驱动 ...

  6. VUE初体验篇-安装

    现代前端框架大行其道,讲前端思想从操作dom的阶段,升级到操作数据的阶段.vue作为三大前端框架之一,其中平缓的学习曲线,让好多前端新手非常喜欢,应用也越来越广泛.虽然其他两个框架有facebook, ...

  7. vue初体验

    作为一个前端的小菜鸟,在平时的开发与学习中,除了要深入了解javascript 及 css 的各种特性,熟悉一门框架也是必不可少的.vue以其小巧,轻便,学习平滑等各种特性深受欢迎. 这里总结一下小菜 ...

  8. vue初学之node.js安装、cnpm安装、vue初体验

    1. 如果本机没有安装node运行环境,请下载node 安装包进行安装.地址:https://nodejs.org/en/ 2.装完,使用cmd命令行输入:node -v回车 如果输出版本号则成功. ...

  9. Vue开发重点基础知识

    1.Vuejs组件 vuejs构建组件使用 Vue.component('componentName',{ /*component*/ }): 这里注意一点,组件要先注册再使用,也就是说: Vue.c ...

  10. TypeScript+Vue初体验Demo

    github: https://github.com/lanleilin/Typescript-Vue-Demo

随机推荐

  1. springboot实现反向代理，动态代理目标地址

    网上找了很多文章,各种照搬,只能自己实现 基于开源项目HTTP-Proxy-Servlet实现 开源项目地址:https://github.com/mitre/HTTP-Proxy-Servlet 1 ...

  2. HDU 4787 GRE Revenge

    Now Coach Pang is preparing for the Graduate Record Examinations as George did in 2011. At each day, ...

  3. 记录一个异常 Gradle打包项目Lombok不生效 No serializer found for class com.qbb.User and no properties discovered to create BeanSerializer......

    完整的错误: 03-Dec-2022 16:57:22.941 涓ラ噸 [http-nio-8080-exec-5] org.apache.catalina.core.StandardWrapperV ...

  4. 文心一言 VS 讯飞星火 VS chatgpt （162）-- 算法导论13.1 2题

    二.用go语言,对图13-1中的红黑树,画出对其调用TREE-INSERT 操作插人关键字 36 后的结果.如果插人的结点被标为红色,所得的树是否还是一棵红黑树?如果该结点被标为黑色呢? 文心一言,代 ...

  5. HTML之元素相对页面(视口)左上角的绝对坐标

    目录 一. 绝对位置 二. 相对位置 一. 绝对位置 网页元素的绝对位置,指该元素的左上角相对于整张网页左上角的坐标.无论网页滚动条如何滚动,它都是不会变化的. // 获取元素的绝对位置坐标(相对于页 ...

  6. cs上线Linux

    cs上线Linux 下载和配置crossC2 首先到项目地址:https://github.com/gloxec/CrossC2/releases下载两个文件 后缀为.cna的为cs的插件文件,启动c ...

  7. Python——第五章：pickle模块

    序列化:把对象转化成二进制字节 反序列化:把二进制字节转化回对象 Pickle模块的常见用法: Pickle.dunps   把对象(数据)转化成字节 Pickle.loads   把字节转化回对象( ...

  8. DVWA File Upload（文件上传）全等级

    File Upload(文件上传) 目录: File Upload(文件上传) 一句话木马的构成 1. Low 1.上传一句话木马1.php 2.中国蚁剑 2.Medium 3. High 4.Imp ...

  9. 使用Winform开发自定义用户控件，以及实现相关自定义事件的处理

    在我们一些非标的用户界面中,我们往往需要自定义用户控件界面,从而实现不同的内容展示和处理规则,本篇内容介绍使用Winform开发自定义用户控件,以及实现相关自定义事件的处理. 1.用户控件的界面分析 ...

  10. POJ 3537 Crosses and Crosses 博弈论 SG函数 记忆化搜索

    原题链接 题意 两人在一个长为n * 1的棋盘上下棋,两人持相同棋子,如果某人下完之后,棋盘上有三个棋子相连,则此人获胜.给出n,求是否先手必胜. 思路 一开始分析成了最少取3个,最多取5个的巴什博弈 ...