转自:https://blog.csdn.net/zhangjieshuaige/article/details/83622973 

今天看了VUE默认实例化的这段代码：

new Vue({

  el: '#app',

  components:{App},

  template: '<App/>'

})

 

首先el这样的参数意义比较明显，就是要被替换的index.html中的元素

template网上查了很久，都说是用<app></app>替换index.html里面的<div id="app"></div>，但实验结果并不是这样，太坑了。

实际上<App/>写法表示要选择的组件，因为components参数里其实可以放多个组件对象，比如：components:{App，App2，App3},如果想用App2，则需要设置template: '<App2/>',这是template参数最常见的用法。

第二种用法是以#开头，表示选择器，他会获取页面上的元素来替换el参数里的元素。例如：

大家疑惑的可能是<script type="text/x-template" id="myComponent"> 这段js

实际上它的作用只是为了让它内部的内容隐藏，这样我们可以实际需要使用的时候再通过template替换的方式使用。我们也可以这样：

<template id="myComponent"> <div>This is a component!</div> </template> 通过template标签达到同样效果。

这段代码也反映了一个情况，就是通过#获取的元素不一定是index.html里的，因为组件的渲染是随处可有的，template并不是只是根实例化里用。

 

第三种就是直接的文本，例如

var vm = new Vue({
  el: '#app',
  template: '<div>第三种写法</div>',
})
这里要注意的是文本外面必须有个html标签，例如div或span这种，不然无效，原因不知。