搜尋
首頁web前端js教程Vue組件是什麼？ Vue元件如何使用？ （程式碼範例）

Vue組件是什麼？ Vue元件如何使用？ （程式碼範例）

青灯夜游
青灯夜游
Oct 24, 2018 pm 05:38 PM
vuevue組件

這篇文章帶給大家的內容是介紹Vue元件是什麼？ Vue元件如何使用？ （程式碼範例）。有一定的參考價值，有需要的朋友可以參考一下，希望對你們有幫助。

元件的介紹

  1. #元件系統是將一個大型的介面切分成一個更小的可控單元。

  2. 元件是可重複使用的，可維護的。

  3. 元件具有強大的封裝性，易於使用。

  4. 大型應用程式中，元件與元件之間互動是可以解耦操作的。

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元件的範本方式

  1. \

  2. `

    4. ##

    5. .vue 單一檔案

  5. 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</script>
    6.                     
  6. 2
    7.                     
  7. 3
    8.                                                 <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非父子元件的通訊

##空白實例與自訂事件

    2. $emit

    1. #$on

  2. # Vuex狀態管理

    1. state

    2. #mutation

    3. commit

空白實例與自訂事件的使用(適用於小型專案)

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狀態管理

  • Vue元件內容分發

    • 單標籤使用

       
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>
        var vm = new Vue({
            el: &#39;#app&#39;,
            components: {
                &#39;my-header-1&#39;: {
                    template: `<div>我是头部:<slot>`,

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

  2. #多標籤使用

     
  3. 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"> 我是头部:<slot name="right">`,
                },
                &#39;my-header-2&#39;: {
                    template: `<h1>我是标题`,
                }
            }
        });
    </script>

    4.   預設值

  4. #
    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>
    5.  我是头部:`,                 },                 'my-header-2': {                     template: `

    我是标题

    `,                 }             }         });     

  5. Vue元件開發流程

  • #撰寫基礎HTML與CSS

      • ###########撰寫基礎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中文網其他相關文章！

      陳述
      本文轉載於：博客园。如有侵權，請聯絡admin@php.cn刪除
      相關文章
      JavaScript數據類型：瀏覽器和nodejs之間是否有區別？JavaScript數據類型：瀏覽器和nodejs之間是否有區別？May 14, 2025 am 12:15 AM

      JavaScript核心數據類型在瀏覽器和Node.js中一致，但處理方式和額外類型有所不同。 1)全局對像在瀏覽器中為window，在Node.js中為global。 2)Node.js獨有Buffer對象，用於處理二進制數據。 3)性能和時間處理在兩者間也有差異，需根據環境調整代碼。

      JavaScript評論：使用//和 / * * / * / * /JavaScript評論：使用//和 / * * / * / * /May 13, 2025 pm 03:49 PM

      JavaScriptusestwotypesofcomments:single-line(//)andmulti-line(//).1)Use//forquicknotesorsingle-lineexplanations.2)Use//forlongerexplanationsorcommentingoutblocksofcode.Commentsshouldexplainthe'why',notthe'what',andbeplacedabovetherelevantcodeforclari

      Python vs. JavaScript：開發人員的比較分析Python vs. JavaScript：開發人員的比較分析May 09, 2025 am 12:22 AM

      Python和JavaScript的主要區別在於類型系統和應用場景。 1.Python使用動態類型，適合科學計算和數據分析。 2.JavaScript採用弱類型，廣泛用於前端和全棧開發。兩者在異步編程和性能優化上各有優勢，選擇時應根據項目需求決定。

      Python vs. JavaScript：選擇合適的工具Python vs. JavaScript：選擇合適的工具May 08, 2025 am 12:10 AM

      選擇Python還是JavaScript取決於項目類型：1)數據科學和自動化任務選擇Python；2)前端和全棧開發選擇JavaScript。 Python因其在數據處理和自動化方面的強大庫而備受青睞，而JavaScript則因其在網頁交互和全棧開發中的優勢而不可或缺。

      Python和JavaScript：了解每個的優勢Python和JavaScript：了解每個的優勢May 06, 2025 am 12:15 AM

      Python和JavaScript各有優勢，選擇取決於項目需求和個人偏好。 1.Python易學，語法簡潔，適用於數據科學和後端開發，但執行速度較慢。 2.JavaScript在前端開發中無處不在，異步編程能力強，Node.js使其適用於全棧開發，但語法可能複雜且易出錯。

      JavaScript的核心：它是在C還是C上構建的？JavaScript的核心：它是在C還是C上構建的？May 05, 2025 am 12:07 AM

      javascriptisnotbuiltoncorc; sanInterpretedlanguagethatrunsonenginesoftenwritteninc.1）JavascriptwasdesignedAsignedAsalightWeight，drackendedlanguageforwebbrowsers.2）Enginesevolvedfromsimpleterterpretpretpretpretpreterterpretpretpretpretpretpretpretpretpretcompilerers，典型地，替代品。

      JavaScript應用程序：從前端到後端JavaScript應用程序：從前端到後端May 04, 2025 am 12:12 AM

      JavaScript可用於前端和後端開發。前端通過DOM操作增強用戶體驗，後端通過Node.js處理服務器任務。 1.前端示例：改變網頁文本內容。 2.後端示例：創建Node.js服務器。

      Python vs. JavaScript：您應該學到哪種語言？Python vs. JavaScript：您應該學到哪種語言？May 03, 2025 am 12:10 AM

      選擇Python還是JavaScript應基於職業發展、學習曲線和生態系統：1)職業發展：Python適合數據科學和後端開發，JavaScript適合前端和全棧開發。 2)學習曲線：Python語法簡潔，適合初學者；JavaScript語法靈活。 3)生態系統：Python有豐富的科學計算庫，JavaScript有強大的前端框架。

      See all articles

      熱AI工具

      Undresser.AI Undress

      Undresser.AI Undress

      人工智慧驅動的應用程序，用於創建逼真的裸體照片

      AI Clothes Remover

      AI Clothes Remover

      用於從照片中去除衣服的線上人工智慧工具。

      Undress AI Tool

      Undress AI Tool

      免費脫衣圖片

      Clothoff.io

      Clothoff.io

      AI脫衣器

      Video Face Swap

      Video Face Swap

      使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！

      顯示更多

      熱門文章

      如何修復KB5055612無法在Windows 10中安裝？
      4 週前ByDDD
      <🎜>：泡泡膠模擬器無窮大 - 如何獲取和使用皇家鑰匙
      4 週前By尊渡假赌尊渡假赌尊渡假赌
      <🎜>：種植花園 - 完整的突變指南
      3 週前ByDDD
      北端：融合系統，解釋
      4 週前By尊渡假赌尊渡假赌尊渡假赌
      Mandragora：巫婆樹的耳語 - 如何解鎖抓鉤
      3 週前By尊渡假赌尊渡假赌尊渡假赌
      顯示更多

      熱工具

      ZendStudio 13.5.1 Mac

      ZendStudio 13.5.1 Mac

      強大的PHP整合開發環境

      記事本++7.3.1

      記事本++7.3.1

      好用且免費的程式碼編輯器

      VSCode Windows 64位元 下載

      VSCode Windows 64位元 下載

      微軟推出的免費、功能強大的一款IDE編輯器

      SublimeText3 Linux新版

      SublimeText3 Linux新版

      SublimeText3 Linux最新版

      SublimeText3 英文版

      SublimeText3 英文版

      推薦：為Win版本，支援程式碼提示！

      顯示更多

      熱門話題

      Java教學
      1671
      14
      CakePHP 教程
      1428
      52
      Laravel 教程
      1331
      25
      PHP教程
      1276
      29
      C# 教程
      1256
      24
      顯示更多