Vue组件的几种声明方式：Vue.extend、语法糖、script的type=“text/x-template“、template标签

1、Vue.extend构造器写法

// 构造器 声明
const cpn2 = Vue.extend({
  template: `
    <h2>这是一个组件</h2>
  `
});
 
// vue实例中挂载注册为局部组件
components: {
  cpn2
}
 
// 全局组件
Vue.component('cpn2', cpn2);
 
 
// HTML代码中使用
<cpn2></cpn2>

 2. 语法糖写法

// vue实例中挂载注册为局部组件
components: {
  cpn2: {
    template: `
      <h2>这是一个组件</h2>
    `
  }
}
 
// 全局组件
Vue.component('cpn2', {
  template: `
    <h2>这是一个组件</h2>
  `
});
 
 
// HTML代码中使用
<cpn2></cpn2>

3. script的type="text/x-template"，组件模板的抽离写法

<script type="text/x-template" id="cp