Vue初学教程之组件的使用

简介：

Vue 是一套用于构建用户界面的渐进式框架;Vue 被设计为可以自底向上逐层应用;Vue 的核心库只关注视图层。

一.组件

创建Vue的组件都有三个基本步骤：
①创建组件构造器
②注册组件
③使用组件

// 全局注册：
// <!-- 创建一个组件构造器 -->
let myBtton=Vue.extend({
  // <!-- 模板选项 -->
  template:'<button>点击</button>'
  })

// <!-- 2.注册组件 -->
Vue.component('my-button', myButton) // 组件名 构造器

// <!-- 创建Vue实例 -->
let app = new Vue({
    el: '#app'
})

// 局部注册：
let myButton = Vue.extend({ 
    template: `<button>点击我</button>` 
})

let app = new Vue({ 
    el: '#app',
    components: {
        'my-button':myButton
    }
}) 

// 组件注册语法糖：
// 注册全局组件 my-button
Vue.component('my-button', { 
    template: `<button>点击我</button>` 
})

let app = new Vue({ 
    el: '#app' 
}) 

// 局部注册写法
let app = new Vue({ 
    el: '#app',
    components: {
        'my-button': {
            template: `<button>点击我</button>` 
        }
    }
})

//其他写法
Vue.component('my-button', { 
    template: '#my-button' 
})
<template id="my-button">
    <button>点击我</button>
</template>