vue中常用的修饰符

v-model修饰符

1. lazy修饰符会使光标离开输入框时，才会更新数据

 <input type="text" v-model.lazy="value1">

2. trim修饰符会自动过滤输入框收尾空格

 <input type="text" v-model.trim="value2">

3. number

• 先输入数字就会限制输入只能是数字
• 先字符串就相当于没有加number
• 注意，不是输入框不能输入字符串，是这个数据是数字

 <input type="text" v-model.number="value3">

事件修饰符

1. stop阻止事件冒泡，相当于调用了event.stopPropagation()方法

<template>
    <div @click="handleParent">
       <div @click.stop="handleChild">阻止冒泡</div>
    </div>
</template>

<script>
export default {
  methods: {
    handleParent () {
      console.log('parent')
    },
    handleChild () {
      console.log('child')
    }
  }

}
</script>

2. prevent阻止默认行为，相当于调用了event.preventDefault()方法，比如表单的提交、a标签的跳转就是默认事件

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

<script>
export default {
  methods: {

    handleChild () {
      console.log('child')
    }
  }

}
</script>

3. self只有元素本身触发时才触发方法，就是只有点击元素本身才会触发。比如一个div里面有个按钮，div和按钮都有事件，我们点击按钮，div绑定的方法也会触发，如果div的click加上self，只有点击到div的时候才会触发，变相的算是阻止冒泡

<template>
    <div @click.self="handleParent">
       <div @click="handleChild">self</div>
    </div>
</template>

<script>
export default {
  methods: {
    handleParent () {
      console.log('parent')
    },
    handleChild () {
      console.log('child')
    }
  }

}
</script>

4. once事件只能用一次，无论点击几次，执行一次之后都不会再执行

<template>
    <div @click="handleParent">
       <div @click.once="handleChild">once</div>
    </div>
</template>

<script>
export default {
  methods: {
    handleParent () {
      console.log('parent')
    },
    handleChild () {
      console.log('child')
    }
  }

}
</script>

5. capture修饰符

<template>
    <div @click.capture="handleParent">
       <div @click="handleChild">capture</div>
    </div>
</template>

<script>
export default {
  methods: {
    handleParent () {
      console.log('parent')
    },
    handleChild () {
      console.log('child')
    }
  }

}
</script>

以上实例如果没有这个修饰符，则会先后输出child、parent，但是如果加了capture这个修饰符，则就先触发有修饰符的parent、child

• 即是给元素添加一个监听器
• 当元素发生冒泡时，先触发带有该修饰符的元素
• 若有多个该修饰符，则由外而内触发
• 谁有该事件修饰符，就先触发谁

6. sync修饰符

 <child-comp :parentData.sync="pdata"/>

加了sync修饰符相当于

 <child-comp :parentData="pdata" @update:parentData="val=>parentData=val"/>

实例

父组件：

<template>
    <div>
       <child-comp :parentData.sync="pdata"/>
    </div>
</template>

<script>
import childComp from './child'
export default {
  components: {
    childComp
  },
  data () {
    return {
      pdata: 'nihao'
    }
  }

}
</script>

子组件：

<template>
    <div>
        <div>
            父组件过来的数据：{{parentData}}
        </div>
        <a @click="handleChangeData">修改父级过来的数据</a>
    </div>
</template>

<script>
export default {
  props: {
    parentData: String
  },
  methods: {
    handleChangeData () {
      this.$emit('update:parentData', '123')
    }
  }
}
</script>

7. 按键修饰符keyCode

• 常用的按键码如：
  .enter
  .tab
  .delete (捕获“删除”和“退格”键)
  .esc
  .space
  .up
  .down
  .left
  .right
  .ctrl
  .alt
  .shift
  .meta

<template>
    <div>
       <!-- 按空格键触发事件 -->
       <input type="text" @keyup.space="handleToDo">
    </div>
</template>

<script>

export default {
  components: {

  },
  methods: {
    handleToDo () {
      console.log('按下空格键！')
    }
  }

}
</script>

• 其他未知按键处理事件

<template>
    <div>
       <input type="text" v-on:keyup="handleKeyUp">
    </div>
</template>

<script>

export default {
  components: {

  },
  methods: {
    handleKeyUp (event) {
      console.log(event)
    }
  }

}
</script>