Vue学习记录-Vue组件模板分离

最新推荐文章于 2022-12-08 18:04:41 发布

原创最新推荐文章于 2022-12-08 18:04:41 发布 · 249 阅读

0 ·

CC 4.0 BY-SA版权

本文详细介绍如何利用Vue.js框架创建可复用的动态组件，包括组件注册、模板定义及数据绑定等关键步骤。通过具体实例，展示了Vue.js在前端开发中的强大功能。

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>