组件的语法糖/模板分离方法

注册组件语法糖

调用语法糖，它省去了调用vue.extend()的步骤，可直接使用一个对象来代替

把2用1替换 改变成图2 那种形式

<div id="app"> 
  <cpn1><cpn1>
  <cpn2><cpn2>
</div>

<script src="../js/vue.js"></script>
<script>

//注册组件
//用语法糖的方法：
vue.component('cpn1',{
template:
  <div>
     <h2>猪八戒</h2>
	 <p>孙悟空</p>
	 <p>沙和尚</p>
  </div>
})
//注册局部组件的语法糖
const app = new vue({
  el:'#app',
  data:{
    message:'你好'
  },
  components:{
	'cpn2':{
	  template:
  <div>
     <h2>猪八戒2</h2>
	 <p>孙悟空2</p>
	 <p>沙和尚2</p>
  </div>
	}
  }
})

模板的分离写法

1.第一种写法

注意：要改写成 type=“text/x-temlate”

2。第二种写法