Vue实例——计数器

在Vue中，若想添加点击事件，需要使用v-on:click进行点击事件的添加。对于v-on:click，可以简写为@click。而点击事件的内容可以为具体的代码或者是函数。

在Vue中，定义函数需要new Vue()中，格式为：

methods: {

函数名: function() {

函数体

}

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Vue计数器</title>
</head>
<body>
<div id="app"><h1>当前计数： {{counter}}</h1><!--    v-on:click代表js中的点击函数，点击之后会触发点击事件--><!--    v-on:click的内容可以有两种形式：具体的代码、函数--><!--    <button v-on:click="counter++">+</button>--><!--    <button v-on:click="counter--">-</button>--><!--    v-on:click可以简写为@click--><button @click="add">+</button><button @click="sub">-</button>
</div>
<script src="../js/vue.js"></script>
<script>const app = new Vue({el: '#app',data: {counter: 0},methods: {add: function () {this.counter++;console.log("计数器加1");},sub: function () {this.counter--;console.log("计数器减1");}}})
</script>
</body>
</html>

Vue实例——计数器相关推荐

Vue之MVVM、Vue实例对象、生命周期
1.初识Vue Vue是一套用于构建用户界面的渐进式框架,Vue 被设计为可以自底向上逐层应用,Vue的核心是只关注视图层(如何理解),不仅易于上手,还便于与第三方库或既有项目整合. 渐进式框架:渐进 ...
Vue 实例之数据绑定，事件，组件，生命周期！！！
文章目录关于 vue 设计模式的简介 1.Vue实例创建简单 vue 实例 el 唯一根标签: data: methods: computed: watch: filters: 2.Vue 数据绑 ...
vue实例没有挂载到html上,vue 源码学习 - 实例挂载
前言在学习vue源码之前需要先了解源码目录设计(了解各个模块的功能)丶Flow语法. src ├── compiler # 把模板解析成 ast 语法树,ast 语法树优化,代码生成等功能. ├── ...
关于Vue实例的生命周期created和mounted的区别
关于作者程序开发人员,不拘泥于语言与技术,目前主要从事PHP和前端开发,使用Laravel和VueJs,App端使用Apicloud混合式开发.合适和够用是最完美的追求. 个人网站:http://w ...
Vue实例的生命周期
vue实例的生命周期什么是生命周期:从Vue实例创建.运行.到销毁期间,总是伴随着各种各样的事件,这些事件,统称为生命周期! 生命周期钩子:就是生命周期事件的别名而已: 生命周期钩子 = 生命周期函 ...
创建第一个vue实例
一.vue安装与下载 1. 官网下载下载地址选择开发版本 2. 打开sublime,新建vue文件夹,将下载好的代码vue.js放入vue文件夹中. 3. 新建index.html文件,在hea ...
vue的js文件中获取vue实例
1.main.js导出vue实例: 1 var vue = new Vue({ 2 el: '#app', 3 router, 4 components: { App }, 5 template: ' ...
vue邪道玩法 : 把vue实例存在别的地方，以及可能会遇到的问题
一般来说,VUE项目中,this指向VUE实例. 但有的时候,某些代码会改变this的指向. 这时,可以用一个临时变量存储VUE实例. test1(){ var _this = this // 把vu ...
Vue实例里this的使用
2019独角兽企业重金招聘Python工程师标准>>> 要理解Vue实例里this的使用,首先要理解this在JavaScript里的用法,可以参考理解JavaScript普通函数以 ...

Vue实例——计数器

Vue实例——计数器相关推荐

最新文章

热门文章