1.使用事件的第一种方式：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script type="text/javascript" src='vue.min.js'></script>
<title></title>
<style type="text/css">
div{
width: 200px;height: 200px;background-color: red;}
</style>
</head>
<body>
<div v-on:click="alert"></div>
<script type="text/javascript">
new Vue(
{
el:'body',
data:{
msg:'cyg&liwen'
},
methods:
{
alert:function()
{
alert(this.msg);
}
}
}
);
</script>
</body>
</html>
解释：
代表methods代表使用的是vue的事件。
alert代表函数名
代表当前对象的msg属性.
效果：
2.使用事件的第二种方式：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title></title>
<script type="text/javascript" src='vue.min.js'></script>
<style type="text/css">
div{
width: 100px;height: 100px;background: black;}
</style>
</head>
<body>
<input type="button" name="" value="显示／隐藏" @click='changed'/>
<div v-show='dis'></div>
<script type="text/javascript">
new Vue({
el:'body',
data:{
dis:true
},
methods:{
changed:function(){
this.dis=!this.dis;
}
}
})
</script>
</body>
</html>
解释：
第二种使用事件的方式：
神来之笔：
先显示true，然后点击就false，再点击就再相反就true.
效果：
