props,filter,directive,slot

最新推荐文章于 2024-01-26 17:11:23 发布

zhangyuea

最新推荐文章于 2024-01-26 17:11:23 发布

阅读量206

点赞数

文章标签： vue

本文链接：https://blog.csdn.net/zhangyuea/article/details/89481054

版权

props属性验证，过滤器，自定义指令，插槽

1. props属性验证

常用形式：

props: {
key: keyType // key是从父组件获得的自定义属性， 值是我们期望得到的数据类型
}

//当我们需要满足某个条件才输出时，可以使用validateor( val )函数，函数内返回满足条件的

props: {
    key: {
    validator( value ){
         return value 的条件value是接收到的属性的值
    }
    }
}

不常用形式

props: {
    propA: [],里面的类型都可以
    propB: {//
        type: String,
        require: true//require是必须有的
    },
    propC: {
        type:String,
        default: 'yyb'//default是默认值
    },
    propD: {
        type: String,
        default: function(){
            return 'yyb'
        }
    }
}

有时候有的项目总也会使用一个叫做 vue-validate validate这些第三方库

2. 过滤器

vue 1.x版本一共提供了10个过滤器，但是不满足人们使用，vue2.x全部不提供了，交给开发者自己写
但是vue提供饿了定义过滤器的方式
过滤器：对数据进行格式化的一个函数
过滤器可以用在两个地方：双花括号插值和 v-bind 表达式
过滤器用给一个 ’ | ’ 表示，我们称之为 ‘管道符’

html代码
<body>
    <div id="app">
        <div>
            {{ msg | yuan("￥") }}<!--通过 \ 这个符号来连接-->
            {{ bian | bi }}
        </div>
    </div>
</body>


Vue.filter('bi',function(value){//全局过滤器
    var tes=/0-9/
        if(tes.test(value)){//大小写转换
            value.toLowerCase()
        }else{
            value.toUpperCase()
         }
    // var a=value.toUpperCase()
    // return a
})
new Vue({
    el:'#app',
    data:{
        msg:9999,
        bian:'asf'
    },
    filters:{//filters局部过滤器
        yuan (value,type) {//第一个参数是绑定这个过滤器的元素的值，后面的参数是自己传的参数，需要什么传什么
        return type+value//要把值返回出去
        }
    }
})

3. 自定义指令

自定义指令分为：全局自定义指令和局部自定义指令

指令的钩子函数（一共有5个） //一般都只会用前面两个
- bind : 指令和元素第一次绑定的时候调用//无论什么时候都会调用的
- inserted ：指令绑定的元素插入父节点的时候调用
- update ：指令绑定的元素自身，或是他的内容（子节点）发生改变的时候出发
- componentUpdated ：指令绑定的组件自身，或是他的内容（子节点）发生改变的时候出发
- unbind ：指令和元素第一次解绑是调用
指令的钩子函数的参数
- el 当前元素
- binding 前端指令的所有信息
- vNode 当前指令绑定的虚拟节点
- oldVnode 指令绑定前的虚拟节点

渲染函数和 jsx
渲染函数 render函数 — 》 createElment
jsx( javascript + xml )
- xml 就是一种标签化的数据格式
- jsx语法浏览器无法解析，必须靠babel来解析
- jsx语法出现的原因是为了解决,render函数频繁使用createElement来创建节点
过渡 & 动画

过渡指的是用 css3 的transition来实现动画效果
动画指的是用 js来实现动画效果

Vue中一共给了四种解决方案，但是我们常用的只有一种
- 在 CSS 过渡和动画中自动应用 class
- 可以配合使用第三方 CSS 动画库，如 Animate.css 【推荐】
- 在过渡钩子函数中使用 JavaScript 直接操作 DOM
- 可以配合使用第三方 JavaScript 动画库，如 Velocity.js

slot 插槽


<body>
    <div id="app">
        <Hello>//这是模板标签，只要下面写了slot，这个标签里面就可以写标签了
            <div> 这是组件内直接写的 </div>
        </Hello>
    </div>
    <template id="hello">
        <div>
            <h3> 骏哥, 被伤了 </h3>
            <slot></slot>//这里写个slot，上面就可以写标签了，写多少都可以
        </div>
    </template>
</body>

具名插槽，具名插槽在vue的3.0中将会有大作用


<body>
    <div id="app">
        <Hello>//这里是模板标签
        <header slot = 'header'>头部</header><!--这里按照slot的名字可以放在具体的位置-->
        <section slot = "content"> 内容 </section>
        <footer slot = "footer"> 底部 </footer>
        </Hello>
    </div>
    <template id="hello">
        <div>
            <slot name = 'header'></slot>//这里slot给个名字，上面就可以通过这个名字排位置了
            <h3> 骏哥, 被伤了 </h3>
            <slot name = "content"></slot>
            <slot name = "footer"></slot>
        </div>
    </template>
</body>