Vue 学习(2)

之前都是笼统学了下,今天再把基础系统的学习一下

1.过滤器

当从服务器接收到数据,例如http://p0.meituan.net/w.h/movie/8de713ce22b34faf8d033f1aa62918dc857749.jpg

加颜色的 w h分别为宽度和高度,如果直接请求这个地址会请求不到这个图片,需要对w.h进行过滤修改。

<img :src="item.img | pathDite"></img> 
//过滤器设置
Vue.filter('pathDite',(data)=>{ //data相当于上面的item.img的值
    return data.replace('w.h','128.180') //替换w.h为128.180
})

2.自定义指令

如果需要对底层dom进行修改可以使用自定义指令实现。

<p v-hello="'pink'">123</p>
<p v-hello="bg">123</p>
Vue.directive('hello',{
    inserted(el,bind){ //el为返回的创建的dom节点,bind为指令的属性
        el.style.color = bind.value //可以通过value来获得传入的值等于上面的pink
        console.log(bind.value)
    },
    update(el,bind){ //当数据发生改变时,dom的属性也会跟着修改,单向数据绑定
        el.style.color = bind.value 
    }
})
0 0