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>

• 第一种和第二中方式区别只是在定义模板的标签不同。