Vue自定义指令和计算属性和侦听器和过滤器

一些指令

1.Vue.directive 注册全局自定义指令和带参数的

<!-- 
  使用自定义的指令，只需在对用的元素中，加上'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>
//********************带参数的***********************//
  <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>

2.自定义局部指令

1.局部指令,需要定义在directives的选项,用法和全局用法一样

2.局部指令只能在当前组件里面使用

3.当局部指令和全局指令同名时以局部指令为准

<input type="text" v-color='msg'>
 <input type="text" v-focus>
 <script type="text/javascript">
    /*
      自定义指令-局部指令
    */
    var vm = new Vue({
      el: '#app',
      data: {
        msg: {
          color: 'red'
        }
      },
   	  //局部指令，需要定义在  directives 的选项
      directives: {
        color: {
          bind: function(el, binding){
            el.style.backgroundColor = binding.value.color;
          }
        },
        focus: {
          inserted: function(el) {
            el.focus();
          }
        }
      }
    });
  </script>

3.计算属性computed

计算属性是基于它们的响应式以来进行缓存的;

computed比较适合对多个变量或者对象进行处理后返回一个结果值,也就是书多个变量中的值发生了变化则我们监控的这个值也会发生变化;

 <div id="app">
        <div>{{msg}}</div>
        <div>{{reserseString}}</div>
    </div>
    <script src="js/vue.js"></script>
    <script>
        //计算属性
        var vm = new Vue({
            el:'#app',
            data:{
                msg:'hello vue',
            },
            //计算属性
            computed:{
                reserseString:function(){
                    return this.msg.split('').reverse().join('');
                }
            }
        })
    </script>

4.侦听器watch

侦听器watch来响应数据的变化,watch中的属性一定是data中已经存在的数据;

当需要监听一个对象的改变时,普通的watch方法无法监听到对象内部属性的改变,只有data中的数据才能监听到变化,此时就需要deep属性对对象进行监听

  <div id="app">
        <div>
            <span>用户名:</span>
            <span>
                <input type="text" v-model.lazy='uname'>
            </span>
            <span>{{tip}}</span>
        </div>
    </div>

    <!-- 引入vue.js文件 -->
    <script src="js/vue.js"></script>
    <script>
        /**
        侦听器:1.采用侦听器监听用户名的变化
        2.模拟调用后台接口进行验证
        3.根据后台接口进行验证
        */
        var vm = new Vue({
            el:'#app',
            data:{
                tip:'',
                uname:''
            },
            methods:{
                checkName:function(uname){
                    //调用接口,但是可以使用定时器任务的方式模拟接口
                    // 由于定时器里边的this指向window  先定义一下this
                    var that = this;
                    setTimeout(() => {
                        //模拟调用接口
                        if(uname == 'admin'){
                            that.tip = '用户名已经存在,请更换一个'
                        }else{
                            that.tip = '用户名可以使用'
                        }
                    }, 2000);
                }
            },
            watch:{
                uname:function(val){
                    //val指的是 uname改变的值
                    //调用后台接口验证用户名的合法性
                    this.checkName(val);
                    //修改提示信息
                    this.tip='正在验证....';
                }
            }
        })
    </script>

5.过滤器filter

局部过滤器,filters 全局过滤器注册 Vue.filter()

 <div id="app">
        <input type="text" v-model='msg'>
        <div>{{msg | upper}}</div>

        <div>{{msg | lower}}</div>
        <div>测试数据</div>
    </div>
    <script src="js/vue.js"></script>
    <script>
        //过滤器
        // 1.可以使用与插值表达式和属性绑定
        // 2.支持级联操作
        var vm = new Vue({
            el:'#app',
            data:{
                msg:''
            },
            filters:{
                upper:function(val){
                    return val.charAt(0).toUpperCase() + val.slice(1);
                },
                lower:function(val){
                    return val.charAt(0).toLowerCase()+val.slice(1);
                }
            }
        });

带参数的过滤器

 <div id="app">
        <div>{{date | format('yyyy-mm-dd')}}</div>
    </div>
    <script src="js/vue.js"></script>
    <script>
        var vm = new Vue({
            el:'#app',
            data:{
                date:new Date()
            },
            filters:{
                format:function(value,arg){
                    // console.log(value+'--------'+arg)
                    if(arg == 'yyyy-mm-dd'){
                        var ret = '';
                        ret += value.getFullYear() + '-' + (value.getMonth()+1) +'-' + value.getDate();
                        return ret; 
                    }
                    return value;
                    
                }
            }
        });
    
    </script>