3.13

51 阅读2分钟

过滤器

全局过滤器要在new Vue上面写

Vue.filter('fn',function(v,s){ 这里的v就是管道符左边的数据'我我我,我恁' ,这里的v就是上面fn传参的aa

  return v.substring(0,v.indexOf(',')) 这一段是截取,截的是逗号之前的内容。到谁不取谁,就是substring的截取 
        return v+sreturn v.substring(0,v.indexOf(','))这一段是截取,截的是逗号之前的内容。到谁不取谁,就是substring的截取
    })
     <h1>{{'我我我,我恁'|fn('aa')}}</h1><!-- 这个|叫管道符,记得前后加双大括号 ,然后注意引号的位置。fn起到一个过滤器的作用-->
     
     

局部过滤器 /* 局部过滤器 / filters:{ str:function(v,s){ return v+s; }, strr:function(v){ return v.split('')/ 字符串转数组 /.reverse()/ 反转数组中的顺序 /.join('')/ 数组转字符串 */ }, } })

自定义指令

如果想使用自定义属性直接在后面加这个v-bg就可以了 ,bg就是下面 Vue.directive括号内写的内容

/* 全局自定义指令 简写方式,不适用于focus()方法*/ /* 定义指令要放在实例化vue对象的前面 / // Vue.directive('bg',function(el){ // / 回调函数的第一个参数就是元素本身 */ // el.style.background="red" // })

    //  Vue.directive('focus',function(el){
    //      /* 回调函数的第一个参数就是元素本身 */
    //     console.log(el);
    //   el.style.width='100px'
       
    // })
    
    
     /* 全局自定义指令 全面的写法 */
    Vue.directive('focus',{
        /* 当绑定的元素插入到DOM中 */
        inserted:function(el,binding){
            el.focus();
            el.style.background = binding.value.background;
        }
    })
    
    
    
    
    
    
    局部自定义
    
     /* 局部的自定义指令 */
        directives:{
           font:{/* 可以同时让这些显示在一个元素上 */
                inserted:function(el,binding){
                    el.style.fontSize=binding.value.fontSize;
                    el.style.color=binding.value.color;
                    el.style.background=binding.value.background;
                }
               
            }}
            
            
            
            
            
   组件
    /* 全局的一定要写在new Vue */
    /* 组件本质是一个自定义标签,封装可重复函数的 */
    /* 全局组件,不同作用域内均可使用
       局部组件,只有在定义该组件的作用域内可使用
       必须要先注册(定义)后才能使用 */

/* 全局组件 / Vue.component('child1',{/ 同样的,组件名child1还是不可以有大写 ,浏览器编译的时候会转成小写,导致找不到组件,可以全变成小写,然后中间加-来解决*/ template:'

我是child1

' })/* 模板的第一种写法是直接写,第二种是使用template+id,同样的,还是和上面一样也要用div包裹才能出来 / Vue.component('child2',{/ 每一个组件,都要用一个div包裹 */ template:'#child2' })