超簡單的VUE在線調試網站（不需搭建環境）
阿新 • • 發佈：2017-10-21
http html編輯器 手工 html todo src 2.0 .com 直觀
jsbin.com提供簡單、直觀、易用的vue調試功能，最大的好處不需要自己搭建環境就可以學習VUE
1、打開http://jsbin.com/joxinumota/edit?html,js,console,output
2、點擊“Add library”，直接鍵入vue，選擇vue2.0.3，Html編輯器的<body>區域會自動加入<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.3/vue.js"></script>
3、緊跟其後輸入（手工輸入或黏貼）：
<div id="app-4">
<ol>
<li v-for="todo in todos">
{{ todo.text }}
</li>
</ol>
</div>
4、在JavaScript編輯器中輸入：
var app4 = new Vue({
el: ‘#app-4‘,
data: {
todos: [
{ text: ‘學習 JavaScript‘ },
{ text: ‘學習 Vue‘ },
{ text: ‘整個牛項目‘ }
]
}
})
5、output顯示：
學習 JavaScript
學習 Vue
整個牛項目
6、在console編輯器中，輸入：
app4.todos.push({ text: ‘新項目‘ })
回車，就可以看到output顯示增加了一條新的記錄：“新項目”
超簡單的VUE在線調試網站（不需搭建環境）