DOVE-----Vue.js框架入门（五）

第三周学习内容整理

组件

1、组件化规范: Web Components
官网：https://developer.mozilla.org/zh-CN/docs/Web/Web_Components
2、组件注册

• 全局组件注册语法

Vue.component(组件名称, {
data: 组件数据,
template: 组件模板内容
})

• 组件用法

"app">

"app">

• 组件注册注意事项
  （1） data必须是一个函数
  （2） 组件模板内容必须是单个跟元素
  （3） 组件模板内容可以是模板字符串

• 组件命名方式
  （1）短横线方式Vue.component('my-component', { /* ... */ })
  （2）驼峰方式Vue.component('MyComponent', { /* ... */ })
  注意事项：如果使用驼峰式命名组件，那么在使用组件的时候，只能在字符串模板中使用驼峰式命名组件，但是在普通的标签模板中，必须使用短横线的方式使用组件。

• 局部组件注册

var ComponentA = { /* ... */ }
var ComponentB = { /* ... */ }
var ComponentC = { /* ... */ }
new Vue({
el: '#app'
components: {
'component-a': ComponentA,
'component-b': ComponentB,
'component-c': ComponentC,
}
})