在js的时候，关于事件，DOM操作还是比较繁琐的，例如
document.getElementById("btn").addEventListener("click", function () {
alert("Hello World");
});
上面的两步操作
第一：给元素添加点击事件
第二：给点击事件添加方法
但是在Vue里面是很简单的
1.v-on:(事件绑定)
第一：给事件添加点击事件，不过在Vue里面不叫点击事件了，叫做事件绑定
<button v-on:click="add">按钮</button>
这样就给按钮添加好了点击，当你点击按钮的时候，就会驱动add
还有一个简写模式，看上去更简单
<button @click="add">按钮</button>
2.methods(方法)
第二步：给点击事件添加方法
这一步是将js代码中 匿名方法写在Vue规定的位置
首先，将js的代码抽离出来是这样子的
let alertFn = function () {
alert("Hello World");
};
document.getElementById("btn").addEventListener("click", alertFn);
第二步：将抽离出来的alertFn方法放在Vue中规定的位置，要注意存放的方式是键值对的方式key:value
<script>
export default{
name:"app",
methods:{
alertFn:function(){
alert("Hello World");
}
}
}
</script>
以上是知识点，下面是具体的一个案例
我们可以点击按钮，数字加一
vue核心代码如下：
<template>
<p>{
{counter}}</p>
<button @click="add">点击</button>
</template>
<script>
export default{
name:"app",
data(){
return {
//初始次数
counter:0
};
},
methods:{
add:function(){
//这里的this指向的是当前的Vue实例
this.counter++
}
}
};
</script>
这里要注意的是，如果用在data的定义的变量，就必须要在变量的前面加上this
@click="add"的完整的写法其实 是@click="add()"在括号里面其实是可以传递参数的
事件的修饰符
1.阻止冒泡事件
<div @click.stop="fn2"></div>
2.捕获事件
<div class="div2" @click.capture="fn2"></div>
3.阻止默认事件
<div class="div2" @click.prevent="fn2"></div>
一个很不错的例子
`
他可以实现的功能有：
1.在HTML的基础上 添加输入框和“提交”的按钮
2.给表格的每一个格子上添加点击事件，点击后获取格子内的数据
3.将获取到的数据显示在input框内
4.使用v-model双向绑定完成对数据的修改
5.将修改后的数据显示在对应的格子内
6.当input框上添加一个获取鼠标焦点事件@focus=""判断在获取焦点的时候，是否已经选中了表中的格子，如果没有选中的话，使用console.log()在控制台打印提示消息
7.在提交按钮上的添加点击事件，点击提交后，将修改后的数据显示在对应的格子上
下面是他的代码 注意只提供核心代码，Vue部分的
<template>
<div id="app">
<div class="list">
<div class="title">
<div class="name">姓名</div>
<div class="class">班级</div>
<div class="total-grade">总成绩</div>
</div>
<div class="line">
<div class="name-data" @click="getData(0, 'name')">
{
{ list[0].name }}</div>
<div class="class-data" @click="getData(0,'grade')">
{
{ list[0].grade }}</div>
<div class="total-grade-data" @click="getData(0,'mark')">
{
{ list[0].mark }}</div>
</div>
<div class="line">
<div class="name-data" @click="getData(1,'name')">
{
{ list[1].name }}</div>
<div class="class-data" @click="getData(1,'grade')">
{
{ list[1].grade }}</div>
<div class="total-grade-data" @click="getData(1,'mark')">
{
{ list[1].mark }}</div>
</div>
<div class="line">
<div class="name-data" @click="getData(2,'name')">
{
{ list[2].name }}</div>
<div class="class-data" @click="getData(2,'grade')">
{
{ list[2].grade }}</div>
<div class="total-grade-data" @click="getData(2,'mark')">
{
{ list[2].mark }}</div>
</div>
<div class="change">
<input
type="text"
v-model="changingData"
placeholder="请输入……"
@focus="focusFn"
/>
<div @click="changeData" class="sub">提交</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'app',
data() {
return {
list: [
{
name: '张三',
grade: '三年级二班',
mark: 290,
},
{
name: '李四',
grade: '三年级二班',
mark: 270,
},
{
name: '王五',
grade: '三年级二班',
mark: 270,
},
],
changingData:'',
currentIndex:0,
currentKey:'',
};
},
methods:{
getData:function(index,key){
this.currentIndex=index;
this.currentKey=key;
this.changingData=this.list[index][key];
},
changeData:function(){
if(!this.changingData){
console.log('请选择要更改的表格');
}
this.list[this.currentIndex][this.currentKey]=this.changingData;
console.log(this.list);
},
focusFn:function(){
if(!this.changingData){
console.log('请选择要更改的表格');
}
},
},
};
</script>
<style lang="scss" scoped>
.list {
background: #34405a;
color: #ffffff;
.title {
display: flex;
padding: 5px 0;
background: #36507e;
div {
flex: 1;
}
}
.line {
padding: 5px 0;
background: #222c44;
display: flex;
border-bottom: 1px solid #020b1a;
div {
flex: 1;
}
}
.change {
display: flex;
padding: 5px 0;
input {
border: none;
background: transparent;
margin-right: 20px;
outline: 0;
color: #ffffff;
padding: 5px 20px;
}
.sub {
cursor: pointer;
}
}
}
</style>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
}
#nav {
padding: 30px;
}
#nav a {
font-weight: bold;
color: #2c3e50;
}
#nav a.router-link-exact-active {
color: #42b983;
}
</style>
yarn