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

  • 相关阅读:
    git(1)-git关联GitHub-windows-转载
    jenkins(4)-jenkins配置邮件通知
    jenkins(3)-linux下安装jenkins(yum install方式)
    【PAT甲级】1090 Highest Price in Supply Chain (25 分)(DFS)
    【PAT甲级】1087 All Roads Lead to Rome (30 分)(MAP【int,string】,邻接表,DFS,模拟,SPFA)
    【PAT甲级】1018 Public Bike Management (30 分)(DFS,SPFA)
    Educational Codeforces Round 61 (Rated for Div. 2) G(线段树,单调栈)
    Atcoder Grand Contest 032C(欧拉回路,DFS判环)
    Educational Codeforces Round 62 (Rated for Div. 2)E(染色DP,构造,思维,组合数学)
    Atcoder Grand Contest 031C(构造,思维,异或,DFS)
  • 原文地址:https://www.cnblogs.com/pengsi/p/7786522.html
Copyright © 2011-2022 走看看