Vue中出现Can‘t find element错误的解决方法
最近刚自学了Vue,想动手试一试
项目结构如下
test.Vue和vue.config.js是自己添加的文件,其余都是新建项目时就有的。
test.Vue一开始如下:
<template>
<div id="example">
<p>Original message: "{{ message }}"</p>
</div>
</template>
<script>
import Vue from 'vue';
new Vue({
el: '#example',
data: {
message: 'Hello'
}
})
export default {
name: "test",
}
</script>
<style scoped>
</style>
然后app.Vue如下
<template>
<div id="app">
<img alt="Vue logo" src="./assets/logo.png">
<HelloWorld msg="Welcome to Your Vue.js App"/>
<test></test>
</div>
</template>
<script>
import HelloWorld from "./components/HelloWorld.vue"
import test from './components/test.vue'
export default {
name: 'App',
components: {
HelloWorld,
test
}
}
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
运行之后,浏览器报错Can't find element #example
但我test.Vue里明明el:"#example"绑定了,
后来在网上找了很久也没有答案,就去github上搜寻了相关代码,然后将test.vue改成下面
<template>
<div id="example">
<p>Original message: "{{ message }}"</p>
</div>
</template>
<script>
// import Vue from 'vue';
//
// new Vue({
// el: '#example',
// data: {
// message: 'Hello'
// }
// })
export default {
name: "test",
data(){
return{
message: 'Hello'
}
}
}
</script>
<style scoped>
</style>
再运行就成功了。这里我就不明白了,明明官方文档都是用new Vue({ })来创建实例的(也可能是我还没学完的原因),后来就去搜寻了new Vue({ })和export default{}的区别:
1、new vue({}) 只在入口文件 main.js里使用,而其余组件的里的属性和方法的使用,都要放在export default{}中。
2、export default 的是一个对象 Object,然后父组件通过 components 属性注册,其实是内部调用了 Vue.extend 方法,把这个 Object 传入,然后得到的也是一个 Vue 的实例(即还是用到了new Vue({ }),但多了一些功能),用 Vue.extend 而不是直接用new Vue,因为他们要建立父子关系,形成一个 Vue 的组件树。
3、data()中return的变量和方法只限于当前组件使用,起到了变量隔离的一种效果。
又看到有人说这两者没有什么联系
前者是ES6的module中的语法,后者是创建一个vue实例,
引起误解是因为你用了Webpack开发Vue同时用了vue-loader.
其实这最终会通过vue-loader处理成原生js代码.即无论如何都要new Vue({ })
后来又深入研究了一下,new Vue({ })只有根组件才这么创建,根组件即App.vue中的app,然后在main.js中如此创建。
(类似微信小程序中里的APP?)
更多推荐
所有评论(0)