【郑州校区】前端笔记Vue项目 第2天 2

表单修饰符


.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>

【郑州校区】前端笔记Vue项目 第2天 2

表单修饰符


.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>