vue-计数器案例
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>
查看14道真题和解析