【问题标题】：Can't create custom Vue component in JSFiddle无法在 JSFiddle 中创建自定义 Vue 组件
【发布时间】：2018-06-25 11:38:29
【问题描述】：

在我的 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>'
})

【问题讨论】：

标签： javascript html vue.js

【解决方案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

【讨论】：

【解决方案2】：

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

这里是sandbox link。

【讨论】：