vue中的修饰符

事件修饰符

• .stop 阻止向上冒泡 不会调用父的事件
• .prevent 阻止默认行为，调用 event.preventDefault()
• .capture捕获冒泡
• .self 只当事件在该元素本身触发时，才会触发事件
• .once 事件只触发一次

•  <!-- .stop 阻止向上冒泡 不会调用父的事件 -->
          <div @click='cathFather'>我是父事件修饰符
              <!-- .stop  阻止冒泡，调用 event.stopPropagation() -->
              <div @click.stop='catchSon'>我是子事件修饰符</div>
          </div>
  
          <!-- .prevent 阻止默认行为，调用 event.preventDefault() -->
          <a href="http://www.baidu" @click.prevent='onPrevent'>我是prevent事件</a>
  
          <!-- .capture捕获冒泡，
              即有冒泡发生时，有该修饰符的dom元素会先执行，如果有多个，从外到内依次执行，然后再按自然顺序执行触发的事件。
          -->
          <!-- 如果不给爷爷添加capture 点击儿子触发的顺序是 儿子、爸爸、爷爷 -->
          <!-- 给爷爷添加了capture事件后 点击儿子触发的顺序是 爷爷、儿子、爸爸 -->
          <div @click.capture='grandpa'>我是爷爷
              <div @click='father'>我是爸爸
                  <div @click='son'>
                          我是儿子
                  </div>
              </div>
          </div>
  
          <!-- .self 只当事件在该元素本身触发时，才会触发事件 -->
          <div @click.self='onSelfFather'>self事件爸爸
              <div @click='onSelfSon'>self事件儿子</div>
          </div>
  
          <!-- .once  事件只触发一次 -->
          <div @click.once='onOnce'>再点我一次试试</div>

键值修饰符

• 说明：在监听键盘事件时，Vue 允许为 v-on 在监听键盘事件时添加关键修饰符

•   <div id="app">
          <!-- 键值修饰符 包括键盘、鼠标 -->
          <!-- 13是Enter键的code值 -->
          <input type="text" v-model='msg' @keyup.13='submit'>
          <input type="text" v-model='msg2' @keyup.enter='submit2'><br>
          <!-- 使用自定义键值修饰符 -->
          <input type="text" v-model='msg' @keyup.f2='submit'>
      </div>
  
      <script>
          // 自定义键值修饰符 有时候写code值是数字的时候并没有语义，所有我们给它定义一下
          Vue.config.keyCodes.f2 = 113;
          var vm = new Vue({
              el:'#app',
              data:{
                  msg:'',
                  msg2:''
              },
              methods:{
                  submit:function(){
                      console.log('提交数据='+this.msg)
                  },
                  submit2:function(){
                      console.log('提交数据='+this.msg2)
                  },
              }
          })
      </script>