vue-07-事件修饰符-复习

接06-vue的后小部分

 <div id="box">
    <ul @click="handleUlClick()">
      <!-- stop stopPropagation 阻止冒泡 -->
      <li @click.stop="handleClick()">ass</li>
    </ul>

    <!-- prevent 阻止默认行为 -->
    <form action="" @submit.prevent="handleSubmit()">
      <button type="submit">登录</button>
    </form>
  </div>

 methods: {

        handleClick() {
          console.log('123');
        },

        handleUlClick() {
          console.log('点击任何一个孩子都会触发调用父元素，所以可以利用stopPropagation阻止冒泡');
        },

        handleSubmit() {
          console.log('阻止提交');
        }

      },

运行结果：

注意点：.prevent跟 .passvie 不可以同时使用，原因是passvie已经向浏览器发送阻止默认行为，如果同时使用会忽略prevent，则浏览器会发出警告

---

按键修饰符：

<!-- 按键修饰符 -->
    <input type="text" v-model="mytext" @keyup.enter="handleKeyup">

 handleKeyup() {
          console.log('键盘按下');
        }

keycode是返回键的字符码