vue指令修饰符、自定义指令

1、vue指令修饰符
指令名称:参数.修饰符 = "值"
比如 v-bind:value.number = “msg”
（1）不同指令有不同的参数，也有不同的修饰符
（2）相同指令下的修饰符可以连续使用，但不能连着使用别的指令下的修饰符

<div id="app">
        <!-- .lazy  取代input监听change事件 -->
        <input type="text" v-model.lazy="value1">
        <span>{
  {value1}}</span>
        <hr>
        
        <!-- .number自动将输入的字符串转为数值类型数字 -->
        <input type="text" v-model.number="test1">+<input type="text" v-model.number="test2">
        <span>{
  {test1}}</span><span>{
  {test2}}</span>
        <hr>

        <!-- .trim自动过滤掉输入的首尾空字符(空格) -->
        <input type="text" v-model.trim="test3">
        <span>{
  {test3}}</span>
        <hr>

        <!-- 相同指令下连续使用不同的修饰符 -->
        <input type="text" v-model.number.lazy.trim="info">
        <span>{
  {info}}</span>
        <hr>

        <!-- 使用了不同指令下的修饰符(prevent是事件指令下的修饰符) -->
        <input type="text" v-model.number.lazy.trim.prevent="info2">
        <span>{
  {info2}}</span>
    </div>

    <script>
        let app = new Vue({
   
           el:"#app",
           data:{
   
              value1:</