[英]vue.js component is not showing?
I have created a file EmptyComponent.html to show a Vue.js component (myComponent.vue) both files are in the same folder. 我创建了一个文件EmptyComponent.html来显示Vue.js组件(myComponent.vue),这两个文件都位于同一文件夹中。 my component will not show and I am always getting an error in chrome developer tools console saying "Uncaught SyntaxError: Unexpected identifier EmptyComponent.html:8" 我的组件无法显示,并且在chrome开发人员工具控制台中总是出现错误,提示“未捕获的SyntaxError:意外的标识符EmptyComponent.html:8”
EmptyComponent.html EmptyComponent.html
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.4/vue.min.js"></script>
<div id="app">
<h1> id app div </h1>
<myComponent></myComponent>
</div>
<script>
import myComponent from 'myComponent.vue'
new Vue({
el: '#app',
components: {myComponent}
});
</script>
myComponent.vue myComponent.vue
<template>
<div>
<h1> myComponent div</h1>
</div>
</template>
<script>
export default {
name: 'myComponent'
</script>
<style scoped>
</style>
In order to use single file components .vue
you should use Vue cli 3
, but your component does not contain a complex code you could use CDN and declare your component using Vue.component('my-component',{....})
: 为了使用单个文件组件.vue
您应该使用Vue cli 3
,但是您的组件不包含复杂的代码,您可以使用CDN并使用Vue.component('my-component',{....})
:
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.4/vue.min.js"></script> <div id="app"> <h1> id app div </h1> <my-component></my-component> </div> <script> Vue.component('my-component', { template: ` <div> <h1> myComponent div</h1> </div>` }) new Vue({ el: '#app', }); </script>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.