14.Vue组件
1.定義Vue組件
什么是組件： 組件的出現(xiàn)，就是為了拆分Vue實(shí)例的代碼量的，能夠讓我們以不同的組件，來(lái)劃分不同的功能模塊，將來(lái)我們需要什么樣的功能，就可以去調(diào)用對(duì)應(yīng)的組件即可；
?組件化和模塊化的不同：
? ? +?模塊化： 是從代碼邏輯的角度進(jìn)行劃分的；方便代碼分層開(kāi)發(fā)，保證每個(gè)功能模塊的職能單一；
? ? +?組件化： 是從UI界面的角度進(jìn)行劃分的；前端的組件化，方便UI組件的重用；
2.全局組件定義的三種方式：
創(chuàng)建組件的基本方式1：?
創(chuàng)建語(yǔ)法：使用 Vue.extend 配合 Vue.component 方法
//返回組件模板對(duì)象，然后將該對(duì)象真正注冊(cè)為一個(gè)組件Vue.component('mycom1', Vue.extend({template: '<h3>這是使用 Vue.extend 創(chuàng)建的組件</h3>'}))
代碼實(shí)例：
<!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="./lib/vue-2.4.0.js"></script> </head><body><div id="app"><!-- 如果要使用組件，直接把組件的名稱，以 HTML 標(biāo)簽的形式，引入到頁(yè)面中即可 --><mycom1></mycom1></div><script>// 1.1 使用 Vue.extend 來(lái)創(chuàng)建全局的Vue組件// var com1 = Vue.extend({// template: '<h3>這是使用 Vue.extend 創(chuàng)建的組件</h3>' // 通過(guò) template 屬性，指定了組件要展示的HTML結(jié)構(gòu)// })// 1.2 使用 Vue.component('組件的名稱', 創(chuàng)建出來(lái)的組件模板對(duì)象com1)// Vue.component('myCom1', com1)// 如果使用 Vue.component 定義全局組件的時(shí)候，組件名稱使用了駝峰命名，則在引用組件的時(shí)候，// 需要把大寫的駝峰改為小寫的字母，同時(shí)兩個(gè)單詞之間使用 - 連接；<my-com1></my-com1>// 如果不使用駝峰,則直接拿名稱來(lái)使用即可;// Vue.component('mycom1', com1)//---------------------------------------------------------------------------------// Vue.component // 第一個(gè)參數(shù):組件的名稱:將來(lái)在引用組件的時(shí)候,就是一個(gè)"標(biāo)簽形式"來(lái)引入// 第二個(gè)參數(shù): Vue.extend 創(chuàng)建的組件 ,其中 template 就是組件將來(lái)要展示的HTML內(nèi)容 Vue.component('mycom1', Vue.extend({template: '<h3>這是使用 Vue.extend 創(chuàng)建的組件</h3>'}))// 創(chuàng)建Vue實(shí)例，得到ViewModelvar vm = new Vue({el: '#app',data: {},methods: {}});</script> </body> </html> View Code創(chuàng)建組件的基本方式2：?
創(chuàng)建語(yǔ)法：直接使用 Vue.component 方法
Vue.component('mycom2', {template: '<div><h3>這是直接使用 Vue.component 創(chuàng)建出來(lái)的組件</h3><span>123</span></div>' })代碼實(shí)例：
<!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="./lib/vue-2.4.0.js"></script> </head><body><div id="app"><!-- 還是使用 標(biāo)簽形式,引入自己的組件 --><mycom2></mycom2></div><script>// 注意:不論是哪種方式創(chuàng)建出來(lái)的組件,組件的 template 屬性指向的模板內(nèi)容,必須有且只能有唯一的一個(gè)根元素 Vue.component('mycom2', {template: '<div><h3>這是直接使用 Vue.component 創(chuàng)建出來(lái)的組件</h3><span>123</span></div>'})// 創(chuàng)建 Vue 實(shí)例，得到 ViewModelvar vm = new Vue({el: '#app',data: {},methods: {}});</script> </body> </html> View Code創(chuàng)建組件的基本方式3：?
創(chuàng)建語(yǔ)法：
<!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="./lib/vue-2.4.0.js"></script> </head> <body><div id="app"><mycom3></mycom3></div><div id="app2"><mycom3></mycom3><login></login></div><!-- 在被控制的 #app 外面,使用 template 元素,定義組件的HTML模板結(jié)構(gòu) --><template id="tmpl"><div><h1>這是通過(guò) template 元素,在外部定義的組件結(jié)構(gòu),這個(gè)方式,有代碼的只能提示和高亮</h1><h4>好用,不錯(cuò)!</h4></div></template><template id="tmpl2"><h1>這是私有的 login 組件</h1></template><script>Vue.component('mycom3', {template: '#tmpl'})// 創(chuàng)建 Vue 實(shí)例，得到 ViewModelvar vm = new Vue({el: '#app',data: {},methods: {}});var vm2 = new Vue({el: '#app2',data: {},methods: {},filters: {},directives: {},components: { // 定義實(shí)例內(nèi)部私有組件的//組件名稱 login: {template: '#tmpl2'}},beforeCreate() { },created() { },beforeMount() { },mounted() { },beforeUpdate() { },updated() { },beforeDestroy() { },destroyed() { }})</script> </body> </html> View Code?
轉(zhuǎn)載于:https://www.cnblogs.com/yaboya/p/10259199.html
總結(jié)
- 上一篇： 使用redis批量生成主键(订单)Id
- 下一篇： 从0开始Vue2集成Bootstrap4