Vue 非单文件组件

一、Vue组件使用的三大步

1、定义组件

2、注册组件

3、使用组件

二、定义组件

1、Vue.extend({})与new Vue({})基本相似，Vue.extend不适用el，data要写返回函数

2、template用来写html结构，注意要加div包裹起来

3、简写

const s = {template:`<div><h2>{{content}}</h2></div>`,data() {return {content:'Hello World'}},
}

4、name: 名称，只在Vue开发者工具中起作用，在开发者工具组显示名称

三、注册组件

1、局部注册

new Vue({...,compents:{组件使用名: 组件定义名,
}   
})

2、全局组件

Vue.component('使用组件名称', 组件定义名)

四、使用组件

在模板容器中 <使用组件名称></使用组件名称>，或 <使用组件名称/>

注意：<使用组件名称/>，这种格式只有在脚手架中起作用

五、组件名称的格式

1、单词 首字母小写 或 首字母大学

2、多词 xx-xx 或 大驼峰(在Vue脚手架中不报错)