Vue.js 基礎學習之組件

標籤：false   eth   func   註冊   end   ext   xtend   封裝   template   

 什麼是組件：組件是Vue.js最強大的功能之一。組件可以擴充HTML元素，封裝可重用的代碼。在較高層面上，組件是自訂的元素，Vue.js的編譯器為它添加特殊功能。在有些情況下，組件也可以是原生HTML元素的形式，以is特性擴充。

建立全域群組件

<div id="seg1">        <alert></alert>    </div>    <div id="seg2">        <alert></alert>    </div>

Vue.component(‘alert‘,{        template : ‘<button @click="on_click">點我</button>‘,        methods : {            on_click : function(){                alert("good");            }        },    });    new Vue({        el : ‘#seg1‘,    });    new Vue({        el : ‘#seg2‘,    })

這個組件的作用是在目標中添加一個Button，當點擊這個Button時，alert出一個good。由於是全域群組件，所以只要是new Vue出來的都可以使用

也可以將建立與註冊分開，

先用Vue.rxtend建立一個組件

var myComponent = Vue.extend({        template : ‘<button @click="on_click">點我</button>‘,        methods : {            on_click : function(){                alert("good");            },        },    });

然後註冊

Vue.component(‘alert‘,myComponent);

分開會讓人看起來更清晰

 

接下來是局部組件的建立

new Vue({        el : ‘#app‘,        components :{            alert :{                template : ‘<button @click="on_click">點我</button>‘,                methods : {                on_click : function(){                    alert("good");            },        },        },        }     })

這時，這個組件就只能在app中使用了

接下來我們用組件做一個點贊的button，當button點擊第一下點贊數就加一，再點擊一下，點贊數就減一

new Vue({         el : ‘#app‘,         components : {             like : {                 template : ‘<button @click="on_click">贊{{like_counts}}</button>‘,                 data : function(){                     return {                         like_counts : 10,                         liked : false,                     };                 },                 methods : {                     on_click : function(){                         if(!this.liked){                             this.like_counts += 1;                             this.liked = !this.liked;                         }                         else{                             this.like_counts -= 1;                             this.liked = !this.liked;                         }                     }                 },             }         }     });

在app中加入一個like標籤

<div id="app">        <like></like>    </div>

這樣，初始點贊數為10，點擊一下點贊數為11，再點擊一下點贊數又為10，我們還可以為其添加一個樣式，在點贊時讓button變成pink色

首先給這個button綁定class

template : ‘<button :class="{liked : liked}" @click="on_click">贊{{like_counts}}</button>‘,

這個class中的第一個liked為類名，第二個liked為data中的liked，這裡的意思是當第二個liked值為true時，給這個類加上第一個liked類

然後在樣式用加入這個類的樣式

<style>        .liked {            background-color: pink;        }    </style>

這樣我們的一個點贊按鈕就完成了。

這裡我有一個困惑，組件之內的data在組件之外是訪問不到的，那麼如果我想要獲得組件裡面的某個資料，我應該如何去做？

Vue.js 基礎學習之組件