vue.js的组件模板抽离的写法

上代码演示：

<div id="app">
    <cpn1></cpn1>
    <cpn2></cpn2>
  </div>
  <!--组件模板抽离的第一种写法-->
  <script type="text/x-template" id="cpn1">
    <div>
      <h2>组件模板抽离的第一种写法,script标签的类型必须是text/x-template</h2>
    </div>
  </script>

  <!--第二种写法：template标签-->
  <template id="cpn2">
    <div>
      <h2>组件模板抽离的第二种，直接使用template标签</h2>
    </div>
  </template>
  <script>
    // 注册组件：第一种模板抽离写法
    Vue.component('cpn1',{
	    template: '#cpn1'
    })
	// 注册组件：第二种模板抽离写法
    Vue.component('cpn2',{
	    template: '#cpn2'
    })
  	const app = new Vue({
  		el: '#app',
  		data: {
  			msg: '欢迎使用Vue.js'
  		}
  	})
  </script>

1.组件模板抽离的第一种写法;

组件模板抽离的第一种写法,script标签的类型必须是text/x-template.

2.组件模板抽离的第二种写法;

直接使用template标签

总结：两种写法在标签上都需要使用id来注册组件

	{
	    template: '#id'
    }