说明
把template模板单独抽离出来,将模板内容写在模板标签中,注意要写id。在Vue.component的template中可以直接写模板标签中的id。使代码更整洁规范。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<script src="js/vue.js"></script>
<body>
<div id="app">
<ul>
<cmp></cmp> <!--引用多次模板-->
<cmp></cmp>
<cmp></cmp>
<cmp></cmp>
</ul>
</div>
<!--模板-->
<template id="cmp">
<li>
<h3>我是标题</h3>
<h4>我是副标题</h4>
<p>我是内容啦啦啦啦啦啦</p>
</li>
</template>
<script>
Vue.component("cmp",{
template: '#cmp'
})
/*let(变量)const(常量)*/
const app = new Vue({
el: '#app', //用于挂载要管理的元素
data: { //定义数据
message: 'hello world',
}
})
</script>
</body>
</html>