41.el和template区别 & VUE实现分离写法

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

定义template属性:

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

41.el和template区别  &    VUE实现分离写法

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

41.el和template区别  &    VUE实现分离写法

 

 那么 重新打包,运行程序,显示一样的结果和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】

41.el和template区别  &    VUE实现分离写法

 

 41.el和template区别  &    VUE实现分离写法

 

 

例2:

41.el和template区别  &    VUE实现分离写法

 

 

 



 

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

光JS不够,CSS、JAVASCRIPT呢?   那就新建VUE文件:

41.el和template区别  &    VUE实现分离写法

 

 

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

【下面这个是 WEBStore给出的 】

叫:    41.el和template区别  &    VUE实现分离写法

 

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

41.el和template区别  &    VUE实现分离写法

 

 

 

至于 style 的 scoped 自己百度:

41.el和template区别  &    VUE实现分离写法

 

41.el和template区别 & VUE实现分离写法

上一篇:#导入MD文档图片#论文阅读之关系抽取模型Casrel


下一篇:安装多个jdk(1.6和1.8)(含jdk1.8安装教程)