Vue的处理用户事件

在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