Fatal编程技术网
  • vuejs2/
  • Vuejs2 vue组件和应用程序中的'el'和'template'有什么区别？

Vuejs2 vue组件和应用程序中的'el'和'template'有什么区别？

vuejs2

Vuejs2 vue组件和应用程序中的'el'和'template'有什么区别？,vuejs2,Vuejs2,VUE组件（以及应用程序本身）有一个el:，还有一个模板 我想了解区别是什么，何时使用其中一种，何时使用另一种： 如果我使用Monaca CLI从最小VUE OnsenUI模板创建项目，我会看到： new Vue({ el: '#app', template: '<app></app>', components: { App } }); 我的vue js说： el: "replace-this", template: "<div id='replac

VUE组件（以及应用程序本身）有一个
el:
，还有一个
模板

我想了解区别是什么，何时使用其中一种，何时使用另一种：

如果我使用Monaca CLI从最小VUE OnsenUI模板创建项目，我会看到：

new Vue({
  el: '#app',
  template: '<app></app>',
  components: { App }
});
我的vue js说：

el: "replace-this", 
template: "<div id='replaced'>hi there</div>"
如果我的html是

<html>
  <body>
    <div id="bla">
       anything inside here including the surrounding div will be replaced 
    </div>
    <template id="blu">
       <span id ="replacing-html">
           when ran in span, it stays mainly in the pan
       </span> 
    </template>
  </body>
</html>


这里的任何东西，包括周围的div都将被替换
在跨度内运行时，它主要停留在平底锅中
然后id为
bla
的div将替换为
模板中的
替换html
span元素。（模板标记本身及其所有内容仍将保留在发出的html中。是否正确？）

所以我需要理解：


  • 模板
    内容是否替换了
    el
    元素
    • 

  • 模板下必须只有一个根元素吗

  • 我的第一个例子正确吗
    • 

  • 第二个例子我说得对吗
    • 

  • 包含所有内容的
    模板
    标记是否会保留在发出的html中

  • 在上面的Monaca Vue OnsenUI示例中，
    el
    与模板“app”相同，会发生什么情况。这不是递归的吗？什么被替换，用什么替换

    
为Vue实例提供一个要装载的现有DOM元素。它可以是CSS选择器字符串或实际的HTMLElement
    
安装实例后，解析的元素将作为vm.$el进行访问
    
如果实例化时该选项可用，实例将立即进入编译；否则，用户必须显式调用vm.$mount（）以手动启动编译
    

    

    
用作Vue实例标记的字符串模板。模板将替换已安装的元件。除非模板中存在内容分发槽，否则将忽略已装入元素中的任何现有标记
    
如果字符串以#开头，它将用作查询选择器，并使用所选元素的innerHTML作为模板字符串。这允许使用通用技巧包含模板
    

    
在您的示例中，您正在定义的Vue实例正在注册一个
    应用程序
    组件，然后在其模板定义中使用该组件。它还在DOM中查找id为
    app
    的现有元素，以便在装载时用作关联元素
    

    我想你的困惑是因为两人都在使用一种叫做“app”的东西。它们的名称不必相同。
    在您接受原始问题的答案后，请不要更改您的问题。如果你有一个新问题，为它创建一个新的帖子。我并没有真的改变它，而是为了清晰而更新。通过举例说明，对公认的正确答案进行了评论。因此，这个答案实际上回答了以下问题（我为Clarity修改了问题）：1。模板内容是否正在替换el元素？是的。模板下必须只有一个根元素吗？是的。我的第一个例子正确吗？是的。第二个例子我说得对吗？是的。包含所有内容的模板标记会保留在发出的html中吗？是的，6。6.在上面的Monaca Vue OnsenUI示例中，el与模板“app”相同，会发生什么情况。这不是递归的吗？什么被替换，用什么替换？答：代码中的app元素将在HTML中被“自身”替换，但同时组件也有js和css，在这个app的“范围”内与之连接。在导航器、选项卡或拆分器的情况下，代码可以设置一个页面来显示应用程序外部的第二个组件中的页面。与导航器/选项卡的进一步交互可以更改当前显示的页面。@pashute如果您想发布自己的答案以更好地解决文章中的每个新问题，您可以。然后我会删除我的帖子，它是针对你问题的早期版本。不，我是想接受答案。好像我忘了这么做。谢谢你让我走上正轨！

    <html>...<body>...<div id='replaced'>hi there</div>... 

    

    el: "#bla", 
template: "#blu" 

    

    <html>
  <body>
    <div id="bla">
       anything inside here including the surrounding div will be replaced 
    </div>
    <template id="blu">
       <span id ="replacing-html">
           when ran in span, it stays mainly in the pan
       </span> 
    </template>
  </body>
</html>

    														
    •