Vue常用api

filters/computed/methods/watch/style/class

<template>
<div>
    <div>{{name|format}}<div>
    <div :class={one:true,two:false,three:true}>class<div>
    <div :style="isbg?'color:blue;':'color:red'">style<div>
</div>

</template>

<script>
export default{
    data(){
        return{
            name:'ivan',
            isbg:true,
        }
    },

    methods:{
        getData(){
            this.name="ivan_12"
        }
    },
    filters:{
        format(str){
            return str+'_12'
        }
    },
    computed:{
        fullName(){
           return this.name+"_12"
        }
    },
    watch:{
        name:{
            handler(n,o){
                if(n!=o){
                    return 'watch name'
                }
            },
            deep:true,
            immediate:true
        }
    }
}
</script>

$listeners/$attrs

<template>
<div>
    <child @custom="parentMethod" my-attr="value"></child>
<div>
<template>

<template>
    <div @click="$listeners.custom" :my-attr="$attrs.myAttr"></div>
</template>

provide/inject

<template>
<div>
    <child @custom="parentMethod" my-attr="value"></child>
<div>
<template>
<script>
export default{
    provide() {
        return {
            foo:'test',
            bar:function(){
                console.log('test')
            }
        }
    }
}
</script>

<template>
    <div @click="$listeners.custom" :my-attr="$attrs.myAttr"></div>
</template>
<script>
export default{
   inject:['foo','bar'],
}
</script>

mixins 组件内优先级高于mixins

export defult{
    data(){
        return {
            test:''
        }
    },
    methods:{
        dosome(){}
    },
    computed:{
        pro(){}
    },
    created(){

    }
}
<script>
import myMix from './mixin.js'
export default{
    mixins:[myMix],
    data(){return{}}
}
</script>

directives

export default{
    directives:{
        'my-dir':{
            bind:function(el,binding,vnode){

            },
            mounted:(el)=>{
                el.focus()
            }
        }
    }
}

slot

<template>
<div>
<child><p>content</p><child>
</div>
</template>

<template>
<div>
<slot/>
</div>
</template>

<template>
<div>
<child>
    <template v-slot:header>header</template>
    <template v-slot:footer>footer</template>
<child>
</div>
</template>

<template>
<div>
    <slot name="header"/>
    <slot name="footer"/>
</div>
</template>

<template>
<div>
<child>
    <template slot="default" slot-scope="{name}">{{name}}</template>
<child>
</div>
</template>

<template>
<div>
    <slot :name="test"/>
</div>
</template>
<script>
export default{
    data(){
        return {
            test:""
        }
    }
}
</script>