Vue实现计数器的学习笔记

效果图如下：
点击加号技术开始加1，点击减号计数开始减1

源代码如下：
实现了两种方式，1种直接修改变量值，一种调用函数

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<div id="app">
<h2>当前计数为{{counter}}</h2><!--<button v-on:click="counter++">+</button><button v-on:click="counter--">-</button>--><button v-on:click="add">+</button><button v-on: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++;},sub:function(){this.counter--;}}});</script>
</body>
</html>

Vue实现计数器的学习笔记相关推荐

Vue.js入门（学习笔记）
说在前头: 本人为大三在读学生,书写文章的目的是为了对自己掌握的知识和技术进行一定的记录,同时乐于与大家一起分享,因本人资历尚浅,发布的文章难免存在一些错漏之处,还请阅读此文章的大牛们见谅与斧正.若在 ...
四、Vue组件化开发学习笔记——父子组件通信，父级向子级传值（props）,子级向父级传值（自定义事件），slot插槽
一.父子组件的通信在上一篇博文中,我们提到了子组件是不能引用父组件或者Vue实例的数据的. 但是,在开发中,往往一些数据确实需要从上层传递到下层: 比如在一个页面中,我们从服务器请求到了很多的数据. ...
三、Vue组件化开发学习笔记——组件化的基本步骤、全局组件和局部组件、父组件和子组件、注册组件的语法糖、模板分离写法、组件的数据存放
一.什么是组件化? 人面对复杂问题的处理方式: 任何一个人处理信息的逻辑能力都是有限的所以,当面对一个非常复杂的问题时,我们不太可能一次性搞定一大堆的内容. 但是,我们人有一种天生的能力,就是将问题 ...
Vue中scoped属性学习笔记
#什么是scoped vue中在style标签中的一个属性,使用scoped属性可以使标签内的样式只作用于当前组件中的元素. #scoped的原理在刚开始使用的时候,页面调试的html标签内和样式中 ...
八、Vue cli3详解学习笔记
一.认识Vue CLI3 1.1 vue-cli 3 与 2 版本有很大区别: vue-cli 3 是基于 webpack 4 打造,vue-cli 2 还是 webapck 3 vue-cli 3 ...
七、Vue cli详解学习笔记——什么是Vue cli ,Vue cli的使用（安装，拉取2.x模板，初始化项目），Vue cli2详解，Runtime-Compiler和Runtime-only区别
一.什么是Vue CLI 如果你只是简单写几个Vue的Demo程序, 那么你不需要Vue CLI. 如果你在开发大型项目, 那么你需要, 并且必然需要使用Vue CLI 使用Vue.js开发大型应用时 ...
Vue.js 3.0 学习笔记（七）class与style绑定
一.绑定HTML样式(class) 1.数组语法 <!DOCTYPE html> <html> <head><meta charset="UTF-8 ...
VUE饿了么学习笔记（6）goods界面滚动和点击联动的实现
使用插件Bscroll,在依赖文件package.json中添加版本,在install,run之后使用 1)import BScroll from 2)BScroll实例化的时候要接收一个DOM,此处 ...
Ant Design of Vue @1.7.8 学习笔记(Vue2版本)
0. 相关库版本 Vue 2.6.14 core-js 3.8.3 ant-design-vue 1.7.8 babel-plugin-import 1.13.5 less 3.13.1 less-l ...

Vue实现计数器的学习笔记

Vue实现计数器的学习笔记相关推荐

最新文章

热门文章