Vue.js 2.x：元件的定義和註冊（詳細的圖文教程）

阿新 • • 發佈：2018-12-30

本文最初發表於部落格園，並在GitHub上持續更新前端的系列文章。歡迎在GitHub上關注我，一起入門和進階前端。

以下是正文。

前言

什麼是元件

元件：元件的出現，就是為了拆分Vue例項的程式碼量的，能夠讓我們以不同的元件，來劃分不同的功能模組，將來我們需要什麼樣的功能，就可以去呼叫對應的元件即可。

模組化和元件化的區別

模組化：是從程式碼邏輯的角度進行劃分的；方便程式碼分層開發，保證每個功能模組的職能單一
元件化：是從UI介面的角度進行劃分的；前端的元件化，方便UI元件的重用

全域性元件的定義和註冊

元件Component是 Vue.js 最強大的功能之一。元件可以擴充套件 HTML 元素，封裝可重用的程式碼。

全域性元件的定義和註冊有三種方式，我們接下來講一講。

寫法一

寫法一：使用Vue.extend方法定義元件，使用 Vue.component方法註冊元件。

程式碼舉例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="vue2.5.16.js"></script>
</head>

<body>
    <div id="app">
        <!-- 如果要使用元件，直接把元件的名稱，以 HTML 標籤的形式，引入到頁面中，即可 -->
        <account> </account>
    </div>

    <script>
        //第一步：使用 Vue.extend 定義元件
        var myAccount = Vue.extend({
            template: '<div><h2>登入頁面</h2> <h3>註冊頁面</h3></div>' // 通過 template 屬性，指定了元件要展示的HTML結構。template 是 Vue 中的關鍵字，不能改。
        });
        //第二步：使用 Vue.component 註冊元件
        // Vue.component('元件的名稱', 創建出來的元件模板物件)
        Vue.component('account', myAccount); //第一個引數是元件的名稱（標籤名），第二個引數是模板物件

        new Vue({
            el: '#app'
        });
    </script>
</body>

</html>

上方程式碼中，在註冊元件時，第一個引數是標籤名，第二個引數是元件的定義。

執行結果如下：

程式碼截圖如下：

上圖中，注意兩點：

注意1、紅框部分，要保證二者的名字是一致的。如果在註冊時，元件的名稱是駝峰命名，比如：

Vue.component('myComponent', myAccount); //第一個引數是元件的名稱（標籤名），第二個引數是模板物件

那麼，在標籤中使用元件時，需要把大寫的駝峰改為小寫的字母，同時兩個單詞之間使用-進行連線：

<my-component> </my-component>

Vue.component('my')

注意2、綠框部分，一定要用一個大的根元素（例如<div>

）包裹起來。如果我寫成下面這樣，就沒有預期的效果：

            template: '<h2>登入頁面</h2> <h3>註冊頁面</h3>'

結果如下：（並非預期的效果）

寫法二

寫法二：Vue.component方法定義、註冊元件（一步到位）。

程式碼如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="vue2.5.16.js"></script>
</head>

<body>
    <div id="app">
        <account> </account>
    </div>

    <script>

        //定義、註冊元件：第一個引數是元件的名稱（標籤名），第二個引數是元件的定義
        Vue.component('account', {
            template: '<div><h2>登入頁面</h2> <h3>註冊頁面</h3></div>'   // template 是 Vue 中的關鍵字，不能改。
        });

        new Vue({
            el: '#app'
        });
    </script>
</body>

</html>

程式碼截圖如下：

上圖中，同樣注意兩點：

1、紅框部分，要保證二者的名字是一致的。

2、綠框部分，一定要用一個大的根元素（例如<div>）包裹起來。如果我寫成下面這樣，就沒有預期的效果：

            template: '<h2>登入頁面</h2> <h3>註冊頁面</h3>'

結果如下：（並非預期的效果）

寫法三

上面的寫法一、寫法二並不是很智慧，因為在定義模板的時候，沒有智慧提示和高亮，容易出錯。我們不妨來看看寫法三。

寫法三：將元件內容定義到template標籤中去。

程式碼如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="vue2.5.16.js"></script>
</head>

<body>
    <!-- 定義模板 -->
    <template id="myAccount">
        <div>
            <h2>登入頁面</h2>
            <h3>註冊頁面</h3>
        </div>
    </template>

    <div id="app">
        <!-- 使用元件 -->
        <account> </account>
    </div>

    <script>

        //定義、註冊元件
        Vue.component('account', {
            template: '#myAccount'    // template 是 Vue 中的關鍵字，不能改。
        });

        new Vue({
            el: '#app'
        });
    </script>
</body>

</html>

程式碼截圖如下：

寫法三其實和方法二差不多，無非是把綠框部分的內容，單獨放在了<template>標籤中而已，這樣有利於 html 標籤的書寫。

使用components定義私有元件

我們在上一段中定義的是全域性元件，這樣做的時候，多個Vue例項都可以使用這個元件。

我們還可以在一個Vue例項的內部定義私有元件，這樣做的時候，只有當前這個Vue例項才可以使用這個元件。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="vue2.5.16.js"></script>
</head>

<body>

    <div id="app">
        <!-- 使用Vue例項內部的私有元件 -->
        <my-login></my-login>
    </div>

    <script>

        new Vue({
            el: '#app',
            data: {},
            components: { // 定義、註冊Vue例項內部的私有元件
                myLogin: {
                    template: '<h3>這是私有的login元件</h3>'
                }
            }


        });
    </script>
</body>

</html>

執行效果：

當然，我們還可以把模板的定義存放在<template>標籤中，這樣的話，模板裡的html標籤就可以出現智慧提示和高亮，避免出錯。如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="vue2.5.16.js"></script>
</head>

<body>

    <!-- 定義模板 -->
    <template id="loginTmp">
        <h3>這是私有的login元件</h3>
    </template>

    <div id="app">
        <!-- 呼叫Vue例項內部的私有元件 -->
        <my-login></my-login>
    </div>

    <script>
        new Vue({
            el: '#app',
            data: {},
            components: { // 定義、註冊Vue例項內部的私有元件
                myLogin: {
                    template: '#loginTmp'
                }
            }
        });
    </script>
</body>

</html>

執行效果不變。

為元件新增 data 和 methods

既然元件是一個頁面，那麼，頁面中可能會有一些功能要動態展示。因此，我們有必要為元件新增 data 和 methods。

程式碼舉例如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="vue2.5.16.js"></script>
</head>

<body>
    <!-- 定義元件的模板 -->
    <template id="myAccount">
        <div>
            <!-- 在元件的模板中，呼叫本元件中的data -->
            {{myData}}
            <a href="#" v-on:click="login">登入1</a>
            <h2>登入頁面</h2>
            <h3>註冊頁面</h3>

        </div>
    </template>

    <div id="app">
        <!-- 第一次呼叫元件 -->
        <account> </account>
        <!-- 第二次呼叫元件 -->
        <account> </account>
    </div>

    <script>

        //定義、註冊元件
        Vue.component('account', {
            template: '#myAccount',
            //元件中的 data
            //【注意】元件中的data，不再是物件，而是一個方法（否則報錯）；而且這個方法內部，還必須返回一個物件才行
            // 元件中 的data 資料,使用方式,和例項中的 data 使用方式完全一樣!!!
            data: function () {
                return {
                    myData: 'smyhvae'
                }
            },
            //元件中的 method
            methods: {
                login: function () {
                    alert('login操作');
                }
            }
        });

        new Vue({
            el: '#app'
        });
    </script>
</body>

</html>

上方程式碼所示，我們在account元件中新增的data 和 methods，其作用域只限於account元件裡，保證獨立性。

注意，在為元件新增資料時，data不再是物件了，而是function，而且要通過 return的形式進行返回；否則，頁面上是無法看到效果的。通過 function返回物件的形式來定義data，作用是：

上方程式碼中，元件<account>被呼叫了兩次（不像根元件那樣只能呼叫一次），但是每個元件裡的資料 myData是各自獨立的，不產生衝突。
換而言之，通過函式返回物件的目的，是為了讓每個元件都有自己獨立的資料儲存，而不應該共享一套資料。

為什麼元件的data必須是一個function

我們先來看下面這樣的例子：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="vue2.5.16.js"></script>
</head>

<body>
    <div id="app">
        <!-- 第一次呼叫元件 -->
        <counter></counter>
        <hr>

        <!-- 第二次呼叫元件 -->
        <counter></counter>
    </div>

    <!-- 定義模板 -->
    <template id="tmpl">
        <div>
            <input type="button" value="讓count加1" @click="increment">
            <h3>{{count}}</h3>
        </div>
    </template>

    <script>
        var dataObj = { count: 0 }

        // 這是一個計數器的元件, 身上有個按鈕,每當點選按鈕,讓 data 中的 count 值 +1
        Vue.component('counter', {
            template: '#tmpl',
            data: function () {
                return dataObj //當我們return全域性的dataObj的時候，子元件們會共享這個dataObj
            },
            methods: {
                increment() {
                    this.count++
                }
            }
        })

        // 建立 Vue 例項，得到 ViewModel
        var vm = new Vue({
            el: '#app',
            data: {},
            methods: {}
        });
    </script>
</body>

</html>

執行效果如下：

上面的例子中，將元件<counter>呼叫了兩次，由於dataObj是全域性物件，導致兩個元件例項都可以共享這個dataObj資料。於是，我們點選任何一個元件例項的按鈕，都可以讓count資料加1。

現在問題來了，如果我們想讓元件<counter>的兩個例項去單獨操作count資料，應該怎麼做呢？我們應該修改 data中 return出去的內容：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="vue2.5.16.js"></script>
</head>

<body>
    <div id="app">
        <counter></counter>
        <hr>
        <counter></counter>
        <hr>
        <counter></counter>
    </div>

    <template id="tmpl">
        <div>
            <input type="button" value="讓count加1" @click="increment">
            <h3>{{count}}</h3>
        </div>
    </template>

    <script>
        var dataObj = { count: 0 }

        // 這是一個計數器的元件, 身上有個按鈕,每當點選按鈕,讓 data 中的 count 值 +1
        Vue.component('counter', {
            template: '#tmpl',
            data: function () {
                // return dataObj //當我們return全域性的dataObj的時候，這個dataObj是共享的
                return { count: 0 } // 【重要】return一個**新開闢**的物件資料
            },
            methods: {
                increment() {
                    this.count++
                }
            }
        })

        // 建立 Vue 例項，得到 ViewModel
        var vm = new Vue({
            el: '#app',
            data: {},
            methods: {}
        });
    </script>
</body>

</html>

執行效果：

如上圖所示，每當我們建立一個新的元件例項時，就會呼叫data函式，data函式裡會return一個新開闢的物件資料。這樣做，就可以保證每個元件例項有獨立的資料儲存。

元件的切換

使用v-if和v-else結合flag進行切換

程式碼舉例：（登入元件/註冊元件，二選一）

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="vue2.5.16.js"></script>
</head>

<body>
    <div id="app">
        <!-- 溫馨提示：`.prevent`可以阻止超連結的預設事件 -->
        <a href="" @click.prevent="flag=true">登入</a>
        <a href="" @click.prevent="flag=false">註冊</a>

        <!-- 登入元件/註冊元件，同時只顯示一個 -->
        <login v-if="flag"></login>
        <register v-else="flag"></register>

    </div>

    <script>
        Vue.component('login', {
            template: '<h3>登入元件</h3>'
        })

        Vue.component('register', {
            template: '<h3>註冊元件</h3>'
        })

        // 建立 Vue 例項，得到 ViewModel
        var vm = new Vue({
            el: '#app',
            data: {
                flag: false
            },
            methods: {}
        });
    </script>
</body>

</html>

執行效果如下：

使用Vue提供的`<component>`標籤實現元件切換

上面的例子中，我們是通過flag的值來進行元件的切換。但是，flag的值只可能有兩種情況，也就是說，v-if和v-else只能進行兩個元件之間的切換。

那如何實現三個甚至三個以上的元件切換呢？這裡，我們可以用到Vue提供的<component>標籤。

我們先來看一下<component>標籤的用法。

基於上面的程式碼，如果我想讓login元件顯示出來，藉助<component>標籤可以這樣做：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="Vue2.5.16.js"></script>
</head>

<body>
    <div id="app">

        <!-- Vue提供了 component ,來展示對應名稱的元件 -->
        <!-- 【重要】component 是一個佔位符, `:is` 屬性,可以用來指定要展示的元件名稱。這裡，我們讓 login 元件顯示出來 -->
        <component :is="'login'"></component>

    </div>

    <script>
        // 元件名稱是 字串
        Vue.component('login', {
            template: '<h3>登入元件</h3>'
        })

        Vue.component('register', {
            template: '<h3>註冊元件</h3>'
        })

        // 建立 Vue 例項，得到 ViewModel
        var vm = new Vue({
            el: '#app',
            data: {
                comName: 'login' // 當前 component 中的 :is 繫結的元件的名稱
            },
            methods: {}
        });
    </script>
</body>

</html>

上方程式碼中，提取關鍵程式碼如下：

        <component :is="'login'"></component>

如果我想讓register元件顯示出來，藉助<component>標籤可以這樣做：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="Vue2.5.16.js"></script>
</head>

<body>
    <div id="app">

        <!-- Vue提供了 component ,來展示對應名稱的元件 -->
        <!-- 【重要】component 是一個佔位符, `:is` 屬性,可以用來指定要展示的元件名稱 -->
        <component :is="'register'"></component>

    </div>

    <script>
        // 元件名稱是 字串
        Vue.component('login', {
            template: '<h3>登入元件</h3>'
        })

        Vue.component('register', {
            template: '<h3>註冊元件</h3>'
        })

        // 建立 Vue 例項，得到 ViewModel
        var vm = new Vue({
            el: '#app',
            data: {
                comName: 'login' // 當前 component 中的 :is 繫結的元件的名稱
            },
            methods: {}
        });
    </script>
</body>

</html>

上方程式碼中，提取關鍵程式碼如下：

        <component :is="'register'"></component>

因此，如果要實現元件之間的切換，我們可以給<component>標籤裡的is屬性值設定為變數即可，來看看程式碼實現。

實現元件切換的完整程式碼：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="vue2.5.16.js"></script>
</head>

<body>
    <div id="app">
        <!-- 點選按鈕後，設定變數`comName`為不同的值，代表著後面的component裡顯示不同的元件 -->
        <a href="" @click.prevent="comName='login'">登入</a>
        <a href="" @click.prevent="comName='register'">註冊</a>

        <!-- Vue提供了 component ,來展示對應名稱的元件 -->
        <!-- component 是一個佔位符, :is 屬性,可以用來指定要展示的元件的名稱 -->
        <!-- 此處的`comName`是變數，變數值為元件名稱 -->
        <component :is="comName"></component>

    </div>

    <script>
        // 元件名稱是 字串
        Vue.component('login', {
            template: '<h3>登入元件</h3>'
        })

        Vue.component('register', {
            template: '<h3>註冊元件</h3>'
        })

        // 建立 Vue 例項，得到 ViewModel
        var vm = new Vue({
            el: '#app',
            data: {
                comName: 'login' // 當前 component 中的 :is 繫結的元件的名稱
            },
            methods: {}
        });
    </script>
</body>

</html>

效果：

我的公眾號

想學習程式碼之外的軟技能？不妨關注我的微信公眾號：生命團隊（id：vitateam）。

掃一掃，你將發現另一個全新的世界，而這將是一場美麗的意外：

Vue.js 2.x：元件的定義和註冊（詳細的圖文教程）

本文最初發表於部落格園，並在GitHub上持續更新前端的系列文章。歡迎在GitHub上關注我，一起入門和進階前端。以下是正文。前言什麼是元件元件：元件的出現，就是為了拆分Vue例項的程式碼量的，能夠讓我們以不同的元件，來劃分不同的功能模組，將來我們需要什麼樣的功能，就可以去呼叫對應的元件即可

Vue.js框架--Vuex實現元件裡資料持久化（二十八）

主要操作技能： Vuex 是一個專為 Vue.js 應用程式開發的狀態管理模式新聞頁面每次切換路由時，再次訪問就會請求資料；那麼如何直接從vuex中持久化資料呢？

Vue.js常用指令：v-show和v-if

一、v-show指令 v-show指令可以用來動態的控制DOM元素的顯示或隱藏。v-show後面跟的是判斷條件，語法如下： v-show="判斷變數" 例如： v-show="true"，表示顯示DOM元素。 v-show="false"，表示隱藏DOM元素。看下面的示

vue.js 2.0父子元件學習入門套路

前面已經瞭解過vue的元件化開發了，現在來了解一下父子元件。先來2個子元件 myname.vue 內容如下： <template> <div id="myname">我的名字是{{name}}</div>

vue.js 2.x 版本腳手架中沒有dev-server.js 如何進行資料模擬

參考了別人的程式碼，可以用，記下來：最新的vue裡dev-server.js被替換成了webpack-dev-conf.js 在模擬後臺資料的時候直接在webpack-dev-conf.js檔

Vue.js學習筆記：在元素和 template 中使用 v-if 指令

語法比較簡單，直接上程式碼： <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <hea

基於Vue.js 2.x系列 + Element UI + RBAC/AUTH許可權的響應式後臺管理系統

前言專案前端地址： https://github.com/lmxdawn/vue-admin-html專案後端地址： https://github.com/lmxdawn/vue-admin-php歡迎大家的star20180519 更新 1.增加檔案上傳外掛，主要用於管理

c++之連結串列篇2：單向連結串列的反轉（詳細圖文解讀）

在牛客網上刷題的過程遇到很多連結串列的問題，所以自己又結合著傳智播客上的視訊把連結串列整理了一下，本文是在上文的基礎上操作的，c++之連結串列篇1：單向連結串列的建立，列印，刪除，插入，銷燬等基本操作的。本文中的單鏈表的反轉是對結點一個一個操作的，每次把後面的一個結點拋到

類與對象的定義和使用（包含init講解）

() sleep weak 學生詳細介紹之前 st2 使用查看 1.類與對象的概念對象：特征與技能的集合體類：一系列對象相似的特征與技能的集合體即動物類：特征：鼻子，眼睛，耳朵，嘴巴技能：吃，跑在現實世界中，肯定是現有對象，然後人類根據對象的一些共有特征，對其進行

MySQL的安裝和配置(超詳細圖文教程)

資料庫的安裝 1.開啟下載的mysql安裝檔案雙擊解壓縮，執行“mysql-5.5.40-win32.msi”。 2.選擇安裝型別，有“Typical（預設）”、“Complete（完全）”、“Custom（使用者自定義）”三個選項，選擇“Custom”，按“next”鍵繼續

使用ganglia 實現監控 hadoop 和 hbase（詳細過程總結）

一，環境準備 hadoop 2.8.2 分散式環境（三個節點安裝請參考 hadoop分散式環境安裝） hbase 1.2.6 分散式環境（三個節點，安裝參考hbase分散式環境安裝）主節點採用 ubuntu 16.04 桌面版，從

2.Java基礎：方法定義和調用

處理參數傳遞 nbsp 功能方式基本數據方法名 color 值類型一、方法的定義 1.類的方法代表的是實力的某種行為（或功能）方法的定義：方法類型、方法簽名、方法體 2.定義類的方法訪問修飾符類型方法名（參數列表）{ ///方法體 }

iView 3.2.0 釋出，基於 Vue.js 的企業級 UI 元件庫

iView 3.2.0 釋出了，代號 Lost Tracks。iView 是一套基於 Vue.js 的企業級 UI 元件庫，主要服務於 PC 介面的中後臺產品。本次更新如下： Table 支援 slot-scope 用法。#4847 檢視示例

vue-cli 2.x和3.x安裝的區別

1.全域性安裝vue的腳手架：vue-cli(指定版本後面加@2.x.x) npm install -g vue-cli npm install -g @vue/cli 2.使用初始化 vue 專案: vue init webpack <project-name> vue create

詳細講解vue.js裡的父子元件通訊（props和$emit）

在進入這個話題之前，首先我們先來想一下在vue裡，如何寫一個父子元件。為了簡單起見，下面的程式碼我都沒用腳手架來構建專案，直接在html檔案裡引入vue.js來作為例子。父子元件的寫法如下：<div id="app"> <parent>

iView 3.2.2 釋出，基於 Vue.js 的企業級 UI 元件庫

iView 3.2.2 釋出了，iView 是一套基於 Vue.js 的企業級 UI 元件庫，主要服務於 PC 介面的中後臺產品。本次更新如下： https://www.iviewui.com/docs/guide/update 修復由 3.2.0 版本

Vue.js 中，7種定義元件模板的方法

本文由Mcbai在眾成翻譯平臺上翻譯。有多種方式可以在vue中定義模板元件。我算了一下，至少有7種不同的方法：字串（String）模板字串（Template literal） X-Templates 內聯（Inline） Render函式（Render functions） JSX 單檔

Vue.js學習筆記：關於元件掛載

最近學習到Vue.js的元件部分，在看完官方文件之後還是一頭霧水，於是自己試驗了一下，將試驗結果記錄下來，以便查閱。我在跟著文件做了一遍之後，渲染結果為： <div id="example"> <div>A custom component

基於vue.js 2.0，不使用webpack的nodejs服務，只在瀏覽器上單獨使用在Element UI的Tree樹形控制元件

Vue.js（讀音 /vjuː/，類似於 view）是一套構建使用者介面的漸進式框架。與其他重量級框架不同的是，Vue 採用自底向上增量開發的設計。Vue 的核心庫只關注檢視層，它不僅易於上手，還便於與第三方庫或既有專案整合。另一方面，當與單檔案元件和 Vue

創建Vue.js對象：我的第一個Vue.js輸出信息

增加 body prime utf 創建 src 多個 load rime <!DOCTYPE html><html><head><meta charset=”utf-8″><title

Vue.js 2.x：元件的定義和註冊（詳細的圖文教程）

前言

什麼是元件

模組化和元件化的區別

全域性元件的定義和註冊

寫法一

寫法二

寫法三

使用components定義私有元件

為元件新增 data 和 methods

為什麼元件的data必須是一個function

元件的切換

使用v-if和v-else結合flag進行切換

使用Vue提供的<component>標籤實現元件切換

我的公眾號

相關推薦

使用Vue提供的`<component>`標籤實現元件切換