VUE组件(和应用程序本身)有一个el:和一个template.
我想了解区别是什么,我什么时候使用一个,另一个是什么时候:
如果我从最小的VUE-OnsenUI模板创建一个使用Monaca CLI的项目,我看到:
new Vue({
el: '#app',
template: '<app></app>',
components: { App }
});
从缺乏示例的非常详细的文档中,长话短说,我认为templatedom元素及其中的所有内容都将取代eldom元素.(模板只能有一个根,对吧？).例如:如果我的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>
那么带有id的div bla将被替换replacing-html为内部的span元素template.(模板标签本身包含其中的所有内容仍将保留在发出的html中.正确吗？)
所以我需要了解:
template内容是否取代了el元素？template只有一个根元素直接在它下面吗？template包含所有内容的标记是否仍保留在发出的html中？el与模板相同的情况会发生什么:"app".这不是递归吗？什么是替换和什么？tha*_*ksd 13
为Vue实例提供要挂载的现有DOM元素.它可以是CSS选择器字符串或实际的HTMLElement.
安装实例后,解析的元素将可以作为vm.$ el访问.
如果此选项在实例化时可用,则实例将立即进入编译; 否则,用户必须显式调用vm.$ mount()来手动启动编译.
一个字符串模板,用作Vue实例的标记.该模板将替换已安装的元素.除非模板中存在内容分发槽,否则将忽略已安装元素内的任何现有标记.
如果字符串以#开头,则它将用作querySelector并使用所选元素的innerHTML作为模板字符串.这允许使用常见技巧来包含模板.
在您的示例中,您定义的Vue实例是注册app组件,然后在其模板定义中使用它.它还在寻找DOM中的现有元素,其id app在安装时用作相关元素.
我认为你的困惑来自两者都使用名为"app"的东西.它们不必被命名为同一个东西.
| 归档时间： |
|
| 查看次数： |
11162 次 |
| 最近记录： |