vue-计数器案例

前提

案例中需要需要认识的属性和指令

指令：v-on:click

<button v-on:click="方法名">+</button>

官方解释：为了让用户和你的应用进行交互，我们可以用 `v-on` 指令添加一个事件***，通过它调用在 Vue 实例中定义的方法

个人理解：该指令用于监听某个元素的点击事件，当点击事件发生时，执行某个方法(方法通常是在methods属性中定义的)

属性：methods

methods:{}

该属性用于在Vue对象中定义方法

代码实例

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Vue</title>
</head>
<body>

	<div id="app">
		<h1>计数器案例</h1>
		<h2>{
  {count}}</h2>
		<button v-on:click="increment">+</button>
		<button v-on:click="decrement">-</button>
	</div>

	<!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	
	<script type="text/javascript"> const app = new Vue({
     el: '#app', data: {
     count: 0 }, methods: {
     increment: function(){
     this.count++ }, decrement: function(){
     if(this.count==0){
     this.count++ } this.count-- } } }) </script>
</body>
</html>

运行成功