Why email validation in Vue for input doesn't work if id div is removed
我是Vue.js的新手,我想在此Codepen中学习(不是我的),为什么如果我们删除id = " app "的div却无法呈现电子邮件验证程序输入字段。
1 2
| <span class="input-group-addon" id="basic-addon1"><span class="fa fa-envelope"></span></span>
<input type="email" class="form-control" placeholder="Email Address" v-model="email" /> |
我想在我的单个文件组件(即(.vue))中起诉此电子邮件验证程序输入字段,如果我添加属性el: '#app'仍然无法在控制台中找到元素应用程序。即使我将div保留为id="app"
我尝试过:
1 2
| <span class="input-group-addon" id="basic-addon1"><span class="fa fa-envelope"></span></span>
<input type="email" class="form-control" placeholder="Email Address" v-model="email" /> |
使其适合我的单个文件组件,但不起作用!
- 我有点困惑,也许更多的是语言上的障碍-但是Codepen似乎工作正常。什么没有按预期工作?如果删除div#app元素,则该应用无处挂载-是您的问题吗?
-
好吧,codepen不是我的,我正在尝试学习..
-
请在这里重现您的问题codeandbox.io/s/vue
这是因为Vue不知道在哪里安装。
在脚本中看到new Vue({ el: '#app'?如果要更改ID,请同时更改div ID和el值。如果将其删除,则需要找到另一种安装方式。
- 在我的单个文件组件中,在添加数据el:"tapp"并设置 but in console I got error saying cannot find element ‘tapp’
-
if you set the id="tapp"之前的.vue文件,然后需要将el:"tapp"更改为-> el:"#tapp"
-
另外,如果您使用的是.vue sfc,则不要这样做。您依赖于定义组件并在已安装的应用程序(通常是main.js)中使用它们。您无法在Codepen中重现此设置。如果您仍然遇到问题,则需要澄清问题,创建新文档或花一些时间阅读vue文档,它们是我在前端js上见过的最好的文档。
-
谢谢@Daniel,我从示例教程中获得了一些帮助,以快速理解:所以我制作了这个vue组件:frontstuff.io/build-your-first-vue-js-component,但是在main.js中,作者指定el:"#app"而不在Rating.vue中使用,这如何工作?
-
她使用components: { Rating }和import Rating from './components/Rating',这样就可以在模板中使用该组件:template: '<Rating/>'
-
因此,在那种情况下'el:"#app"`并没有被使用,但是我尝试将此"app"重命名为其他名称,即使在我没有看到任何组件的情况下,控制台元素应用程序也找不到错误!
-
它正在被使用,请参见主js中的el: '#app',