zoukankan      html  css  js  c++  java
  • 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

  • 相关阅读:
    WebService出错 Maximum message size quota for incoming messages (65536) has been exceeded.已超过传入消息(65536)的最大消息大小配额
    php 获取系统时间
    JavaSctipt 控制网页 前进,后退
    放A片的文件夹的名字
    玩玩独轮车
    3月18日周六骑行三水大旗头村——广东名镇之一
    叫春的猫
    抓紧锻炼身体噢!
    使用Zend Framework中的 Zend_Pdf来创建pdf文档
    虚拟主机示例
  • 原文地址:https://www.cnblogs.com/pengsi/p/7786522.html
Copyright © 2011-2022 走看看