标签：class span 有一个 png 扩展 run options 基础 重用
组件（Component）是 Vue.js 最强大的功能之一。vue的核心基础就是组件的使用，玩好了组件才能将前面学的基础更好的运用起来。组件的使用更使我们的项目解耦合。更加符合vue的设计思想MVVM。
组件可以扩展 HTML 元素，封装可重用的代码。
组件系统让我们可以用独立可复用的小组件来构建大型应用，几乎任意类型的应用的界面都可以抽象为一个组件树
注册一个全局组件语法格式如下
Vue.component(tagName, options)
tagName 为组件名，options 为配置选项。注册后，我们可以使用以下方式来调用组件：
<tagName></tagName>
所有实例都能用全局组件。
注册一个简单的全局组件 runoob，并使用它：
<div id="app">
<runoob></runoob>
</div>
<script>
// 注册
Vue.component(‘runoob‘, {
template: ‘<h1>自定义组件!</h1>‘
})
// 创建根实例
new Vue({
el: ‘#app‘
})
</script>
我们也可以在实例选项中注册局部组件，这样组件只能在这个实例中使用：
注册一个简单的局部组件 runoob，并使用它：
<div id="app">
<runoob></runoob>
</div>
<script>
var Child = {
template: ‘<h1>自定义组件!</h1>‘
}
// 创建根实例
new Vue({
el: ‘#app‘,
components: {
// <runoob> 将只在父模板可用
‘runoob‘: Child
}
})
</script>
组件实例
#组建的创建
Vue.component(‘Vheader‘,{ data:function(){ #data必须是函数，必须有return return { } }, template:`<div class="header"> <div class="w"> <div class="w-l"> <img src="./logo.png"/> </div> <div class="w-r"> <button>登录</button><button>注册</button> </div> </div> </div>` })
组件是可复用的Vue实例，并且带有一个名字：在这个例子中是 <Vheader>。我们可以在一个通过 new Vue 创建的 Vue 根实例中，把这个组件作为自定义元素来使用：
<div id="app">
<Vheader></Vheader>
<Vheader></Vheader>
</div>
var app = new Vue({ #绑定vue的根元素
el:‘#app‘,
data:{
}
})
标签：class span 有一个 png 扩展 run options 基础 重用
原文地址：https://www.cnblogs.com/weidaijie/p/10428610.html
