Vue コンポーネントとは何ですか? Vue コンポーネントを使用するにはどうすればよいですか? (コード例)-jsチュートリアル-php.cn

ホームページ

ウェブフロントエンド

jsチュートリアル

Vue コンポーネントとは何ですか? Vue コンポーネントを使用するにはどうすればよいですか? (コード例)

青灯夜游

Oct 24, 2018 pm 05:38 PM

vue vueコンポーネント

この記事では、Vue コンポーネントとは何かについて説明します。 Vue コンポーネントを使用するにはどうすればよいですか? (コード例)。困っている友人は参考にしていただければ幸いです。

コンポーネントの紹介

コンポーネントシステムは、大きなインターフェイスを小さな制御可能なユニットに分割します。
コンポーネントは再利用可能で保守可能です。
このコンポーネントは強力なカプセル化を備えており、使いやすいです。
大規模なアプリケーションでは、コンポーネント間の相互作用を切り離すことができます。

#Vue コンポーネントの使用

グローバルコンポーネントの使用

<!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>

ログイン後にコピー

ローカルコンポーネントの使用

<!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>

ログイン後にコピー

特徴コンポーネントデータの

<!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>

ログイン後にコピー

Vue インスタンスとコンポーネントの関係

Vue コンポーネントは実際には拡張可能な Vue インスタンスです。

<!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>

ログイン後にコピー

Vue コンポーネントのテンプレートメソッド

\
`
<スクリプトタイプ= "text/x-template">
.vue 単一ファイル

<!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>

ログイン後にコピー

Vue の親コンポーネントは子コンポーネント (props) と通信します

<!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>

ログイン後にコピー

子コンポーネントは親コンポーネント (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>

ログイン後にコピー

# Vue の非親子コンポーネントの通信

<!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 状態管理

単一

<!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>

ログイン後にコピー

複数のタグは

<!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>

ログイン後にコピー

デフォルト値

<!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 コンポーネント開発プロセス

基本的な HTML と CSS の記述

#データ送信
##コンテンツ配布
##イベントとメソッドの追加
#Vue での DOM 操作 ($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>

ログイン後にコピー

以上がVue コンポーネントとは何ですか? Vue コンポーネントを使用するにはどうすればよいですか? (コード例)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

ホットトピック

Gmailメールのログイン入り口はどこですか？

7688

Java チュートリアル

1639

CakePHP チュートリアル

1393

Laravel チュートリアル

1287

PHP チュートリアル

1229

Related knowledge

VueでBootstrapの使用方法 Apr 07, 2025 pm 11:33 PM

vue.jsでBootstrapを使用すると、5つのステップに分かれています。ブートストラップをインストールします。 main.jsにブートストラップをインポートしますブートストラップコンポーネントをテンプレートで直接使用します。オプション：カスタムスタイル。オプション：プラグインを使用します。

VUEのボタンに関数を追加する方法 Apr 08, 2025 am 08:51 AM

HTMLテンプレートのボタンをメソッドにバインドすることにより、VUEボタンに関数を追加できます。 VUEインスタンスでメソッドを定義し、関数ロジックを書き込みます。

VueでWatchの使用方法 Apr 07, 2025 pm 11:36 PM

Vue.jsの監視オプションにより、開発者は特定のデータの変更をリッスンできます。データが変更されたら、Watchはコールバック関数をトリガーして更新ビューまたはその他のタスクを実行します。その構成オプションには、すぐにコールバックを実行するかどうかを指定する即時と、オブジェクトまたは配列の変更を再帰的に聴くかどうかを指定するDEEPが含まれます。

Vue Multi-Page開発とはどういう意味ですか？ Apr 07, 2025 pm 11:57 PM

VUEマルチページ開発は、VUE.JSフレームワークを使用してアプリケーションを構築する方法です。アプリケーションは別々のページに分割されます。コードメンテナンス：アプリケーションを複数のページに分割すると、コードの管理とメンテナンスが容易になります。モジュール性：各ページは、簡単に再利用および交換するための別のモジュールとして使用できます。簡単なルーティング：ページ間のナビゲーションは、単純なルーティング構成を介して管理できます。 SEOの最適化：各ページには独自のURLがあり、SEOに役立ちます。

vue.jsでJSファイルを参照する方法 Apr 07, 2025 pm 11:27 PM

vue.jsでJSファイルを参照するには3つの方法があります。タグ;; mounted（）ライフサイクルフックを使用した動的インポート。 Vuex State Management Libraryを介してインポートします。

Vueによる前のページに戻る方法 Apr 07, 2025 pm 11:30 PM

vue.jsには、前のページに戻る4つの方法があります。$ router.go（-1）$ router.back（）outes＆lt; router-link to =＆quot;/＆quot; Component Window.history.back（）、およびメソッド選択はシーンに依存します。

VUEトラバーサルの使用方法 Apr 07, 2025 pm 11:48 PM

Vue.jsには配列とオブジェクトを通過するには3つの一般的な方法があります。V-Forディレクティブは、各要素をトラバースしてテンプレートをレンダリングするために使用されます。 V-BindディレクティブをV-Forで使用して、各要素の属性値を動的に設定できます。 .mapメソッドは、配列要素を新しい配列に変換できます。

VueのDivにジャンプする方法 Apr 08, 2025 am 09:18 AM

VUEにDIV要素をジャンプするには、VUEルーターを使用してルーターリンクコンポーネントを追加するには、2つの方法があります。 @clickイベントリスナーを追加して、これを呼び出します。$ router.push（）メソッドをジャンプします。

See all articles

Vue コンポーネントとは何ですか? Vue コンポーネントを使用するにはどうすればよいですか? (コード例)

ホットAIツール

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

Video Face Swap

人気の記事

ホットツール

メモ帳++7.3.1

SublimeText3 中国語版

ゼンドスタジオ 13.0.1

ドリームウィーバー CS6

SublimeText3 Mac版

ホットトピック