如果我们希望将data中的数据显示在界面中，就必须是修改index.html,如果我们后面自定义了组件，也必须修改index.html来使用组件,但是html模板在之后的开发中，并不希望手动的来频繁修改.

定义template属性：

在前面的Vue实例中，我们定义了el属性，用于和index.html中的#app进行绑定，让Vue实例之后可以管理它其中的内容，我们吧index,html中的代码删至:

我们可以在VUE实例中 定义一个template属性，代码如下：

 

 那么 重新打包，运行程序，显示一样的结果和HTML代码结构。。。  那么证明 temllate中的代码会替代 index.html中文件的 id为app的版块。

 

el和template模板的关系是什么：

el用于指定Vue要管理的DOM，可以帮助解析其中的指令、事件监听等等；

如果Vue实例中同时指定了template，那么template模板的内容会替换掉挂载的对应el的模板。

 

这样做目的：

之后我们就不需要在以后的开发中再次操作index.html，只需要在template中写入对应的标签即可

 

书写template模块非常麻烦怎么办：

我们会将template模板中的内容进行抽离

分成三部分书写：template、script、style，结构变得非常清晰。

 

例如：

【图1】抽取Template代码；；    然后在Vue实例 用 Components 属性哪里 注册一下APP即可【图2】

 

 

 

 

例2：

 

 

 

---

---

 

简单就用 Default 这样实现JS文件独立，那么就可以导入、导出了，，，

光JS不够，CSS、JAVASCRIPT呢？   那就新建VUE文件：

 

 

可以看到 一新建他就有这三的模板给你了 你在其中些代码即可【上面那个是HbuiderX 给出的】

【下面这个是 WEBStore给出的 】

叫：　　　　

 

 模板是这样的 可以看出用Default 所以呢 这就是上面JS实现分离的技巧所在：

 

 

 

至于 style 的 scoped 自己百度：