vuejs常用修饰符

一、常用修饰符

1.1 表单修饰符

修饰符 作用 使用
lazy 填完信息,光标离开标签的时候,才会将值赋予给value
trim 自动过滤用户输入的首空格字符,中间的空格不会过滤
number 自动将用户输入的值转为数值类型,如果不能被parseFloat解析,会返回原来的值

1.2 事件修饰符

修饰符 作用 使用
stop 阻止了事件冒泡 ,相当于调用了event.stopPropagation
// 只输出1
prevent 阻止了事件的默认行为,相当于调用了event.preventDefault方法
once 绑定了事件以后只能触发一次,第二次就不会触发

1.3 鼠标按钮修饰符

修饰符 作用 使用
left 左键点击
right 右键点击
middle 中键点击

1.4 键盘修饰符

键盘修饰符用来修饰键盘事件(onkeyup,onkeydown)的,有如下:

  • 普通键(enter、tab、delete、space、esc、up…)
  • 系统修饰键(ctrl、alt、meta、shift)

<input type="text" @keyup.keyCode="shout()">

还可以通过以下方式自定义一些全局的键盘码别名



<input type="text" @keydown.f2="prompt()">

1.5 v-bind修饰符

修饰符 作用 使用
sync 实现子组件props的双向绑定
prop 设置自定义标签属性,避免暴露数据,防止污染HTML结构
camel 将命名变为驼峰命名法,如将 view-Box属性名转换为 viewBox

二、.sync

2.1 背景

日常开发时,我们总会遇到需要父子组件双向绑定的问题,但是考虑到组件的可维护性,vue中是不允许子组件改变父组件传的props值的。那么同时,vue中也提供了一种解决方案.sync修饰符。

2.2 .sync修饰符之前的写法

  • 父组件
    <BT :age="age" @update:age="$event => age = $event">BT>
    
  • 子组件
    this.$emit('update:age', 20)
    

子组件使用$emit('update:xxx', newVal)向父组件发送事件,注意这里的事件名称update:xxx是一种约定的写法,使用其它事件名称是同样的效果。

2.3 使用.sync修饰符的写法

为了方便这种写法,vue提供了.sync修饰符,说白了就是一种简写的方式,我们可以将其当作是一种语法糖sync2.3版本引入,作为一个事件绑定 语法糖

  • 父组件
    <BT :age.sync="age">BT>
    
  • 子组件
    this.$emit('update:age', 20)
    

三、.native

有时候,会想在某个自定义组件上监听一个原生事件,就像这样:

<BT @click="click()">BT>

此时click事件并不起作用,需要借助.native修饰符:

<BT @click.native="click()">BT>

需要注意的是给普通HTML标签监听一个事件,之后添加 .native 修饰符是不会起作用的。例如:

<a @click.native="click()">aa>

甚至会报错:

[Vue warn]: The .native modifier for v-on is only valid on components but it was used on <a>.

四、.prop

  • .prop的修饰符用来指定绑定的值不应该被props解析,而应该作为dom属性绑定在元素上。
    <template>
      <div>
        <p>ATp>
        <BT :age.prop="20">BT>
        <BT :age="20">BT>
      div>
    template>
    
    <script>
    import BT from "./BT.vue";
    
    export default {
      name: "AT",
      components: { BT },
      data() {
        return {};
      },
      methods: {},
    };
    script>
    
    <template>
      <div>
        <p>BTp>
        <p>{{ age }}p>
      div>
    template>
    
    <script>
    export default {
      name: "BT",
      props: {
        age: {
          type: Number,
          default: 18,
        },
      },
      data() {
        return {};
      },
      mounted() {},
      methods: {},
    };
    script>
    
    结果:
    AT
    BT
    18
    BT
    20
    

参考

  • Vue .sync修饰符与$emit(update:xxx)
  • 详解Vue.js中.native修饰符
  • Vue常用的修饰符的作用详解
  • Vue中常用的修饰符有哪些?
  • Vue常用修饰符总结
  • vue .prop修饰符

你可能感兴趣的:(vue.js,前端)