vue.js中main.js文件的理解

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

new Vue({

el: ‘#app’,

components:{App},

template: ‘’

})

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

template网上查了很久，都说是用替换index.html里面的

，但实验结果并不是这样，太坑了。

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

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

例如：

大家疑惑的可能是

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

This is a component!

通过template标签达到同样效果。

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

第三种就是直接的文本

例如

var vm = new Vue({
el: ‘#app’,
template: ‘

第三种写法

’,
})
这里要注意的是文本外面必须有个html标签，例如div或span这种，不然无效，原因不知。