什么是template
template的作用是渲染组件的内容,在vue中渲染组件的内容有两种方式,这是其一,另外一种是通过render函数的方式。另外一种我们之后讲。
先来看看官方文档的定义:
组件的模板结构(HTML),模板内容会被vue进行渲染,生成最终的HTML内容,并替换占位(挂载)元素。
上案例:
以定义组件的两种方法之一的定义根组件为例
我们先看没有template的情况
<div id="v-model-basic" class="demo">
<p>Message is: {{ message }}</p>
</div>
var app =new Vue({
el:'#v-model-basic',
data:{
message:""
}
})
先浅浅解读一下这个新建的vue实例对象内有两个很重要的参数:分别是el和data。el参数功能是将实例中的内容挂载到指定的el中,在这里指向id为v-model-basic的语句块;data参数内注册变量并保存变量数据,在这里初始化值为空的字符串
结果如上
接下来我们引入template,看看有template的情况
<div id="v-model-basic" class="demo">
<p>Message is: {{ message }}</p>
</div>
var app =new Vue({
el:'#v-model-basic',
data:{
message:""
},
template:'<p> my-root Message is: {{ message }}</p>'
})
我们在原有的代码的基础上,在创建根组件代码块内,添加template参数
结果如上,原来(挂载)元素上有原始的模板结构(HTML) 和 模板内容,但是在添加template参数之后,template参数内的模板结构(HTML) 和 模板内容被vue渲染后生成最终的HTML内容,将之替换
ps:由于template选项为string类型,使用的时候,一定不要漏‘’;此外,防止报错最好将其写在一行之内