Vue官网componen组件不生效

Vue官网componen组件不生效

依照Vue官网中的componen用法，测试并不生效

<ol>
    <!-- 创建一个 todo-item 组件的实例 -->
    <todo-item></todo-item>
</ol>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    Vue.component('todo-item', {
        template: '<li>这是个待办项</li>'
    })
</script>

官网这样写不生效的原因是：因为你还没有一个vue实例对象，也就是主模板，也没有挂载到文档中。因为没有新建Vue对象，浏览器并不会自动识别Vue对象里有的方法，所以要new一个。

<div id="test">
    <ol>
        <!-- 创建一个 todo-item 组件的实例 -->
        <todo-item></todo-item>
    </ol>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    Vue.component('todo-item', {
        template: '<li>这是个待办项</li>'
    })
    var test = new Vue({
        el: "#test"
    })
</script>

转载: 原博客地址.