【郑州校区】前端笔记Vue项目day2(二） - 黑马程序员技术交流社区

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