Vue組件模板分離(day24)

2020年5月22日

	<div id="app">
	    <cpn1></cpn1>
	    <cpn1></cpn1>
	    <cpn2></cpn2>
	    <cpn2></cpn2>
	  </div>
	  <script type="text/x-tempalte" id="cpn1">
	    <div>
	      <h2>head1</h2>
	      <p>passage1</p>
	    </div>
	  </script>
	  <template id="cpn2">
	    <div>
	      <h2>head2</h2>
	      <p>passage2</p>
	    </div>
	  </template>
	  <script src="../js/vue.js">
	  </script>
	  <script>
	      Vue.component('cpn1',{
	        template: "#cpn1"
	      }),
	      Vue.component('cpn2',{
	        template: "#cpn2"
	      })
	      const app = new Vue({
	        el: '#app',
	        data: {
	          message: 'hello'
	        }
	     })
	  </script>