1. v-on可以侦听事件，它也可以简写为@+事件
1.1 代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>v-on</title>
</head>
<body>
<div id="app">
<!-- v-on可以侦听事件 -->
<!-- 原来写法的点击事件 -->
<!-- <button onclick="">点击</button> -->
<!-- Vue写法的点击事件 -->
<button v-on:click="myClick">v-on的点击</button>
<!-- 当鼠标移动到按钮上触发的事件 -->
<button v-on:mouseover="myClick">将鼠标移动到按钮上触发</button>
<!-- v-on可以简写为'@'符号 -->
<button @click="myClick">v-on简写的点击</button>
<h1>
{{title}}
</h1>
<!-- 简单的数字(加 或 减) -->
<button @click="sub">-</button>
<button @click="add">+</button>
<h3>{{num}}</h3>
<!-- 简单的轮播图 -->
<img :src="'./imgs/img'+num+'.jpg'" alt="">
</div>
<script src="./js/vue.js"></script>
<script>
new Vue({
el: "#app",
data: {
title:"web前端开发",
num:1
},
//定义方法的属性(里面放各种的方法)
//所有的函数或者方法全在methods属性中定义
methods: {
myClick: function(){
this.title = "Vue学习"
},
sub: function(){
if(this.num == 1){
return
}else {
this.num--;
}
},
add: function(){
if(this.num == 2){
return
}else {
this.num++;
}
}
}
})
</script>
</body>
</html>1.2 显示效果
