Vue自定义组件不显示

问题:

从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>
©️2020 CSDN 皮肤主题: 黑客帝国 设计师:上身试试 返回首页