无法在JSFiddle中创建自定义Vue组件

Question

在我的JSFiddle示例中，我试图定义一个自定义Vue组件：https://jsfiddle.net/50wL7mdz/402951/。

不幸的是，没有渲染任何东西。为什么？

代码：

HTML：

<script src="https://unpkg.com/vue"></script>
<blog-post title="hi again!"></blog-post>

JS：

Vue.component('blog-post', {
    props: ['title'],
    template: '<h3>{{ title }}</h3>'
})

Answer 1

您忘记创建Vue。将<blogpost>组件包装到div中，然后以该div为模板创建Vue。

喜欢

HTML：

<script src="https://unpkg.com/vue"></script>
<div id="app"> 
    <blog-post title="hi again!"></blog-post>
</div>

JS

Vue.component('blog-post', {
    props: ['title'],
    template: '<h3>{{ title }}</h3>'
})

// create a new Vue instance and mount it to our div element above with the id of app
var vm = new Vue({
    el: '#app'
});

查看文档documentation

这里是working fiddle

Answer 2

我的朋友我建议您使用我更喜欢的另一种选择。如果需要，请使用沙箱，在其中可以轻松添加或修改组件。

这里是sandbox link。