1. ·本质上,组件是可复用的Vue实例,所以它们可与 new Vue接 收相同的选项,例如data、 methods以及生命周期钩子等。
  3. ·仅有的例外是像el这样根实例特有的选项

· 组件命名规则

· template选项

· data选项

组件命名规则

·组件具有两种命名规则:

kebab-case: ‘my-component’

Pascal Case:’My Component’

组件基础 - 图1

·注意:无论采用哪种命名方式,在DOM中都只有 kebab—case可 以使用。

<!DOCTYPE html> <html lang=“en”> <head> <meta charset=“UTF-8”> <meta name=“viewport” content=“width=device-width, initial-scale=1.0”> <title>Document</title> </head> <body> <div id=“app”> <my-com-a></my-com-a> <my-com-b></my-com-b> </div> <script src=“lib/vue.js”></script> <script> // kebab-case 进行注册 Vue.component(‘my-com-a’, { template: ‘
这是a组件的内容
‘ }); // PascalCase 进行注册 Vue.component(‘MyComB’, { template: ‘
这是b组件的内容
‘ }); new Vue({ el: ‘#app’, data: { } }) </script> </body> </html>