组件模板抽离的写法
1.我们通过语法糖简化了Vue组件的注册过程,另外还有一个地方的写法比较麻烦,就是template模块写法。
2.如果我们能将其中的HTML分离出来写,然后挂载到对应的组件上,必然结构会变得非常清晰
3.Vue提供了两种方案来定义HTML模块内容:
(1)使用script标签
(2)使用template标签
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
<cpn></cpn>
<cpn></cpn>
</div>
<!--1.script标签,注意:类型必须是text/x-template-->
<!--<script type="text/x-template" id="cpn">-->
<!--<div>-->
<!--<h2>我是标题</h2>-->
<!--<p>我是内容</p>-->
<!--</div>-->
<!--</script>-->
<!--2.template标签-->
<template id="cpn">
<div>
<h2>我是标题呵呵呵</h2>
<p>我是内容</p>
</div>
</template>
<script src="../../vue.min.js"></script>
<script>
//1.注册一个全局组件
Vue.component('cpn',{
template:'#cpn'
})
const app=new Vue({
el:'#app',
data:{
message:'hello',
}
})
</script>
</body>
</html>
栗子:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
<cpn></cpn>
<cpn></cpn>
</div>
<!--1.script标签,注意:类型必须是text/x-template-->
<!--<script type="text/x-template" id="cpn">-->
<!--<div>-->
<!--<h2>我是标题</h2>-->
<!--<p>我是内容</p>-->
<!--</div>-->
<!--</script>-->
<!--2.template标签-->
<!--<template id="cpn">-->
<!--<div>-->
<!--<h2>{{title}}</h2>-->
<!--<p>我是内容</p>-->
<!--</div>-->
<!--</template>-->
<template id="cpn">
<div>
计数器:{{counter}}
<button @click="increment">+</button>
<button @click="decrement">-</button>
</div>
</template>
<script src="../../vue.min.js"></script>
<script>
//1.注册一个全局组件
Vue.component('cpn',{
template:'#cpn',
data(){
return {
title:'abc',
counter:0
}
},
methods:{
increment(){
this.counter++
},
decrement(){
this.counter--
}
}
})
const app=new Vue({
el:'#app',
data:{
message:'hello',
}
})
</script>
</body>
</html>