suchen

Heim >Web-Frontend >js-Tutorial >Was sind Vue-Komponenten? Wie verwende ich Vue-Komponenten? (Codebeispiel)

Was sind Vue-Komponenten? Wie verwende ich Vue-Komponenten? (Codebeispiel)

青灯夜游
青灯夜游nach vorne
2018-10-24 17:38:372318Durchsuche

Dieser Artikel bietet Ihnen eine Einführung in die Vue-Komponenten. Wie verwende ich Vue-Komponenten? (Codebeispiel). Es hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen. Ich hoffe, es wird Ihnen hilfreich sein.

Einführung in Komponenten

  1. Das Komponentensystem unterteilt eine große Schnittstelle in kleinere steuerbare Einheiten.

  2. Komponenten sind wiederverwendbar und wartbar.

  3. Die Komponente verfügt über eine starke Kapselung und ist einfach zu verwenden.

  4. In Großanwendungen kann die Interaktion zwischen Komponenten entkoppelt werden.

Vue-Komponenten verwenden

  • Globale Komponenten verwenden 

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" media="screen" href="main.css" />
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
</head>

<body>
    <div id="app">
        <my-header></my-header>
    </div>


    <script>
        //全局组建的定义
        Vue.component("my-header", {
            template: '<h1>全局组件</h1>'
        });
        var app = new Vue({
            el: '#app',
        });
    </script>

</body>

</html>

  • Verwendung lokaler Komponenten

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" media="screen" href="main.css" />
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
</head>

<body>
    <div id="app">
        <my-header></my-header>
    </div>


    <script>
        //局部组件定义
        var app = new Vue({
            el: '#app',
            components: {
                'my-header': {
                    template: '<h1>局部组件</h1>'
                }
            }
        });
    </script>

</body>

</html>

  • Eigenschaften von Komponentendaten

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
</head>

<body>
    <div id="app">
        <my-header></my-header>
        <my-header></my-header>
        <br>
        <my-header1></my-header1>
        <my-header1></my-header1>
    </div>

    <script>
        //组件数据之间不共享，Vue实例中的数据也不能共享给组件,并且组件中的data只能使用函数
        //组件的数据data使用函数的特点是每次点击或操作组件函数会重新执行，这样就不会影响其它组件，通过下面两个例子可以看出
        var data = {
            count: 0
        };
        var app = new Vue({
            el: '#app',
            data: {
                message: "Hello Vue!!!"
            },
            components: {
                'my-header': {
                    template: '<h1 v-on:click="changeCount">{{count}}</h1>',
                    data: function() {
                        return data;
                    },
                    methods: {
                        changeCount: function() {
                            this.count++;
                        }
                    }
                },
                'my-header1': {
                    template: '<div v-on:click="changeCount1">{{count}}</div>',
                    data: function() {
                        return {
                            count: 0
                        };
                    },
                    methods: {
                        changeCount1: function() {
                            this.count++;
                        }
                    }
                }
            }
        });
    </script>

</body>

</html>

  • Die Beziehung zwischen Vue-Instanzen und Komponenten

Die Vue-Komponente ist eigentlich eine erweiterbare Vue-Instanz. 

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
</head>

<body>
    <div id="app">
        {{message}}
    </div>

    <script>
        //Vue组件其实是一个可扩展的Vue实例，Vue实例也可以看成是一个组件
        // var app = new Vue({
        //     el: '#app',
        //     template: '<h1>app应用</h1>'
        // });
        //使用继承实现Vue组件
        var myComponent = Vue.extend({
            data: function() {
                return {
                    message: "Hello Vue@@@"
                }
            }
        });
        var vm = new myComponent({
            el: '#app'
        });
    </script>

</body>

</html>

  • Die Vorlagenmethode von Vue-Komponenten

  2. `

  5. .vue einzelne Datei

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
</head>

<body>
    <div id="app">
        <my-header></my-header>
        <my-header-1></my-header-1>
        <my-header-2></my-header-2>
        <my-header-3></my-header-3>
    </div>


    <template id="temp">
            <div>
                <p>
                    <ul>
                            <li>1</li>
                            <li>2</li>
                            <li>3</li>
                        </ul>
                    </p>
                </div>
    </template>
    <script type="text/x-template" id="temp1">
        <div>
            <p>
                <ul>
                    <li>1</li>
                    <li>2</li>
                    <li>3</li>
                </ul>
            </p>
        </div>
    </script>
    <script>
        //Vue模版添加方式
        var app = new Vue({
            el: '#app',
            components: {
                'my-header': {
                    template: '<div>\
                                    <p>\
                                        <ul>\
                                            <li>1</li>\
                                            <li>2</li>\
                                            <li>3</li>\
                                        </ul>\
                                    </p>\
                                </div>',
                    data: function() {
                        return {
                            message: "第一项"
                        }
                    }
                },
                'my-header-1': {
                    template: `<div>
                                    <p>
                                        <ul>
                                            <li>1</li>
                                            <li>2</li>
                                            <li>3</li>
                                        </ul>
                                    </p>
                                </div>`,
                },
                'my-header-2': {
                    template: '#temp'
                },
                'my-header-3': {
                    template: '#temp1'
                }

            }
        });
    </script>

</body>

</html>

  • Die übergeordnete Vue-Komponente kommuniziert mit untergeordneten Komponenten (Requisiten) 

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
</head>

<body>
    <div id="app">
        <!-- 数据在组件中 -->
        <my-header></my-header>
        <!-- 父组件向子组件传递数据 -->
        <my-header-1 :list="temp_2_list"></my-header-1>
        <!-- 父组件向子组件传递数据不给值 -->
        <my-header-1></my-header-1>

    </div>
    <!-- 数据在组件中的模版 -->
    <template id="temp-1"> 
            <div>
                    <h1>{{message}}</h1>
                    <ul>
                        <li v-for="item in list">{{item}}</li>
                    </ul>
                </div>
    </template>
    <!-- 父组件向子组件传递数据的模版 -->
    <template id="temp-2">
            <div>
                    <h1>{{message}}</h1>
                    <ul>
                        <li v-for="item in list">{{item}}</li>
                    </ul>
                    <my-nav :itemlist = "list"></my-nav>
                </div>
    </template>
    <!-- 子组件向子组件传递数据的模版 -->
    <template id="temp-3">
            <div>
                    <h1>{{message}}</h1>
                    <ul>
                        <li v-for="item in itemlist">{{item}}</li>
                    </ul>
                </div>
    </template>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                temp_2_list: ["1", "2", "3"]
            },
            components: {
                //数据在自己组件中的实例
                'my-header': {
                    template: '#temp-1',
                    data: function() {
                        return {
                            list: ["1", "2", "3"],
                            message: "组件中的数据"
                        };
                    }
                },
                //父组件向子组件传递数据
                'my-header-1': {
                    //props: ["list"],
                    template: '#temp-2',
                    data: function() {
                        return {
                            message: "父组件向子组件传递数据"
                        };
                    },
                    //属性的验证与默认值
                    props: {
                        list: {
                            type: Array,
                            default: ["4", "5", "6"]
                        }
                    },
                    //子组件的子组件
                    components: {
                        'my-nav': {
                            template: '#temp-3',
                            data: function() {
                                return {
                                    message: "子组件中的子组件"
                                };
                            },
                            props: ["itemlist"]
                        }
                    }
                }
            }
        });
    </script>

</body>

</html>

  • Untergeordnete Komponente kommuniziert mit übergeordneter Komponente (EmitEvents) 

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
</head>

<body>
    <div id="app">
        <my-header-1 :list="temp_2_list"></my-header-1>

    </div>
    <!-- 父组件向子组件传递数据的模版 -->
    <template id="temp-2">
        <div>
                <h1>{{message}}</h1>
                <ul>
                    <li v-for="item in list">{{item}}</li>
                </ul>
                <my-nav :itemlist = "list" v-on:change-events="getChildContent"></my-nav>
            </div>
</template>
    <!-- 子组件向子组件传递数据的模版 -->
    <template id="temp-3">
        <div>
                <h1>{{message}}</h1>
                <ul>
                    <li v-for="item in itemlist" v-on:click="getContent">{{item}}</li>
                </ul>
            </div>
</template>

    <script>
        //子组件向父组件传递数据，是发布订阅模式
        var vm = new Vue({
            el: '#app',
            data: {
                temp_2_list: ["1", "2", "3"]
            },
            components: {
                //父组件向子组件传递数据
                'my-header-1': {
                    //props: ["list"],
                    template: '#temp-2',
                    data: function() {
                        return {
                            message: "父组件向子组件传递数据"
                        };
                    },
                    //属性的验证与默认值
                    props: {
                        list: {
                            type: Array,
                            default: ["4", "5", "6"]
                        }
                    },
                    methods: {
                        getChildContent: function(str) {
                            debugger
                            alert(str);
                        }
                    },
                    //子组件的子组件
                    components: {
                        'my-nav': {
                            template: '#temp-3',
                            data: function() {
                                return {
                                    message: "子组件中的子组件"
                                };
                            },
                            props: ["itemlist"],
                            methods: {
                                getContent: function(ev) {
                                    // console.log(this);
                                    // console.log(ev.target.innerHTML);
                                    this.$emit("change-events", ev.target.innerHTML);
                                }
                            }
                        }
                    }
                }
            }
        });
    </script>

</body>

</html>

  • Kommunikation zwischen Vue-Nicht-Eltern-Kind-Komponenten

  1. Leere Instanz und benutzerdefiniertes Ereignis

    1. $emit

    2. $on

  2. Vuex State Management

    1. State

    2. Mutation

    3. Commit

Verwendung leerer Instanzen und benutzerdefinierter Ereignisse (geeignet für kleine Projekte)

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
    <style>
        ul {
            list-style-type: none;
        }
    </style>
</head>

<body>
    <div id="app">
        <my-header-1></my-header-1>
        <my-header-2></my-header-2>

    </div>

    <script>
        //非父子组件通信

        //1.0 使用空实例进行非父子组件通信
        //定义空实例
        //创建步骤是：
        //1、首先定义一个空实例 
        //2、需要给被传递数据的A组件使用$emit绑定自定义事件，并将A组件的数据发布给B组件 
        //3、使用$on订阅A组件发布过来的数据，从而获取数据
        var busVm = new Vue();
        var vm = new Vue({
            el: '#app',
            components: {
                //组件B
                'my-header-1': {
                    template: `<h1>{{message}}</h1>`,
                    data: function() {
                        return {
                            message: "非父子组件通信"
                        };
                    },
                    mounted() {
                        //使用bind（this）修正this
                        busVm.$on("changeEnvents", function(param) {
                            this.message = param;
                        }.bind(this));
                    },
                },
                //组件A
                'my-header-2': {
                    template: `<ul><li @click="getContent" v-for="item in list">{{item}}</li></ul>`,
                    data: function() {
                        return {
                            list: ["第一项", "第二项", "第三项"]
                        };
                    },
                    methods: {
                        getContent: function(ev) {
                            busVm.$emit("changeEnvents", ev.target.innerHTML);
                        }
                    }
                }
            }
        });
    </script>

</body>

</html>

Vuex-Statusverwaltung

  • Vue-Komponente Inhaltsverteilung

    • Einzelner -Tag mit 

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
    <style>
        ul {
            list-style-type: none;
        }
    </style>
</head>

<body>
    <div id="app">
        <my-header-1>
            <h1>我是标题</h1>
        </my-header-1>

        <my-header-1>
            <my-header-2></my-header-2>
        </my-header-1>

    </div>

    <script>
        //单插槽<slot></slot>
        var vm = new Vue({
            el: '#app',
            components: {
                'my-header-1': {
                    template: `<div>我是头部:<slot></slot></div>`,

                },
                'my-header-2': {
                    template: `<h1>我是标题</h1>`,
                }
            }
        });
    </script>

</body>

</html>

    • Mehrere -Tags verwenden 

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
    <style>
        ul {
            list-style-type: none;
        }
    </style>
</head>

<body>
    <div id="app">
       
        <my-header-1>
            <button slot="left">←</button>
            <button slot="right">→</button>
        </my-header-1>

    </div>

    <script>


        //多插槽的使用，则使用name属性来指定要插入的位置
        var vm = new Vue({
            el: '#app',
            components: {
                'my-header-1': {
                    template: `<div><slot name="left"></slot> 我是头部:<slot name="right"></slot></div>`,
                },
                'my-header-2': {
                    template: `<h1>我是标题</h1>`,
                }
            }
        });
    </script>

</body>

</html>

  • Standardwert

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
    <style>
        ul {
            list-style-type: none;
        }
    </style>
</head>

<body>
    <div id="app">

        <my-header-1>
            <button slot="left">←</button>
            <button slot="right">→</button>
        </my-header-1>

    </div>

    <script>
        //多插槽的使用，则使用name属性来指定要插入的位置
        var vm = new Vue({
            el: '#app',
            components: {
                'my-header-1': {
                    template: `<div><slot name="left"></slot> 我是头部:<slot name="right"><button slot="right">+</button></slot></div>`,
                },
                'my-header-2': {
                    template: `<h1>我是标题</h1>`,
                }
            }
        });
    </script>

</body>

</html>

  • Vue-Komponentenentwicklungsprozess

  1. Grundlegendes HTML und CSS schreiben

  2. Komponenten extrahieren

  3. Datenübertragung

  4. Inhaltsverteilung

  5. Ereignisse und Methoden hinzufügen

  • DOM-Manipulation in Vue (mit $refs)

      • <!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
</head>

<body>
    <div id="app">
        <my-header-1 :list="temp_2_list"></my-header-1>

    </div>
    <!-- 父组件向子组件传递数据的模版,ref特性用于DOM操作，使用this.$refs.row获取添加特性的DOM元素 -->
    <template id="temp-2">
        <div>
                <h1>{{message}}</h1>
                <ul >
                    <li  v-for="item in list" v-on:click="updateStyle" style="color:blue" ref="row">{{item}}</li>
                </ul>
                
            </div>
      </template>

    <script>
        //子组件向父组件传递数据，是发布订阅模式
        var vm = new Vue({
            el: '#app',
            data: {
                temp_2_list: ["1", "2", "3"]
            },
            components: {
                //父组件向子组件传递数据
                'my-header-1': {
                    //props: ["list"],
                    template: '#temp-2',
                    data: function() {
                        return {
                            message: "父组件向子组件传递数据"
                        };
                    },
                    //属性的验证与默认值
                    props: {
                        list: {
                            type: Array,
                            default: ["4", "5", "6"]
                        }
                    },
                    methods: {
                        updateStyle: function(ev) {
                            ev.target.style.color = 'red';
                            // this.$refs.row.style.color = 'red';
                            console.log(this.$refs.row);
                            this.$refs.row.forEach(element => {
                                console.log(element);
                                element.style.color = 'red';
                            });
                        }
                    }
                }
            }
        });
    </script>
</body>
</html>

      Das obige ist der detaillierte Inhalt vonWas sind Vue-Komponenten? Wie verwende ich Vue-Komponenten? (Codebeispiel). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

      css html 封装 事件 dom
      Stellungnahme：
      Dieser Artikel ist reproduziert unter:cnblogs.com. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen
      Vorheriger Artikel：Was sind Vue-Listenkomponenten und Popup-Komponenten? Verwendung von Listenkomponenten und Popup-Komponenten (Codebeispiel)Nächster Artikel：Was sind Vue-Listenkomponenten und Popup-Komponenten? Verwendung von Listenkomponenten und Popup-Komponenten (Codebeispiel)

      In Verbindung stehende Artikel

      Mehr sehen