Vue自定义组件不显示

最新推荐文章于 2023-12-23 23:40:53 发布

想养一只雪狐

最新推荐文章于 2023-12-23 23:40:53 发布

阅读量4k

点赞数

分类专栏：其他文章标签： javascript vue.js

本文链接：https://blog.csdn.net/kswkly/article/details/103934019

版权

其他专栏收录该内容

16 篇文章 1 订阅

订阅专栏

问题：

从Vue官网教程找copy的例子，但发现浏览器中却不显示，代码如下：

<html>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<a-test post-title="hello!"></a-test>

<!--自定义组件-->
<script>
    Vue.component('a-test', {
        props: ['postTitle'],
        template: '<h3>{{ postTitle }}</h3>'
    });
</script>

</html>

原因:

之所以不显示是因为我们没有Vue的实例对象，所以浏览器不会识别Vue对象里面的方法，想要让他显示就必须new一个Vue对象，如下：

解决方法：

<html>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<div id='app1'>
    <a-test post-title="hello!"></a-test>
</div>

<!--自定义组件-->
<script>
    Vue.component('a-test', {
        props: ['postTitle'],
        template: '<h3>{{ postTitle }}</h3>'
    });
    new Vue({
        el: '#app1',
    });
</script>
</html>

想养一只雪狐

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue自定义组件不显示

问题：从Vue官网教程找copy的例子，但发现浏览器中却不显示，代码如下：<html><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><a-test post-title="hello!"></a-test><!--自定义组件--&...
复制链接

扫一扫