参考来源:
黑马程序员Vue全套视频教程,从vue2.0到vue3.0一套全覆盖,前端必会的框架教程_哔哩哔哩_bilibili
点击按钮,增加减少count
v-on:简写为'@'
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>title</title> </head> <body> <div id="app"> <p>count的值是:{{ count }}</p> <button @click="add(3)">+ n</button> <button @click="sub(4)">- n</button> </div> <!-- 导入vue的库文件 --> <script src="./lib/vue-2.6.12.js"></script> <!-- 创建vue的实例对象 --> <script> const vm = new Vue({ // 表示当前vm实例要控制页面上的哪个区域,接收的值是一个选择器 el: '#app', // data对象就是要渲染到页面上的数据 data: { count: 0, }, // 定义事件的处理函数 methods: { add (n) { this.count += n; }, sub (n) { this.count -= n; } } }) </script> </body> </html>