Vue.js组件
组件的作用：组件是自定义元素，可扩展html元素，封装可复用的代码。
组件的注册一定要在初始化根实例之前，负责组件是不起作用的。
全局组件在初始化实例的时候被使用
局部组件仅在实例/组件作用域中可用
1、组件的注册
1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title></title> 6 <script type="text/javascript" src="vue.js"></script> 7 </head> 8 <body> 9 <div id="id"> 10 <global></global> 11 <father></father> 12 </div> 13 </body> 14 <script> 15 Vue.component('global',{ 16 template: '<div>注册全局组件</div>' 17 }) 18 19 var partial = { //局部组件仅在一个实例/组件的作用域中可用 20 template: '<div>注册局部组件</div>' 21 } 22 23 new Vue({ 24 el: '#id', 25 components:{ 26 'father':partial 27 } 28 }) 29 </script> 30 </html>
2、DOM模板解释说明
当使用 DOM 作为模版时（例如，将 el 选项挂载到一个已存在的元素上）, 你会受到 HTML 的一些限制，因为 Vue 只有在浏览器解析和标准化 HTML 后才能获取模版内容。尤其像这些元素 <ul> ，<ol>，<table> ，<select> 限制了能被它包裹的元素， 而一些像 <option> 这样的元素只能出现在某些其它元素内部。
这时需要用到特殊的is属性
<table> <my-row>...</my-row> </table> <!--上面的组件是无效的--> <table> <tr is="my-row"></tr> </table> <!--上面的组件使用is属性才能被解析->
3、通过Vue构造器传入的各种选项大多数都可以在组件里用。 data 是一个例外，它必须是函数。
1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title></title> 6 <script type="text/javascript" src="vue.js"></script> 7 </head> 8 <body> 9 <div id="id"> 10 <simple-counter></simple-counter> 11 <simple-counter></simple-counter> 12 <simple-counter></simple-counter> 13 </div> 14 </body> 15 <script> 16 var data = { counter: 0 } 17 Vue.component('simple-counter', { 18 template: '<button v-on:click="counter += 1">{{ counter }}</button>', 19 // 技术上 data 的确是一个函数了，因此 Vue 不会警告， 20 data: function () { 21 //所有组件都是返回同意个对象 22 // return data 23 //为每个组件返回全新的对象 24 return{ 25 counter:0 26 } 27 } 28 }) 29 30 new Vue({ 31 el: '#id' 32 }) 33 </script> 34 </html>