JSFiddle是一款可在線編輯HTML、CSS和Javascript的網站，而Vue.js是當前最流行的JavaScript框架之一。那么，如何在JSFiddle上引入Vue.js并開始創建Vue組件呢？下面讓我們介紹一下如何在JSFiddle上實現一個基本的Vue.js“Hello, Vue！”程序。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Hello Vue</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
{{ message }}
</div>
</body>
<script>
var app = new Vue({
el: '#app',
data: {
message: 'Hello, Vue!'
}
})
</script>
</html>在上面的代碼中，我們通過以下步驟創建了一個簡單的Vue.js組件來打印“Hello, Vue！”:
1. 引入Vue.js庫：在head標簽中引用Vue.js，這里我們使用CDN來引用Vue.js庫。請注意，如果您需要使用不同版本的Vue.js，可以使用相應的CDN鏈接來加載不同的版本。
2. 定義Vue組件：在body標簽內使用先前定義的Vue電子書將組件與要管理的DOM元素連接在一起。在這里，我們用div標記創建了一個DOM元素，并將其id設置為“app”。然后，我們在Vue實例中定義了數據屬性“message”，其值為“Hello, Vue!”。這里，我們使用Vue的數據雙向綁定語法{{message}}將數據綁定到DOM元素中，這樣將顯示“Hello, Vue！”。
3. 初始化Vue.js：定義應該接受Vue.js管理的DOM元素后，啟動Vue.js實例，將Vue.js和“app”DOM元素連接起來。
最后，執行代碼并在JSFiddle上運行，就可以看到Vue.js組件在頁面上成功輸出“Hello, Vue！”了。