134Vue-事件修饰符阻止冒泡、阻止默认行为、按键修饰符、capture启用捕获顺序从外到里

134Vue-事件修饰符阻止冒泡、阻止默认行为、按键修饰符、capture启用捕获顺序从外到里_第1张图片


<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Documenttitle>
head>
<body>
  <div id="app">
    <div>{
    {num}}div>
    <div v-on:click='handle0'>
      <button v-on:click.stop='handle1'>点击1button>
    div>
    <div>
      <a href="http://www.baidu.com" v-on:click.prevent='handle2'>百度a>
    div>
  div>
  <script type="text/javascript" src="js/vue.js">script>
  <script type="text/javascript">
    /*
      事件绑定-事件修饰符
    */
    var vm = new Vue({
      
      el: '#app',
      data: {
      
        num: 0
      },
      methods: {
      
        handle0: function(){
      
          this.num++;
        },
        handle1: function(event){
      
          // 阻止冒泡
          // event.stopPropagation();
        },
        handle2: function(event){
      
          // 阻止默认行为
          // event.preventDefault();
        }
      }
    });
  script>
body>
html>

按键修饰符

134Vue-事件修饰符阻止冒泡、阻止默认行为、按键修饰符、capture启用捕获顺序从外到里_第2张图片


<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Documenttitle>
head>
<body>
  <div id="app">
    <form action="">
      <div>
        用户名:
        <input type="text" v-on:keyup.delete='clearContent' v-model='uname'>
      div>
      <div>
        密码:
        <input type="text" v-on:keyup.f1='handleSubmit' v-model='pwd'>
      div>
      <div>
        <input type="button" v-on:click='handleSubmit' value="提交">
      div>
    form>
  div>
  <script type="text/javascript" src="js/vue.js">script>
  <script type="text/javascript">
    /*
      事件绑定-按键修饰符
    */
    Vue.config.keyCodes.f1 = 113
    var vm = new Vue({
      
      el: '#app',
      data: {
      
        uname: '',
        pwd: '',
        age: 0
      },
      methods: {
      
        clearContent:function(){
      
          // 按delete键的时候,清空用户名
          this.uname = '';
        },
        handleSubmit: function(){
      
          console.log(this.uname,this.pwd)
        }
      }
    });
  script>
body>
html>

capture

134Vue-事件修饰符阻止冒泡、阻止默认行为、按键修饰符、capture启用捕获顺序从外到里_第3张图片

134Vue-事件修饰符阻止冒泡、阻止默认行为、按键修饰符、capture启用捕获顺序从外到里_第4张图片
134Vue-事件修饰符阻止冒泡、阻止默认行为、按键修饰符、capture启用捕获顺序从外到里_第5张图片

你可能感兴趣的:(vue,vue)