Vue组件基础用法
vue介绍：vue是一个兴起的前端js库，是一个精简的MVVM。从技术角度讲，Vue.js 专注于 MVVM 模型的 ViewModel 层。它通过双向数据绑定把 View 层和 Model 层连接了起来，通过对数据的操作就可以完成对页面视图的渲染。当然还有很多其他的mvmm框架如Angular，React都是大同小异，本质上都是基于MVVM的理念。 然而vue以他独特的优势简单，快速，组合，紧凑，强大而迅速崛起
前面的话
组件(Component)是Vue.js最强大的功能之一。组件可以扩展HTML元素，封装可重用的代码。根据项目需求，抽象出一些组件，每个组件里包含了展现、功能和样式。每个页面，根据自己所需，使用不同的组件来拼接页面。这种开发模式使前端页面易于扩展，且灵活性高，而且组件之间也实现了解耦。本文将详细介绍Vue组件基础用法
概述
在 Vue 里，一个组件本质上是一个拥有预定义选项的一个 Vue 实例
组件是一个自定义元素或称为一个模块，包括所需的模板、逻辑和样式。在HTML模板中，组件以一个自定义标签的形式存在，起到占位符的功能。通过Vue.js的声明式渲染后，占位符将会被替换为实际的内容
下面是一个最简单的模块示例
<div id="app"> <xiaohuochai></xiaohuochai> </div>
注册组件
组件注册包括全局注册和局部注册两种
【全局注册】
要注册一个全局组件，可以使用 Vue.component(tagName, options)
Vue.component('my-component', {
// 选项
}) 组件在注册之后，便可以在父实例的模块中以自定义元素 <my-component></my-component> 的形式使用 [注意]要确保在初始化根实例之前注册了组件
<div id="example"> <my-component></my-component> </div>
<script>
// 注册
Vue.component('my-component', {
template: '<div>A custom component!</div>'
})
// 创建根实例
new Vue({
el: '#example'
})
</script> 【局部注册】
通过使用组件实例选项components注册，可以使组件仅在另一个实例/组件的作用域中可用