vue使用template模板
vue通过使用template标签将组件进行分离,代码如下：
第1种方式：
<div id="app" >
<mycpn></mycpn>
</div>
<template id="cpn" >
<!-- 使用模板需要在template标签中使用<div>标签将所有内容进行包裹，否则容易出现以下错误 -->
[Vue warn]: Error compiling template:Component template should contain exactly one root element. If you are using v-if on multiple elements, use v-else-if to chain them instead.
<div>
<h1>{{message}}</h1>
</div>
<template>
<script type="text/javascript" >
//定义全局模板
Vue.component('mycpn',{
//通过标签id绑定template标签，实现了外部定义内部绑定，内部绑定会显得代码很乱
template:'#cpn',
//此处定义数据，通过data函数，之所以不用对象进行数据的定义，是因为要防止组件复用时内部的数据共享。
data(){
return{
message:"我是组件的数据"
}
}
})
//即便使用模板分离，凡是使用vue相关的东西都必须在vue绑定的标签中使用，否则不会正常解析。
const app = new Vue({
el:'#app'
})
</script>
第2中方式：使用<script type="text/x-template" id="cpn" >
<script type="text/x-template" id="cpn" >
<div>
<mycpn></mycpn>
</div>
</script>
- 第一种和第二中方式区别只是在定义模板的标签不同。