Vue自定义组件不显示

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

想养一只雪狐

4081人浏览 · 2020-01-11 10:42:41

想养一只雪狐 · 2020-01-11 10:42:41 发布

问题：

从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>

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^