1、Vue组件化开发思想。
引述：组件化规范Web Components。
1）、我们希望尽可能多的重用代码。
2）、自定义组件的方式不太容易（html、css、js）。
3）、多次使用组件可能导致冲突。
4）、Web Components通过创建封装好功能的定制元素解决上述问题。
5）Vue部分实现了上述Web Components规范。
2、Vue组件注册。Vue组件注册注意事项。
1）、data必须是一个函数。分析函数与普通对象的对比，Vue的data是一个对象，区别于组件的data是一个函数。组件的data是函数，可以形成一个闭包的环境，这可以保证每一个组件都可以拥有一份独立的数据。
2）、组件模板内容必须是单个根元素，分析演示实际的效果，比如多个div包了多个button标签。类比Vue实例的el容器中。
3）、组件模板内容可以是模板字符串。模板字符串需要浏览器提供支持（ES6语法规则）。
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 </head> 7 <body> 8 <div id="app"> 9 <div v-text="msg"></div> 10 11 <!-- Vue组件注册成功之后，就可以使用了 --> 12 <!-- 这个组件是一个子组件，因为Vue也是一个组件，子组件写到Vue父组件当中，形成父子关系。 --> 13 <button-counter></button-counter> 14 15 <!-- 组件的重用，可以拷贝多份，每个组件相互独立，不互相影响的。 --> 16 <button-counter></button-counter> 17 <button-counter></button-counter> 18 </div> 19 20 <script src="vue.js" type="text/javascript"></script> 21 <script type="text/javascript"> 22 // Vue的组件化开发，Vue的注册。参数一是组件的名称，参数二是组件的内容，是一个对象。 23 // Vue.component('', { 24 // data: '', //data表示组件数据。 25 // template: '', // template表示组件模板内容。可以做数据的绑定、分支、事件的操作、循环的结构都可以在这里面使用。 26 // }); 27 // Vue的组件化开发，Vue的注册，下面的语法就将组件注册成功了。 28 // Vue.component('button-counter', { 29 // data: function() { 30 // // 提供一个具体的对象，对象当中存放的具体的数据 31 // return { 32 // count: 0, 33 // } 34 // }, 35 // // template: '<button @click="count++">点击了{ {count}}次</button>', 36 // // 组件模板内容必须是单个根元素，分析演示实际的效果 37 // template: '<div><button @click="counts">点击了{ {count}}次</button><button @click="counts">点击了{ {count}}次</button></div>', 38 // methods: { 39 // counts: function() { 40 // this.count++; 41 // } 42 // } 43 // }) 44 //--------------------------------------------------------------------------------------- 45 Vue.component('button-counter', { 46 data: function() { 47 // 提供一个具体的对象，对象当中存放的具体的数据 48 return { 49 count: 0, 50 } 51 }, 52 // template: '<button @click="count++">点击了{ {count}}次</button>', 53 // 组件模板内容可以是模板字符串。模板字符串需要浏览器提供支持（ES6语法规则） 54 template: ` 55 <div> 56 <button @click="counts">点击了{ {count}}次</button> 57 <button @click="counts">点击了{ {count}}次</button> 58 </div> 59 `, 60 methods: { 61 counts: function() { 62 this.count++; 63 } 64 } 65 }) 66 67 // 创建Vue对象 68 var vm = new Vue({ 69 el: '#app', 70 data: { // 对象，区别于组件的data是一个函数。 71 msg: 'hello world!', 72 }, 73 methods: {} 74 }); 75 </script> 76 </body> 77 </html>
3、Vue组件注册，组件名称方法。
1）、短横线方式。Vue.component('button-counter', {/** ... */});
2）、驼峰方式，驼峰方式要用到根组件里面，需要换成短横线方式。如果使用驼峰式命名组件，那么在使用组件的时候，只能在字符串模板中用驼峰的方式使用组件，但是在普通的标签模板中，必须使用短横线的方式使用组件。Vue.component('buttonCounter', {/** ... */});
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 </head> 7 <body> 8 <div id="app"> 9 <Hello-world></Hello-world> 10 <div v-text="msg"></div> 11 12 <!-- Vue组件注册成功之后，就可以使用了 --> 13 <!-- 这个组件是一个子组件，因为Vue也是一个组件，子组件写到Vue父组件当中，形成父子关系。 --> 14 <button-counter></button-counter> 15 16 <!-- 组件的重用，可以拷贝多份，每个组件相互独立，不互相影响的。 --> 17 <button-counter></button-counter> 18 <button-counter></button-counter> 19 </div> 20 21 <script src="vue.js" type="text/javascript"></script> 22 <script type="text/javascript"> 23 // Vue的组件化开发，Vue的注册。参数一是组件的名称，参数二是组件的内容，是一个对象。 24 // Vue.component('', { 25 // data: '', //data表示组件数据。 26 // template: '', // template表示组件模板内容。可以做数据的绑定、分支、事件的操作、循环的结构都可以在这里面使用。 27 // }); 28 // Vue的组件化开发，Vue的注册，下面的语法就将组件注册成功了。 29 // Vue.component('button-counter', { 30 // data: function() { 31 // // 提供一个具体的对象，对象当中存放的具体的数据 32 // return { 33 // count: 0, 34 // } 35 // }, 36 // // template: '<button @click="count++">点击了{ {count}}次</button>', 37 // // 组件模板内容必须是单个根元素，分析演示实际的效果 38 // template: '<div><button @click="counts">点击了{ {count}}次</button><button @click="counts">点击了{ {count}}次</button></div>', 39 // methods: { 40 // counts: function() { 41 // this.count++; 42 // } 43 // } 44 // }) 45 46 Vue.component('HelloWorld', { 47 data: function() { 48 return { 49 msg: '您好，Vue!', 50 } 51 }, 52 template: '<div>{ {msg}}</div>', 53 }); 54 55 //--------------------------------------------------------------------------------------- 56 Vue.component('buttonCounter', { 57 data: function() { 58 // 提供一个具体的对象，对象当中存放的具体的数据 59 return { 60 count: 0, 61 } 62 }, 63 // template: '<button @click="count++">点击了{ {count}}次</button>', 64 // 组件模板内容可以是模板字符串。模板字符串需要浏览器提供支持（ES6语法规则） 65 template: ` 66 <div> 67 <button @click="counts">点击了{ {count}}次</button> 68 <button @click="counts">点击了{ {count}}次</button> 69 <HelloWorld></HelloWorld> 70 </div> 71 `, 72 methods: { 73 counts: function() { 74 this.count++; 75 } 76 } 77 }) 78 79 // 创建Vue对象 80 var vm = new Vue({ 81 el: '#app', 82 data: { // 对象，区别于组件的data是一个函数。 83 msg: 'hello world!', 84 }, 85 methods: {} 86 }); 87 </script> 88 </body> 89 </html>
4、Vue组件注册，局部组件注册。
1）、局部组件，只能在注册他的父组件当中使用，在别的组件中是不可以使用的。
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 </head> 7 <body> 8 <div id="app"> 9 <!-- 使用局部组件 --> 10 <component-a></component-a> 11 <component-b></component-b> 12 <component-c></component-c> 13 </div> 14 15 <script src="vue.js" type="text/javascript"></script> 16 <script type="text/javascript"> 17 /* 通过这种方式注册的组件只能在父组件中使用，在别的组件中是使用不了的。 */ 18 var componentA = { 19 data: function() { 20 return { 21 msg: 'hello world componentA.', 22 } 23 }, 24 template: '<div>{ {msg}}</div>', 25 }; 26 var componentB = { 27 data: function() { 28 return { 29 msg: 'hello world componentB.', 30 } 31 }, 32 template: '<div>{ {msg}}</div>', 33 }; 34 var componentC = { 35 data: function() { 36 return { 37 msg: 'hello world componentC.', 38 } 39 }, 40 template: '<div>{ {msg}}</div>', 41 }; 42 43 // 创建Vue对象 44 var vm = new Vue({ 45 el: '#app', 46 data: { // 对象，区别于组件的data是一个函数。 47 48 }, 49 methods: { 50 51 }, 52 // Vue的局部组件注册。 53 components: { 54 // 将局部组件通过components注册进来 55 '</
最低0.47元/天 解锁文章
2184
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
