<!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>Document</title> <style> #div1{ width: 200px; height: 200px; background: red; } #div2{ width: 100px; height: 100px; background: yellow; } </style> </head> <body> <div id="app"> {{msg}} <br> <!-- @ v-on:click = 'con' --> <button @click="con">点击</button> <div id="div1" @click="fn1"> <div id="div2" @click="fn2"></div> </div> <input type="text" @keyup="key"> <input type="text" @keyup.enter="keyOne"> </div> <script src="vue.js"></script> <script> var app = new Vue({ el: '#app', data: { msg: 'hello word' }, methods: { con(){ alert(123) }, fn1(){ console.log('我是红色') }, fn2(){ console.log('我是黄色') }, key(){ console.log('111') }, keyOne(){ console.log('我是回车') } } }) </script> </body> </html>