sea是一個JavaScript模塊載入器，在前端開發中非常常用。引入Vue也是很容易的事情。
//引入sea
在引入Vue之前，需要先引入sea，使用seajs.config()來設置基本配置，這個配置包含了模塊的基本說明和別名。這樣引入Vue后，代碼會變得更加簡潔易懂。
接下來我們就可以使用Vue.js來寫一個最簡單的組件——Hello Vue！
//定義一個Vue實例，指定放置在id為app的div中
var vm = new Vue({
el: "#app",
data: {
message: "Hello Vue!"
}
})在最簡單的示例中，Vue實例有兩個重要的屬性：el和data。其中，el是需要指定一個HTML元素作為Vue.js的掛載點，data包含了一系列需要綁定的數據。
在完成Vue的引入后，我們還需要了解如何在項目中使用Vue。下面是一個完整的HTML文件，它將展示如何使用Vue來完成一個簡單的TodoList功能。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>TodoList</title>
<script src="path/sea.js"></script>
<script>
seajs.config({
base: "./",
alias: {
"vue": "./path/vue.min.js"
}
});
var todoList = new Vue({
el: "#list",
data: {
newTodo: "",
todos: [{
content: "Todo1",
done: false
}, {
content: "Todo2",
done: true
}]
},
methods: {
addTodo: function() {
var newContent = this.newTodo.trim();
if (newContent) {
this.todos.push({
content: newContent,
done: false
});
this.newTodo = "";
}
}
}
})
</script>
</head>
<body>
<div id="list">
<ul>
<li v-for="todo in todos" v-bind:class="{ 'done': todo.done }">{{ todo.content }}</li>
</ul>
<input type="text" v-model="newTodo" v-on:keyup.enter="addTodo">
</div>
</body>
</html>以上代碼中，我們使用了Vue的基本語法，包括指令v-model、v-for、v-bind等等。通過這個極簡的TodoList示例，我們了解了Vue.js如何使用。
下一篇vue不能慢動作