Question

VUE组件（以及应用程序本身）有一个el:和一个template。

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

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

new Vue({
  el: '#app',
  template: '<app></app>',
  components: { App }
});

从缺乏示例的非常详细的文档中，长话短说，我收集到template dom元素及其中的所有内容将替换el dom元素。（模板只能有一个根，对吧？）。例如：如果我的html是：

<html>...
  <body>...
    <replaceThis></replaceThis>...

我的vue js说：

el: "replace-this", 
template: "<div id='replaced'>hi there</div>"

然后我会得到：

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

但我也可以写：

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

然后，如果我的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>

然后，标识为bla的div将替换为replacing-html内的template span元素。（模板标签本身及其中的所有内容仍将保留在发出的html中。正确吗？）

所以我需要明白：

template内容是否替换了el元素？
template必须只有一个根元素吗？
我的第一个例子是否正确？
我对第二个例子是否正确？
包含其中所有内容的template标记是否仍保留在已发出的html中？
在上面的Monaca Vue-OnsenUI示例中，el与模板相同，会发生什么：＆＃34; app＆＃34;。这不是递归吗？什么是替换和什么？

Answer 1

From the documentation on the el option:

为Vue实例提供要挂载的现有DOM元素。它可以是CSS选择器字符串或实际的HTMLElement。

安装实例后，可以通过vm。$ el。
访问已解析的元素
如果此选项在实例化时可用，则实例将立即进入编译;否则，用户必须显式调用vm。$ mount（）来手动启动编译。

From the documentation on the template option:

要用作Vue实例标记的字符串模板。该模板将替换已安装的元素。除非模板中存在内容分发槽，否则将忽略已安装元素内的任何现有标记。

如果字符串以＃开头，它将用作querySelector并使用所选元素的innerHTML作为模板字符串。这允许使用常用技巧来包含模板。

在您的示例中，您定义的Vue实例是注册app组件，然后在其模板定义中使用它。它还在寻找DOM中具有id app的现有元素，以便在安装时使用它作为相关元素。

我认为你的困惑来自两个人都在使用名为＆＃34; app＆＃34;的事实。他们不必被命名为同一件事。

vue组件和app中`el`和`template`有什么区别？

1 个答案: