jsチュートリアル

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

青灯夜游

Oct 24, 2018 pm 05:38 PM

vuevueコンポーネント

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

コンポーネントの紹介

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

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

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

nbsp;html>



    <meta>
    <meta>
    <title>Page Title</title>
    <meta>
    <link>
    <script></script>



    <div>
        <my-header></my-header>
    </div>


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

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

nbsp;html>



    <meta>
    <meta>
    <title>Page Title</title>
    <meta>
    <link>
    <script></script>



    <div>
        <my-header></my-header>
    </div>


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

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

nbsp;html>



    <meta>
    <meta>
    <title>Page Title</title>
    <meta>
    <script></script>



    <div>
        <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: &#39;#app&#39;,
            data: {
                message: "Hello Vue!!!"
            },
            components: {
                &#39;my-header&#39;: {
                    template: &#39;<h1 v-on:click="changeCount">{{count}}&#39;,
                    data: function() {
                        return data;
                    },
                    methods: {
                        changeCount: function() {
                            this.count++;
                        }
                    }
                },
                &#39;my-header1&#39;: {
                    template: &#39;<div v-on:click="changeCount1">{{count}}&#39;,
                    data: function() {
                        return {
                            count: 0
                        };
                    },
                    methods: {
                        changeCount1: function() {
                            this.count++;
                        }
                    }
                }
            }
        });
    </script>

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

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

nbsp;html>



    <meta>
    <meta>
    <title>Page Title</title>
    <meta>
    <script></script>



    <div>
        {{message}}
    </div>

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

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

\
`
.vue 単一ファイル

nbsp;html>



    <meta>
    <meta>
    <title>Page Title</title>
    <meta>
    <script></script>



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


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

            }
        });
    </script>

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

nbsp;html>



    <meta>
    <meta>
    <title>Page Title</title>
    <meta>
    <script></script>



    <div>
        <!-- 数据在组件中 -->
        <my-header></my-header>
        <!-- 父组件向子组件传递数据 -->
        <my-header-1></my-header-1>
        <!-- 父组件向子组件传递数据不给值 -->
        <my-header-1></my-header-1>

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

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

nbsp;html>



    <meta>
    <meta>
    <title>Page Title</title>
    <meta>
    <script></script>



    <div>
        <my-header-1></my-header-1>

    </div>
    <!-- 父组件向子组件传递数据的模版 -->
    <template>
        <div>
                <h1 id="message">{{message}}</h1>
                <ul>
                    <li>{{item}}</li>
                </ul>
                <my-nav></my-nav>
            </div>
</template>
    <!-- 子组件向子组件传递数据的模版 -->
    <template>
        <div>
                <h1 id="message">{{message}}</h1>
                <ul>
                    <li>{{item}}</li>
                </ul>
            </div>
</template>

    <script>
        //子组件向父组件传递数据，是发布订阅模式
        var vm = new Vue({
            el: &#39;#app&#39;,
            data: {
                temp_2_list: ["1", "2", "3"]
            },
            components: {
                //父组件向子组件传递数据
                &#39;my-header-1&#39;: {
                    //props: ["list"],
                    template: &#39;#temp-2&#39;,
                    data: function() {
                        return {
                            message: "父组件向子组件传递数据"
                        };
                    },
                    //属性的验证与默认值
                    props: {
                        list: {
                            type: Array,
                            default: ["4", "5", "6"]
                        }
                    },
                    methods: {
                        getChildContent: function(str) {
                            debugger
                            alert(str);
                        }
                    },
                    //子组件的子组件
                    components: {
                        &#39;my-nav&#39;: {
                            template: &#39;#temp-3&#39;,
                            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>

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

nbsp;html>



    <meta>
    <meta>
    <title>Page Title</title>
    <meta>
    <script></script>
    <style>
        ul {
            list-style-type: none;
        }
    </style>



    <div>
        <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: &#39;#app&#39;,
            components: {
                //组件B
                &#39;my-header-1&#39;: {
                    template: `<h1>{{message}}`,
                    data: function() {
                        return {
                            message: "非父子组件通信"
                        };
                    },
                    mounted() {
                        //使用bind（this）修正this
                        busVm.$on("changeEnvents", function(param) {
                            this.message = param;
                        }.bind(this));
                    },
                },
                //组件A
                &#39;my-header-2&#39;: {
                    template: `<ul><li @click="getContent" v-for="item in list">{{item}}`,
                    data: function() {
                        return {
                            list: ["第一项", "第二项", "第三项"]
                        };
                    },
                    methods: {
                        getContent: function(ev) {
                            busVm.$emit("changeEnvents", ev.target.innerHTML);
                        }
                    }
                }
            }
        });
    </script>

Vuex 状態管理

単一

nbsp;html>



    <meta>
    <meta>
    <title>Page Title</title>
    <meta>
    <script></script>
    <style>
        ul {
            list-style-type: none;
        }
    </style>



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

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

    </div>

    <script>
        //单插槽<slot></script>

var vm = new Vue({ el: '#app', components: { 'my-header-1': { template: `

我是头部:

`, }, 'my-header-2': { template: `

我是标题

`, } } });

複数のタグは

nbsp;html>



    <meta>
    <meta>
    <title>Page Title</title>
    <meta>
    <script></script>
    <style>
        ul {
            list-style-type: none;
        }
    </style>



    <div>
       
        <my-header-1>
            <button>←</button>
            <button>→</button>
        </my-header-1>

    </div>

    <script>


        //多插槽的使用，则使用name属性来指定要插入的位置
        var vm = new Vue({
            el: &#39;#app&#39;,
            components: {
                &#39;my-header-1&#39;: {
                    template: `<div><slot name="left"></script>

我是头部:`, }, 'my-header-2': { template: `

我是标题

`, } } });

デフォルト値

nbsp;html>



    <meta>
    <meta>
    <title>Page Title</title>
    <meta>
    <script></script>
    <style>
        ul {
            list-style-type: none;
        }
    </style>



    <div>

        <my-header-1>
            <button>←</button>
            <button>→</button>
        </my-header-1>

    </div>

    <script>
        //多插槽的使用，则使用name属性来指定要插入的位置
        var vm = new Vue({
            el: &#39;#app&#39;,
            components: {
                &#39;my-header-1&#39;: {
                    template: `<div><slot name="left"></script>

我是头部:`, }, 'my-header-2': { template: `

我是标题

`, } } }); # を使用します

##Vue コンポーネント開発プロセス

基本的な HTML と CSS の記述

#データ送信
##コンテンツ配布
##イベントとメソッドの追加
#Vue での DOM 操作 ($refs を使用)

nbsp;html>



    <meta>
    <meta>
    <title>Page Title</title>
    <meta>
    <script></script>



    <div>
        <my-header-1></my-header-1>

    </div>
    <!-- 父组件向子组件传递数据的模版,ref特性用于DOM操作，使用this.$refs.row获取添加特性的DOM元素 -->
    <template>
        <div>
                <h1 id="message">{{message}}</h1>
                <ul>
                    <li>{{item}}</li>
                </ul>
                
            </div>
      </template>

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

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

声明

この記事は博客园で複製されています。侵害がある場合は、admin@php.cn までご連絡ください。

JavaScriptの役割：WebをインタラクティブでダイナミックにするApr 24, 2025 am 12:12 AM

JavaScriptは、Webページのインタラクティブ性とダイナミズムを向上させるため、現代のWebサイトの中心にあります。 1）ページを更新せずにコンテンツを変更できます。2）Domapiを介してWebページを操作する、3）アニメーションやドラッグアンドドロップなどの複雑なインタラクティブ効果、4）ユーザーエクスペリエンスを改善するためのパフォーマンスとベストプラクティスを最適化します。

CおよびJavaScript：接続が説明しましたApr 23, 2025 am 12:07 AM

CおよびJavaScriptは、WebAssemblyを介して相互運用性を実現します。 1）CコードはWebAssemblyモジュールにコンパイルされ、JavaScript環境に導入され、コンピューティングパワーが強化されます。 2）ゲーム開発では、Cは物理エンジンとグラフィックスレンダリングを処理し、JavaScriptはゲームロジックとユーザーインターフェイスを担当します。

Webサイトからアプリまで：JavaScriptの多様なアプリケーションApr 22, 2025 am 12:02 AM

JavaScriptは、Webサイト、モバイルアプリケーション、デスクトップアプリケーション、サーバー側のプログラミングで広く使用されています。 1）Webサイト開発では、JavaScriptはHTMLおよびCSSと一緒にDOMを運用して、JQueryやReactなどのフレームワークをサポートします。 2）ReactNativeおよびIonicを通じて、JavaScriptはクロスプラットフォームモバイルアプリケーションを開発するために使用されます。 3）電子フレームワークにより、JavaScriptはデスクトップアプリケーションを構築できます。 4）node.jsを使用すると、JavaScriptがサーバー側で実行され、高い並行リクエストをサポートします。

Python vs. JavaScript：ユースケースとアプリケーションと比較されますApr 21, 2025 am 12:01 AM

Pythonはデータサイエンスと自動化により適していますが、JavaScriptはフロントエンドとフルスタックの開発により適しています。 1. Pythonは、データ処理とモデリングのためにNumpyやPandasなどのライブラリを使用して、データサイエンスと機械学習でうまく機能します。 2。Pythonは、自動化とスクリプトにおいて簡潔で効率的です。 3. JavaScriptはフロントエンド開発に不可欠であり、動的なWebページと単一ページアプリケーションの構築に使用されます。 4. JavaScriptは、node.jsを通じてバックエンド開発において役割を果たし、フルスタック開発をサポートします。

JavaScript通訳者とコンパイラにおけるC/Cの役割Apr 20, 2025 am 12:01 AM

CとCは、主に通訳者とJITコンパイラを実装するために使用されるJavaScriptエンジンで重要な役割を果たします。 1）cは、JavaScriptソースコードを解析し、抽象的な構文ツリーを生成するために使用されます。 2）Cは、Bytecodeの生成と実行を担当します。 3）Cは、JITコンパイラを実装し、実行時にホットスポットコードを最適化およびコンパイルし、JavaScriptの実行効率を大幅に改善します。

JavaScript in Action：実際の例とプロジェクトApr 19, 2025 am 12:13 AM

現実世界でのJavaScriptのアプリケーションには、フロントエンドとバックエンドの開発が含まれます。 1）DOM操作とイベント処理を含むTODOリストアプリケーションを構築して、フロントエンドアプリケーションを表示します。 2）node.jsを介してRestfulapiを構築し、バックエンドアプリケーションをデモンストレーションします。

JavaScriptとWeb：コア機能とユースケースApr 18, 2025 am 12:19 AM

Web開発におけるJavaScriptの主な用途には、クライアントの相互作用、フォーム検証、非同期通信が含まれます。 1）DOM操作による動的なコンテンツの更新とユーザーインタラクション。 2）ユーザーエクスペリエンスを改善するためにデータを提出する前に、クライアントの検証が実行されます。 3）サーバーとのリフレッシュレス通信は、AJAXテクノロジーを通じて達成されます。

JavaScriptエンジンの理解：実装の詳細Apr 17, 2025 am 12:05 AM

JavaScriptエンジンが内部的にどのように機能するかを理解することは、開発者にとってより効率的なコードの作成とパフォーマンスのボトルネックと最適化戦略の理解に役立つためです。 1）エンジンのワークフローには、3つの段階が含まれます。解析、コンパイル、実行。 2）実行プロセス中、エンジンはインラインキャッシュや非表示クラスなどの動的最適化を実行します。 3）ベストプラクティスには、グローバル変数の避け、ループの最適化、constとletsの使用、閉鎖の過度の使用の回避が含まれます。

See all articles

ホットAIツール

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

脱衣画像を無料で

Clothoff.io

AI衣類リムーバー

Video Face Swap

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

ホットツール

SAP NetWeaver Server Adapter for Eclipse

Eclipse を SAP NetWeaver アプリケーションサーバーと統合します。

mPDF

mPDF は、UTF-8 でエンコードされた HTML から PDF ファイルを生成できる PHP ライブラリです。オリジナルの作者である Ian Back は、Web サイトから「オンザフライ」で PDF ファイルを出力し、さまざまな言語を処理するために mPDF を作成しました。 HTML2FPDF などのオリジナルのスクリプトよりも遅く、Unicode フォントを使用すると生成されるファイルが大きくなりますが、CSS スタイルなどをサポートし、多くの機能強化が施されています。 RTL (アラビア語とヘブライ語) や CJK (中国語、日本語、韓国語) を含むほぼすべての言語をサポートします。ネストされたブロックレベル要素 (P、DIV など) をサポートします。

DVWA

Damn Vulnerable Web App (DVWA) は、非常に脆弱な PHP/MySQL Web アプリケーションです。その主な目的は、セキュリティ専門家が法的環境でスキルとツールをテストするのに役立ち、Web 開発者が Web アプリケーションを保護するプロセスをより深く理解できるようにし、教師/生徒が教室環境で Web アプリケーションを教え/学習できるようにすることです。安全。 DVWA の目標は、シンプルでわかりやすいインターフェイスを通じて、さまざまな難易度で最も一般的な Web 脆弱性のいくつかを実践することです。このソフトウェアは、