一、組件： 組件的出現，就是為了拆分Vue實例的代碼量的，能夠讓我們以不同的組件，來劃分不同的功能模塊，將來我們需要什麼樣的功能，就可以去調用相應的組件即可。 二、組件和模塊： 1、模塊化：是從代碼邏輯的角度進行劃分的；方便代碼分層開發，保證每個功能模塊的只能單一； 2、組塊化：是從UI界面的角度進 ...
一、組件：
組件的出現，就是為了拆分Vue實例的代碼量的，能夠讓我們以不同的組件，來劃分不同的功能模塊，將來我們需要什麼樣的功能，就可以去調用相應的組件即可。
二、組件和模塊：
1、模塊化：是從代碼邏輯的角度進行劃分的；方便代碼分層開發，保證每個功能模塊的只能單一；
2、組塊化：是從UI界面的角度進行劃分的；前端的組塊化，方便UI組件的重用。
三、定義全局組件的方式：
三種方式：
<!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>組件</title> <script src="./lib/vue.js"></script> </head> <body> <div id="app"> <!-- 如果要使用組件，直接把組件的名稱，以HTML標簽的形式，引入到頁面中即可 --> <mycom1></mycom1> </div> <!-- 3.在被控制的 #app外面，使用 template 元素，定義組件的HTML模板結構--> <template id="tmp1"> <div> <h1> 這是通過 template元素，在外部定義的組件結構，這個方式，有代碼的智能提示和高亮 </h1> <h4>好用，不錯</h4> </div> </template id="tmp2"> <h2> 這是私有的 login 組件 </h2> <template> </template> <script> Vue.component("mycom1", { template: "#tmp1" }); // 1.1 使用 Vue.extend 來創建全局的Vue組件 // var com1 = Vue.extend({ // 通過template 屬性，指定了組件要展示的HTML結構 // template: "<h3>這是使用 Vue.extend 創建的組件<h3>" // }); // 1.2 使用 Vue.component('組件的名稱'，創建出來的組件模板對象) // 如果使用 Vue.component 定義全局組件的時候，組件的名稱使用了駝峰命名，則在引用組件的時候， // 需要把大寫的駝峰改成小寫的字母，同時，兩個單詞之前，使用 - 連接； // 如果不使用駝峰，則直接拿名稱來使用即可； // Vue.component("mycom1", com1); // 2. Vue.component 第一個參數：組件的名稱，將來在引用組件的時候，就是一個標簽的形式來引入它的 // 第二個參數：Vue.extend 創建的組件，其中 template 就是組件將來要展示的HTML內容。 // 相當於第一種方式的簡寫 // Vue.component( // "mycom1", // Vue.extend({ // //註意：不論是哪種方式創建出來的組件，組件的 template 屬性指向的模板內容，必須有且只能有唯一的一個元素 // template: // "<div><h3>這是使用 Vue.extend 創建的組件<h3><span>123</span></div>" // }) // ); var vm = new Vue({ el: "#app", data: {}, methods: {}, filters: {}, directives: {}, components: { //定義實例的內部私有組件的 login: { template: "#tmp2" } } }); </script> </body> </html>
四、定義私有的組件：如上圖代碼中的 tmp2 ;
五、組件內可以有data數據，但其是一個有return的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>組件</title> <script src="./lib/vue.js"></script> </head> <body> <div id="app"> <!-- 如果要使用組件，直接把組件的名稱，以HTML標簽的形式，引入到頁面中即可 --> <mycom1></mycom1> </div> <script> Vue.component("mycom1", { template: "<h1>這是全局組件-----{{ msg }}</h1>", data: function() { return { msg: "這是組件的中data定義的數據" }; } }); var vm = new Vue({ el: "#app", data: {}, methods: {}, filters: {}, directives: {} }); </script> </body> </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>組件</title> <script src="./lib/vue.js"></script> </head> <body> <div id="app"> <counter></counter> <hr /> <counter></counter> <hr /> <counter></counter> <!-- 如果要使用組件，直接把組件的名稱，以HTML標簽的形式，引入到頁面中即可 --> </div> <template id="tmp1"> <div> <input type="button" value="+1" @click="increment" /> <h3>{{ count }}</h3> </div> </template> <script> var dataObj = { count: 0 }; //這是一個計數器的組件，身上有個按鈕，每當點擊按鈕，讓 data 中的 count 值 +1 Vue.component("counter", { template: "#tmp1", data: function() { return { count: 0 }; }, methods: { increment() { this.count++; } } }); var vm = new Vue({ el: "#app", data: {}, methods: {}, filters: {}, directives: {} }); </script> </body> </html>
