系列导航

<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. [ABC262F] Erase and Rotate

    Problem Statement You are given a sequence $P = (p_1,p_2,\ldots,p_N)$ that contains $1,2,\ldots,N$ e ...

  2. 使用 FastEndpoints 来垂直切换Web API的控制器方法

    在我们开发项目的Web API的时候,随着项目功能要求越来越多,可能我们会为控制器基类增加越来越多的基础功能,有些功能有一定的适应性,但可能在一般的子类中用不到,而随着对控制器控制要求越来越精细,那么 ...

  3. Hexo 主题开发之自定义模板

    关于 Hexo 如何开发主题包的教程在已经是大把的存在了,这里就不在赘述了.这边文章主要讲的是作为一个主题的开发者,如何让你的主题具有更好的扩展性,在用户自定义修改主题后,能够更加平易升级主题. 问题 ...

  4. 一行代码修复100vh bug | 京东云技术团队

    你知道奇怪的移动视口错误(也称为100vh bug)吗?或者如何以正确的方式创建全屏块? 一.100vh bug 什么是移动视口错误? 你是否曾经在网页上创建过全屏元素?只需添加一行 CSS 并不难: ...

  5. vue3+ts打开echarts的正确方式

    实例项目使用 vite5 + vue3 + ts,项目地址 vite-vue3-charts,预览地址 https://weizwz.com/vite-vue3-charts 准备工作 1. 注册为百 ...

  6. Python——第一章：占位——pass

    pass: 常用于代码占位 a = 10 if a > 100: pass 当设计代码时,有些条件或代码还没有想好要如何处理,先用pass做占位,后续可以回来继续写.如果不写pass则会报错,因 ...

  7. [NLP复习笔记] 基于负采样的 Skip-gram 及 SGD 训练公式推导

    1. one-hot 向量 我们先了解一下 \(\text{one-hot}\) 向量.\(\text{one-hot}\) 编码是表示分类变量的常见方法,尤其在数据预处理和机器学习的特征工程中.一个 ...

  8. 未经授权访问 .js

    流程顺序:后台管理登陆地址 → 后台主页地址 → fuzz测试出用户管理列表接口 → 直接调接口..全程黑盒. 那么接下来我逆着来推理下逻辑: 首先是拿到某后台管理登录的网址 接着查看html源码,发 ...

  9. 《玩转鲲鹏DevKit系列》第四期：如何基于鲲鹏平台高效开发？

    本文分享自华为云社区<<玩转鲲鹏DevKit系列>第四期:如何基于鲲鹏平台高效开发?>,作者:华为云社区精选 . 在鲲鹏软件新版本迭代或新功能开发过程中,使用鲲鹏DevKit ...

  10. 云图说 | Workflow：流水线工具，助您高效完成AI开发

    摘要:Workflow是将ML Ops(机器学习和DevOps的组合实践)应用于ModelArts平台,可以让您更高效的完成AI开发. 本文分享自华为云社区<云图说 | 第263期 Workfl ...