过滤器
全局过滤器要在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:'