vue组建的创建

Posted 2021-02-10 weidaijie

Vue.js 组件

组件（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:{

       }
 })