Vue学习三、事件方法、监听、传值

一、方法基本用法 传参， dom对象

　　监听方法可以使用v-on 或者使用简写@ 符号代替

<template>
  <div>
   <input type="button" @click="getMsg" value="获取msg">
   <br/>
   <input type="text" v-model="msg">
   <!-- 执行方法传入参数 -->
   <input type="button" @click="setMsg('修改内容')" value="修改msg">
   <br/>
   <!-- 调用一个run方法，引发其他方法 -->
    <input type="button" @click="run" value="调用run方法">
    <br/>
    <!-- 传入点击节点对象 注意传入点击对象$event是固定-->
    <input type="button" data-id="1001" @click="evenF($event)" value="获取节点对象">
    <br/>
    <!-- 如果多个参数并且要作为最后一个参数 -->
    <input type="button" @click="warn('001', $event)" value="多个参数">
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      msg: "我是一个标题"
    }
  },
  methods: {
    getMsg() {
      alert(this.msg);
    },
    setMsg(str) {
      this.msg = str;
    },
    run() {
      this.getMsg(); // 调用其他方法
    },
    evenF(e) {
      console.log(e);
      var id = e.srcElement.dataset.id;// 获取data-id属性值
      console.log(id);
      e.preventDefault(); // 阻止默认事件
      e.stopPropagation();// 阻止冒泡事件
    },
    warn(id, e){
      console.log(id); // 参数id
      console.log(e); // 事件dom对象
    }
    
  }
}
</script>

二、多事件处理程序

template>
  <div>
   <input type="button" @click="one(),two()" value="绑定多个方法">
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      msg: "我是一个标题"
    }
  },
  methods: {
    one() {
      console.log("one");
      
    },
    two() {
      console.log("two");
      
    }
    
  }
}
</script>

三、vue的事件修饰符

vue 中给我们提供了很多修饰符

.stop　　--阻止冒泡事件
.prevent　　-- 去除默认事件
.capture
.self
.once
.passiv

<template>
  <div>
   <a href="https://www.baidu.com/" @click.prevent="one()">链接1</a>
   <a href="https://www.baidu.com/" @click.stop="two()">链接2</a>
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      msg: "我是一个标题"
    }
  },
  methods: {
    one() {
      console.log("one");      
    },
    two() {
      console.log("two");      
    }
    
  }
}

四、按键修饰符

监听键盘事件时，Vue允许在监听关键事件时v-on或@在监听关键事件时

添加案件修饰符：

.enter
.tab
.delete
.esc
.space
.up
.down
.left
.right

原本方法监听按了回车按键， 会一直触发函数

<template>
  <div>
    <input type="text" @keyup="doSearch($event)" />
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      msg: "我是一个标题"
    }
  },
  methods: {
    doSearch(e){
      console.log("键盘按键code", e.keyCode);   
      if (e.keyCode == 13) {
        alert("按了回车");
      }   
    }
    
  }
}

使用按键修饰符后，只有按了回车键才会触发

<template>
  <div>
    <input type="text" @keyup.enter="doSearch()" />
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      msg: "我是一个标题"
    }
  },
  methods: {
    doSearch(){
     
        alert("按了回车");
      
    }
    
  }
}