表单修饰符

• .number  转换为数值
  • 注意点：       
  • 当开始输入非数字的字符串时，因为Vue无法将字符串转换成数值
  • 所以属性值将实时更新成相同的字符串。即使后面输入数字，也将被视作字符串。
    
    
• .trim  自动过滤用户输入的首尾空白字符
  • 只能去掉首尾的 不能去除中间的空格
    
    
• .lazy   将input事件切换成change事件
  • .lazy 修饰符延迟了同步更新属性值的时机。即将原本绑定在 input 事件的同步逻辑转变为绑定在 change 事件上
    
    
• 在失去焦点 或者 按下回车键时才更新
• [AppleScript] 纯文本查看 复制代码

  <!-- 自动将用户的输入值转为数值类型 -->
  <input v-model.number="age" type="number">
  
  <!--自动过滤用户输入的首尾空白字符   -->
  <input v-model.trim="msg">
  
  <!-- 在“change”时而非“input”时更新 -->
  <input v-model.lazy="msg" >

• 自定义指令
  • 内置指令不能满足我们特殊的需求
  • Vue允许我们自定义指令
    
    
  Vue.directive  注册全局指令
• [AppleScript] 纯文本查看 复制代码

  <!-- 
    使用自定义的指令，只需在对用的元素中，加上'v-'的前缀形成类似于内部指令'v-if'，'v-text'的形式。 
  -->
  <input type="text" v-focus>
  <script>
  // 注意点： 
  //   1、 在自定义指令中  如果以驼峰命名的方式定义 如  Vue.directive('focusA',function(){}) 
  //   2、 在HTML中使用的时候 只能通过 v-focus-a 来使用 
      
  // 注册一个全局自定义指令 v-focus
  Vue.directive('focus', {
    	// 当绑定元素插入到 DOM 中。 其中 el为dom元素
    	inserted: function (el) {
      		// 聚焦元素
      		el.focus();
   	}
  });
  new Vue({
  　　el:'#app'
  });
  </script>

  
  
• Vue.directive  注册全局指令 带参数
  
• [AppleScript] 纯文本查看 复制代码

  <input type="text" v-color='msg'>
   <script type="text/javascript">
      /*
        自定义指令-带参数
        bind - 只调用一次，在指令第一次绑定到元素上时候调用
  
      */
      Vue.directive('color', {
        // bind声明周期, 只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置
        // el 为当前自定义指令的DOM元素  
        // binding 为自定义的函数形参   通过自定义属性传递过来的值 存在 binding.value 里面
        bind: function(el, binding){
          // 根据指令的参数设置背景色
          // console.log(binding.value.color)
          el.style.backgroundColor = binding.value.color;
        }
      });
      var vm = new Vue({
        el: '#app',
        data: {
          msg: {
            color: 'blue'
          }
        }
      });
    </script>

  
  
  

表单修饰符

• .number  转换为数值
  • 注意点：       
  • 当开始输入非数字的字符串时，因为Vue无法将字符串转换成数值
  • 所以属性值将实时更新成相同的字符串。即使后面输入数字，也将被视作字符串。
    
    
• .trim  自动过滤用户输入的首尾空白字符
  • 只能去掉首尾的 不能去除中间的空格
    
    
• .lazy   将input事件切换成change事件
  • .lazy 修饰符延迟了同步更新属性值的时机。即将原本绑定在 input 事件的同步逻辑转变为绑定在 change 事件上
    
    
• 在失去焦点 或者 按下回车键时才更新
• [AppleScript] 纯文本查看 复制代码

  <!-- 自动将用户的输入值转为数值类型 -->
  <input v-model.number="age" type="number">
  
  <!--自动过滤用户输入的首尾空白字符   -->
  <input v-model.trim="msg">
  
  <!-- 在“change”时而非“input”时更新 -->
  <input v-model.lazy="msg" >

• 自定义指令
  • 内置指令不能满足我们特殊的需求
  • Vue允许我们自定义指令
    
    
  Vue.directive  注册全局指令
• [AppleScript] 纯文本查看 复制代码

  <!-- 
    使用自定义的指令，只需在对用的元素中，加上'v-'的前缀形成类似于内部指令'v-if'，'v-text'的形式。 
  -->
  <input type="text" v-focus>
  <script>
  // 注意点： 
  //   1、 在自定义指令中  如果以驼峰命名的方式定义 如  Vue.directive('focusA',function(){}) 
  //   2、 在HTML中使用的时候 只能通过 v-focus-a 来使用 
      
  // 注册一个全局自定义指令 v-focus
  Vue.directive('focus', {
    	// 当绑定元素插入到 DOM 中。 其中 el为dom元素
    	inserted: function (el) {
      		// 聚焦元素
      		el.focus();
   	}
  });
  new Vue({
  　　el:'#app'
  });
  </script>

  
  
• Vue.directive  注册全局指令 带参数
  
• [AppleScript] 纯文本查看 复制代码

  <input type="text" v-color='msg'>
   <script type="text/javascript">
      /*
        自定义指令-带参数
        bind - 只调用一次，在指令第一次绑定到元素上时候调用
  
      */
      Vue.directive('color', {
        // bind声明周期, 只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置
        // el 为当前自定义指令的DOM元素  
        // binding 为自定义的函数形参   通过自定义属性传递过来的值 存在 binding.value 里面
        bind: function(el, binding){
          // 根据指令的参数设置背景色
          // console.log(binding.value.color)
          el.style.backgroundColor = binding.value.color;
        }
      });
      var vm = new Vue({
        el: '#app',
        data: {
          msg: {
            color: 'blue'
          }
        }
      });
    </script>