Vue.js 入門

知識 07-05

什麼是 Vue.js？

Vue.js 是用於構建互動式的 Web 界面的庫。

Vue.js 提供了 MVVM 數據綁定和一個可組合的組件系統，具有簡單、靈活的 API。

Vue.js 入門

本章節是關於 Vue1.x 版本的內容，如需查看 Vue2.x，可點以下鏈接。

Vue.js2.0 教程：http://www.runoob.com/vue2/vue-tutorial.html
Vue2.0 新手入門：http://www.runoob.com/w3cnote/vue2-start-coding.html

Vue.js 特點

簡潔：
HTML 模板 + JSON 數據，再創建一個 Vue 實例，就這麼簡單。
數據驅動：
自動追蹤依賴的模板表達式和計算屬性。
組件化：
用解耦、可復用的組件來構造界面。
輕量：
~24kb min+gzip，無依賴。
快速：
精確有效的非同步批量 DOM 更新。
模塊友好：
通過 NPM 或 Bower 安裝，無縫融入你的工作流。

如果你喜歡下面這些，那你一定會喜歡 Vue.js：

可擴展的數據綁定機制
原生對象即模型
簡潔明了的 API
組件化 UI 構建
多個輕量庫搭配使用

Vue.js 安裝

獨立版本

直接下載並用 <script> 標籤引入，Vue 會被註冊為一個全局變數。

Vue.js 官網下載地址：http://vuejs.org/guide/installation.html

我們可以在官網上直接下載生產版本應用在我們項目中。

Vue.js 入門

或者可以使用本站的靜態資源 CDN 庫(1.0.11版本)：

http://static.runoob.com/assets/vue/1.0.11/vue.min.js

NPM 安裝

在用 Vue.js 構建大型應用時推薦使用 NPM 安裝:

# 最新穩定版本
$ npm install vue
# 最新穩定 CSP 兼容版本
$ npm install vue@csp
# 開發版本（直接從 GitHub 安裝）
$ npm install vuejs/vue#dev

Bower 安裝

# 最新穩定版本
$ bower install vue

創建第一個 Vue 應用

接下來我們創建第一個 Vue 應用。

View 層 - HTML 代碼如下：

<div id="app">
{{ message }}
</div>

Model 層 - JavaScript 代碼如下(需放在指定的HTML元素之後)：

new Vue({
el:"#app",
data: {
message:"Hello World!"
}
});

嘗試一下 ?

雙向數據綁定

接下來我們創建一個 view 層 HTML 文件：vueapp.htm，以及 model 層文件：vueapp.js，然後通過 vue.js（使用v-model這個指令）完成中間的底層邏輯，實現綁定的效果。改變其中的任何一層，另外一層都會改變。

Vue.js 入門

vueapp.htm 文件代碼：

<div id="app">
<p>{{ message }}</p>
<input v-model="message">
</div>

vueapp.js 文件代碼：

new Vue({
el: "#app",
data: {
message: "菜鳥教程!"
}
})

嘗試一下 ?

以上實例中 {{message}} 會根據輸入框 input 的改變而改變，如果你不想讓其變化可以修改為：

同時還支持一些簡單的表達式：

{{ message + "官網地址：www.runoob.com" }}

{{ message.split("").reverse().join("") }}

嘗試一下 ?

列表輸出

列表輸出使用 v-for(v-for取代了1.0以前版本中的v-repeat) 這個指令就能完成:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鳥教程(runoob.com)</title>
<script src="http://static.runoob.com/assets/vue/1.0.11/vue.min.js"></script>
</head>
<body>
<div id="app">
<ul>
<li v-for="todo in todos">
{{ todo.text }}
</li>
</ul>
</div>
<script>
new Vue({
el: "#app",
data: {
todos: [
{ text: "Learn JavaScript" },
{ text: "Learn Vue.js" },
{ text: "Build Something Awesome" }
]
}
})
</script>
</body>
</html>

嘗試一下 ?

多維數組實例

<div id="app">
<ul id="example-2">
<li v-for="item in items">
{{ parentMessage }} - {{ $index }} - {{ item.message }}
</li>
</ul>
</div>
<script>
var example2 = new Vue({
el: "#example-2",
data: {
parentMessage: "菜鳥教程官網",
items: [
{ message: "www.runoob.com" },
{ message: "www.runoob.com" }
]
}
})
</script>