指令修饰符

一.通过 ” . “指明一些指令后缀，不同后缀封装了不同的处理操作 -->简化代码

1. 按键修饰符 
   @keyup.enter ->键盘回车监听
2. v-model修饰符
   v-model.trim  :去除首尾空格
   v-model.number :转数字
3. 事件修饰符
   @事件名.stop ->阻止冒泡
   @事件名.prevent ->阻止默认行为
    

二.keyup.enter

输入框输入任务，回车时直接添加而不必再点击”添加任务“这几个字

<input @keyup.enter="add" v-model="todoName" placeholder="请输入任务" class="new-todo">
<button @click="add" class="ass">添加任务</button>

因为回车和点击后面”添加任务“，两个的作用都是要进行添加，所用到的函数是一样的

三. v-model.trim和 v-model.number (ref响应式，ref 的返回值是一个具有 .value 属性的对象，Vue 会追踪 .value 的变化并自动更新视图）

v-model.trim : 去除首尾的空格

v-model-number : 转化为数字

姓名输入前面有空格，当光标移开之后，输入的姓名会自动左移 

 

在年纪一栏输入的实际是字符串，用v-model.umber将之转化为真正的数字

四.@事件名.stop -->阻止冒泡,@事件名.prevent -->阻止默认行为

1.组织冒泡

<template>
  <div @click="fatherFn"  class="father">
   <div @click="sonFn"  class="son">儿子</div> 
  </div>
  
</template>

<script setup>
import {ref} from 'vue'
const fatherFn = () => {
  alert('父亲被点击')
}
const sonFn = (e) =>{
  e.stopPropagation()
  alert('儿子被点击')
}
</script>
<style>
.father {
  background-color:pink;
  height: 500px;
  width: 300px;;

}
.son {
  background-color:aqua;
  height: 200px;
  width: 150px;
}
</style>

注意：事件处理函数放在 <script setup> 中：Vue 3 中的 <script setup> 语法会自动将函数绑定到模板中 

e 是事件对象，stopPropagation() 是一个用于控制事件冒泡的函数

做以下修改，结果不变

 <div @click.stop="sonFn"  class="son">儿子</div> 



const sonFn = () =>{
  // e.stopPropagation()
  alert('儿子被点击')
}

 仅点击了儿子

 2.阻止默认行为

单是如此，点击链接跳转到百度页面

  <a href="http://www.baidu.com">阻止默认行为</a>

加上@click.prevent点击链接不跳转

  <a @click.prevent href="http://www.baidu.com">阻止默认行为</a>