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

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

orangecloudy

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

阅读量231

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/orangecloudy/article/details/106291550

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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>