VUE的一些工具类

计算属性

export default {
    computed: {
        return 'aa'
    }
}

自定义指令

// 注册全局组件
Vue.component('my-button', {
    render(h){
        return h('button', 'hello');
    }
})

// 自定义指令
Vue.directive('color', function(el, obj){
    el.style.color = obj.value || 'red';
})

eventBus

// 子组件-1
import bus from './bus';
created(){
    bus.$on('getData1', (data) => {
        this.data = data;
    })
}

// 子组件-2
import bus from './bus';
created(){
    bus.$on('getData2', (data) => {
        this.data = data;
    })
},
methods: {
    getData(){
        bus.$emit('getData1', this.data)
    }
}    

// bus
import Vue from 'vue';
let vm = new Vue();
export default vm;

filter

<div id="app">
    <!-- | 管道符 -->
    <h1>{{name|b('options')|test}}</h1>
</div>

Vue.filter('test', function(val){
    return 'hello_' + val + 'world';
})
export default {
    data(){
        return {
      		name: '小明'      
        }
    },
    filters: { 
        // 视图更新 过滤器就会更新，与直接在模板内使用methods方法一样
        join(val, options){
            return '你好_' + val + options;
        }
    }
}

过滤器一般用来格式化数据，3.0已经移除该方法

插槽

<div v-for="i in data">
    <slot name='a'></slot>
    <slot name='b' :data="i"></slot>
</div>

<h1 slot="a">hello</h1>
<h1 slot-scope="data">haha{{data}}</h1>

<template v-slot:a>
	<h1>world</h1>
</template>

简写
<template #a>
	<h1>haha</h1>
</template>

<template #b="data">
	<h1>haha{{data}}</h1>
</template>

watch

export default {
    data(){
        return {
           name: 'a',
           obj: {
               a: 123
           }
        }
    },
    watch: {
        name(newVal, oldVal){
        	console.log(newVal, oldVal);
    	},
    	obj: {
            deep: true, // 深度监听
            immediate: true, // 页面加载的时候先执行一次
            handler(newVal, oldVal){
                console.log(newVal, oldVal);
            }
        }
        'obj.a': function(newVal, oldVal){ // 单独监听对象下的某一个属性
    		console.log(newVal, oldVal)
		}
    }
}

计算属性和侦听器区别：

1. 计算属性不好写异步，watch无所谓