Vue组件基础大全，JavaScript的变量与字面量

组件介绍

• 模块化就是将系统功能分离成独立的功能部分的方法，一般指的是单个的某一种东西，例如js、css

• 而组件化针对的是页面中的整个完整的功能模块划分，组件是一个html、css、js、image等外链资源，这些部分组成的一个聚合体

• 优点：代码复用，便于维护

• 划分组件的原则：复用率高的，独立性强的

• 组件应该拥有的特性：可组合，可重用，可测试，可维护

Vue组件是可复用的 Vue 实例，且带有一个名字：例如 <button-counter>。我们可以在一个通过 new Vue 创建的 Vue 根实例中，把这个组件作为自定义元素来使用：

组件的注册

全局组件注册

• 全局组件注册代码

//创建组件

const Hello=Vue.extend({

template:<h1>hello world</h1>

})

// 全局注册

Vue.component(‘hello’,Hello)

• 全局组件注册的组件可以在任意vue实例下使用

• 注册成功并复用,会出现两个hello world

局部组件注册

• 局部组件注册代码

// // 创建组件

const Hello=Vue.extend({

template:<h1>hello world</h1>

})

new Vue({

el:“#app”,

// 局