vue2之浅谈template

---

什么是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类型，使用的时候，一定不要漏‘’；此外，防止报错最好将其写在一行之内