Vue自定义事件

一.Vue的自定义事件：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Vue自定义事件</title>
    </head>
<body>
    <div id="app">
        <my-btn @total="allCounter()"></my-btn>
        <my-btn @total="allCounter()"></my-btn>
        <my-btn @total="allCounter()"></my-btn>
        <my-btn @total="allCounter()"></my-btn>
        <my-btn @total="allCounter()"></my-btn>
        <my-btn @total="allCounter()"></my-btn>
        <p>一共点击了{{totalCounter}}次</p>
    </div>

    <!--定义子组件模版 -->
    <template id="my-btn">
        <button @click="total()">点击了{{counter}}次</button>
    </template>

    <script src="js/vue.js"></script>
    <script>

        Vue.component('my-btn', {
            template: '#my-btn',
            data() {
                return {
                    counter: 0
                }
            },
            methods: {
                // 每次自增1
                total() {
                    this.counter += 1;
                    // alert(0);
                    // 通外界调用此方法
                    this.$emit("total");
                }
            }
        })
        // 创建vue的实例
        let vm = new Vue({
            el: '#app',
            data: {
                totalCounter: 0
            },
            methods: {
                allCounter() {
                    this.totalCounter += 1;
                }
            }
        });
    </script>
</body>
</html>

二 .Vue中的匿名插槽和实名插槽：

Slot插槽：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Vue的全局组件</title>
    </head>
<body>
    <div id="app">
        <my-slot>
            <img src="images/3.jpeg" width="200">
        </my-slot>
    </div>

    <template id= "my-slot">
        <div id="panel">
            <h2 class="panel-header">插槽的头部</h2>
            <!-- 预留一个插槽 -->
            <slot>可以替换任何标签，如果没有，则显示此提示内容</slot>
            <footer>插槽的尾部</footer>
        </div>
    </template>

    <script src="js/vue.js"></script>
    <script>

        Vue.component('my-slot', {
            template: '#my-slot',

        }) 

        // 创建vue的实例
        let vm = new Vue({
            el: '#app',
            data: {
                name: 'si peng'
            },
        });
    </script>
</body>
</html>

实名插槽：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Vue的全局组件</title>
    </head>
<body>
    <div id="app">
        <my-computer>
            <div slot="cpu">我是CPU</div>
            <img src="images/3.jpeg" width="200">
        </my-computer>
    </div>

    <template id= "my-computer">
        <div id="main">
            <slot name="cpu">这里是插CPU的</slot>
            <slot name="gpu">这里是插gpu的</slot>
            <slot name="memory">这里是插内存条的</slot>
            <slot name="hard-drive">这里是插硬盘的</slot>
        </div>
    </template>

    <script src="js/vue.js"></script>
    <script>

        Vue.component('my-computer', {
            template: '#my-computer',

        }) 

        // 创建vue的实例
        let vm = new Vue({
            el: '#app',
            data: {
                name: 'si peng'
            },
        });
    </script>
</body>
</html>

三.Vue.router的使用：

学习链接：

https://cn.vuejs.org/v2/guide/

https://mp.weixin.qq.com/s?__biz=MzIxNjEzNjUzOQ==&mid=502636119&idx=1&sn=1f5a8ce0bda11d9e3458abcb6ae552d1&chksm=0f8c906338fb1975888bca685a9b892dae6ff17811b8b93b388b2cb107a36f42aa27e1282218&mpshare=1&scene=23&srcid=1029I4JE1piCtU8xYCPt5SqA#rd

视频学习：

http://study.163.com/course/courseMain.htm?courseId=1004179049