1. <!DOCTYPE html>
2. <html lang="en">
3. <head>
4. <meta charset="UTF-8">
5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
6. <title>Document</title>
7. </head>
8. <body>
9. <div id='app'>
10. <!-- v-on:事件='方法' -->
11. <input type="button" value='v-on指令' v-on:click='doIt'>
12.
13. <!-- 简写 @事件='方法' -->
14. <input type="button" value='v-on简写' @click='doIt'>
15.
16. <!-- 双击事件 -->
17. <input type="button" value='双击事件' @dblclick='doIt'>
18.
19. <!-- 更改数据使用 this关键字 -->
20. <div id='app' @click='changeMes'>{{mes}}</div>
21. </div>
22. <!-- 开发环境版本，包含了有帮助的命令行警告 -->
23. <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
24.
25. <script>
26. var app = new Vue({
27. el:'#app',
28. data:{
29. mes:'加油！'
30. },
31. methods:{
32. doIt:function(){
33. alert('大家好，我是测试小白！')
34. },
35. changeMes:function(){
36. this.mes += "加油，海蛎子！"
37. }
38.
39. }
40.
41. })
42. </script>
43. </body>
44. </html>
