Vue知识总结

指令

看文档，没啥好写的。

组件与父组件传值方式

父>子
1.先给父组件中绑定自定义的属性。
2.在子组件中使用props接收父组件传递的数据。
3.可以在子组件中任意使用。
子>父
1.在父组件绑定自定义事件
2.在子组件中触发原生的事件，在函数中使用$emit触发自定义的childHandler

具名插槽

标签详细讲解看这个文章，https://www.cnblogs.com/tomatoto/p/9633631.html

过滤器

过滤器的作用：为页面中数据进行添油加醋。
有两种使用方式：局部过滤器和全局过滤器。
使用流程：1.声明过滤器。2.使用过滤器{{数据 | 过滤器名字}}

/**全局过滤器使用方法**/
Vue.filter('myReverse', function(value, arg) {
    return arg + ' ' + value.split('').reverse().join('');
});
/**使用**/
{{数据 | myReverse('xipiker')}}

watch

总结一句话watch监听的是单个属性
基本数据类型 简单监视
复杂数据类型 深度监视，比如object、array

watch: {
    msg: function(newV, oldV) {
        console.log(newV, oldV);
    },
    // 监听复杂数据类型object、array进行深度监听
    stus: {
        deep: true,
        handler: function(newV, oldV) {
            console.log(newV, oldV);
        }
    }
}

计算属性 computed

以下代码为伪代码，供自己了解和脑补，读者请勿做过多评价

<div id="app">
    <audio :src='getCurrentSongSrc' autoplay controls />
    <ul v-for="(item, index) in musicData" @click='clickHandler(index)' class='{active: currentIndex === index}'>
        <li>{{item.name}}</li>
    </ul>
</div>
<style>
    .active{
        background: #ccc;
    }
</style>

data() {
    return {
        musicData: [{
            id: '1',
            name: 'x',
            songSrc: './static/xxx1.mp3'
        }, {
            id: '2',
            name: 'p',
            songSrc: './static/xxx2.mp3'
        }],
        currentIndex: 0
    }
},
commputed: {
    getCurrentSongSrc: {
        set: function(newV) {
            this.currentIndex = newV;
        },
        get: function() {
            return this.musicData[this.currentIndex].songSrc
        }
    }
},
methods: {
    clickHandler(index) {
        //直接修改的数据属性
        this.getCurrentSongSrc = index;
    }
}

生命周期

created: function() {
    // 组件创建后，使用该组件就会调用created方法
    // 在created这个方法中可以操作后端的数据，数据驱动视图
},
beforeMount: function() {
    // 挂载数据到DOM之前会调用
},
mounted: function() {
    // 挂载数据到DOM之后会调用Vue作用以后的DOM，操作DOM
},
beforeUpdate: function() {
    // 在更新DOM之前调用钩子，应用：可获取原始的DOM
},
update: function() {
    // 在更新DOM之后调用钩子，应用：可获取最新的DOM
},
beforeDestroy: function() {
    // 销毁组件前执行
},
destroy: function() {
    // 销毁组件化执行
},
activated: function() {
    // 组件被激活了激活
},
deactivated: function() {
    // 组件被停用了
}