介紹 · VueJS官方離線文檔(搬運版)

## Vue.js 是什么 Vue (讀音 /vju?/，類似于 **view**) 是一套用于構建用戶界面的**漸進式框架**。與其它大型框架不同的是，Vue 被設計為可以自底向上逐層應用。Vue 的核心庫只關注視圖層，不僅易于上手，還便于與第三方庫或既有項目整合。另一方面，當與[現代化的工具鏈](single-file-components.html)以及各種[支持類庫](https://github.com/vuejs/awesome-vue#libraries--plugins)結合使用時，Vue 也完全能夠為復雜的單頁應用提供驅動。如果你想在深入學習 Vue 之前對它有更多了解，我們[制作了一個視頻](http://player.youku.com/embed/XMzMwMTYyODMyNA==?autoplay=true&client_id=37ae6144009e277d)，帶您了解其核心概念和一個示例工程。如果你已經是有經驗的前端開發者，想知道 Vue 與其它庫/框架有哪些區別，請查看[對比其它框架](818133)。 ## 起步 <p class="tip">官方指南假設你已了解關于 HTML、CSS 和 JavaScript 的中級知識。如果你剛開始學習前端開發，將框架作為你的第一步可能不是最好的主意——掌握好基礎知識再來吧！之前有其它框架的使用經驗會有幫助，但這不是必需的。</p> 嘗試 Vue.js 最簡單的方法是使用 [JSFiddle 上的 Hello World 例子](https://jsfiddle.net/chrisvfritz/50wL7mdz/)。你可以在瀏覽器新標簽頁中打開它，跟著例子學習一些基礎用法。或者你也可以<a href="https://gist.githubusercontent.com/chrisvfritz/7f8d7d63000b48493c336e48b3db3e52/raw/ed60c4e5d5c6fec48b0921edaed0cb60be30e87c/index.html" target="_blank" download="index.html" rel="noopener noreferrer">創建一個 <code>.html</code> 文件<a/>，然后通過如下方式引入 Vue： ``` html  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> ``` 或者： ``` html  <script src="https://cdn.jsdelivr.net/npm/vue"></script> ``` [安裝教程](/guide/installation.html)給出了更多安裝 Vue 的方式。請注意我們**不推薦**新手直接使用 `vue-cli`，尤其是在你還不熟悉基于 Node.js 的構建工具時。如果你喜歡交互式的東西，你也可以查閱[這個 Scrimba 上的系列教程](https://scrimba.com/playlist/pXKqta)，它揉合了錄屏和代碼試驗田，并允許你隨時暫停和播放。 ## 聲明式渲染 <div class="scrimba"><a href="https://scrimba.com/p/pXKqta/cQ3QVcr" target="_blank" rel="noopener noreferrer">在 Scrimba 上嘗試這節課</a></div> Vue.js 的核心是一個允許采用簡潔的模板語法來聲明式地將數據渲染進 DOM 的系統： ``` html <div id="app"> {{ message }} </div> ``` ``` js var app = new Vue({ el: '#app', data: { message: 'Hello Vue!' } }) ``` {% raw %} <div id="app" class="demo"> {{ message }} </div> <script> var app = new Vue({ el: '#app', data: { message: 'Hello Vue!' } }) </script> {% endraw %} 我們已經成功創建了第一個 Vue 應用！看起來這跟渲染一個字符串模板非常類似，但是 Vue 在背后做了大量工作。現在數據和 DOM 已經被建立了關聯，所有東西都是**響應式的**。我們要怎么確認呢？打開你的瀏覽器的 JavaScript 控制臺 (就在這個頁面打開)，并修改 `app.message` 的值，你將看到上例相應地更新。除了文本插值，我們還可以像這樣來綁定元素特性： ``` html <div id="app-2"> <span v-bind:title="message"> 鼠標懸停幾秒鐘查看此處動態綁定的提示信息！ </span> </div> ``` ``` js var app2 = new Vue({ el: '#app-2', data: { message: '頁面加載于 ' + new Date().toLocaleString() } }) ``` {% raw %} <div id="app-2" class="demo"> <span v-bind:title="message"> 鼠標懸停幾秒鐘查看此處動態綁定的提示信息！ </span> </div> <script> var app2 = new Vue({ el: '#app-2', data: { message: '頁面加載于 ' + new Date().toLocaleString() } }) </script> {% endraw %} 這里我們遇到了一點新東西。你看到的 `v-bind` 特性被稱為**指令**。指令帶有前綴 `v-`，以表示它們是 Vue 提供的特殊特性。可能你已經猜到了，它們會在渲染的 DOM 上應用特殊的響應式行為。在這里，該指令的意思是：“將這個元素節點的 `title` 特性和 Vue 實例的 `message` 屬性保持一致”。如果你再次打開瀏覽器的 JavaScript 控制臺，輸入 `app2.message = '新消息'`，就會再一次看到這個綁定了 `title` 特性的 HTML 已經進行了更新。 ## 條件與循環 <div class="scrimba"><a href="https://scrimba.com/p/pXKqta/cEQe4SJ" target="_blank" rel="noopener noreferrer">在 Scrimba 上嘗試這節課</a></div> 控制切換一個元素是否顯示也相當簡單： ``` html <div id="app-3"> <p v-if="seen">現在你看到我了</p> </div> ``` ``` js var app3 = new Vue({ el: '#app-3', data: { seen: true } }) ``` {% raw %} <div id="app-3" class="demo"> <span v-if="seen">現在你看到我了</span> </div> <script> var app3 = new Vue({ el: '#app-3', data: { seen: true } }) </script> {% endraw %} 繼續在控制臺輸入 `app3.seen = false`，你會發現之前顯示的消息消失了。這個例子演示了我們不僅可以把數據綁定到 DOM 文本或特性，還可以綁定到 DOM **結構**。此外，Vue 也提供一個強大的過渡效果系統，可以在 Vue 插入/更新/移除元素時自動應用[過渡效果](transitions.html)。還有其它很多指令，每個都有特殊的功能。例如，`v-for` 指令可以綁定數組的數據來渲染一個項目列表： ``` html <div id="app-4"> <ol> <li v-for="todo in todos"> {{ todo.text }} </li> </ol> </div> ``` ``` js var app4 = new Vue({ el: '#app-4', data: { todos: [ { text: '學習 JavaScript' }, { text: '學習 Vue' }, { text: '整個牛項目' } ] } }) ``` {% raw %} <div id="app-4" class="demo"> <ol> <li v-for="todo in todos"> {{ todo.text }} </li> </ol> </div> <script> var app4 = new Vue({ el: '#app-4', data: { todos: [ { text: '學習 JavaScript' }, { text: '學習 Vue' }, { text: '整個牛項目' } ] } }) </script> {% endraw %} 在控制臺里，輸入 `app4.todos.push({ text: '新項目' })`，你會發現列表最后添加了一個新項目。 ## 處理用戶輸入 <div class="scrimba"><a href="https://scrimba.com/p/pXKqta/czPNaUr" target="_blank" rel="noopener noreferrer">在 Scrimba 上嘗試這節課</a></div> 為了讓用戶和你的應用進行交互，我們可以用 `v-on` 指令添加一個事件監聽器，通過它調用在 Vue 實例中定義的方法： ``` html <div id="app-5"> <p>{{ message }}</p> <button v-on:click="reverseMessage">逆轉消息</button> </div> ``` ``` js var app5 = new Vue({ el: '#app-5', data: { message: 'Hello Vue.js!' }, methods: { reverseMessage: function () { this.message = this.message.split('').reverse().join('') } } }) ``` {% raw %} <div id="app-5" class="demo"> <p>{{ message }}</p> <button v-on:click="reverseMessage">逆轉消息</button> </div> <script> var app5 = new Vue({ el: '#app-5', data: { message: 'Hello Vue.js!' }, methods: { reverseMessage: function () { this.message = this.message.split('').reverse().join('') } } }) </script> {% endraw %} 注意在 `reverseMessage` 方法中，我們更新了應用的狀態，但沒有觸碰 DOM——所有的 DOM 操作都由 Vue 來處理，你編寫的代碼只需要關注邏輯層面即可。 Vue 還提供了 `v-model` 指令，它能輕松實現表單輸入和應用狀態之間的雙向綁定。 ``` html <div id="app-6"> <p>{{ message }}</p> <input v-model="message"> </div> ``` ``` js var app6 = new Vue({ el: '#app-6', data: { message: 'Hello Vue!' } }) ``` {% raw %} <div id="app-6" class="demo"> <p>{{ message }}</p> <input v-model="message"> </div> <script> var app6 = new Vue({ el: '#app-6', data: { message: 'Hello Vue!' } }) </script> {% endraw %} ## 組件化應用構建 <div class="scrimba"><a href="https://scrimba.com/p/pXKqta/cEQVkA3" target="_blank" rel="noopener noreferrer">在 Scrimba 上嘗試這節課</a></div> 組件系統是 Vue 的另一個重要概念，因為它是一種抽象，允許我們使用小型、獨立和通常可復用的組件構建大型應用。仔細想想，幾乎任意類型的應用界面都可以抽象為一個組件樹： ![Component Tree](/images/components.png) 在 Vue 里，一個組件本質上是一個擁有預定義選項的一個 Vue 實例。在 Vue 中注冊組件很簡單： ``` js // 定義名為 todo-item 的新組件 Vue.component('todo-item', { template: '<li>這是個待辦項</li>' }) ``` 現在你可以用它構建另一個組件模板： ``` html <ol>  <todo-item></todo-item> </ol> ``` 但是這樣會為每個待辦項渲染同樣的文本，這看起來并不炫酷。我們應該能從父作用域將數據傳到子組件才對。讓我們來修改一下組件的定義，使之能夠接受一個 [prop](components.html#Props)： ``` js Vue.component('todo-item', { // todo-item 組件現在接受一個 // "prop"，類似于一個自定義特性。 // 這個 prop 名為 todo。 props: ['todo'], template: '<li>{{ todo.text }}</li>' }) ``` 現在，我們可以使用 `v-bind` 指令將待辦項傳到循環輸出的每個組件中： ``` html <div id="app-7"> <ol>  <todo-item v-for="item in groceryList" v-bind:todo="item" v-bind:key="item.id"> </todo-item> </ol> </div> ``` ``` js Vue.component('todo-item', { props: ['todo'], template: '<li>{{ todo.text }}</li>' }) var app7 = new Vue({ el: '#app-7', data: { groceryList: [ { id: 0, text: '蔬菜' }, { id: 1, text: '奶酪' }, { id: 2, text: '隨便其它什么人吃的東西' } ] } }) ``` {% raw %} <div id="app-7" class="demo"> <ol> <todo-item v-for="item in groceryList" v-bind:todo="item" :key="item.id"></todo-item> </ol> </div> <script> Vue.component('todo-item', { props: ['todo'], template: '<li>{{ todo.text }}</li>' }) var app7 = new Vue({ el: '#app-7', data: { groceryList: [ { id: 0, text: '蔬菜' }, { id: 1, text: '奶酪' }, { id: 2, text: '隨便其它什么人吃的東西' } ] } }) </script> {% endraw %} 盡管這只是一個刻意設計的例子，但是我們已經設法將應用分割成了兩個更小的單元。子單元通過 prop 接口與父單元進行了良好的解耦。我們現在可以進一步改進 `<todo-item>` 組件，提供更為復雜的模板和邏輯，而不會影響到父單元。在一個大型應用中，有必要將整個應用程序劃分為組件，以使開發更易管理。在[后續教程](components.html)中我們將詳述組件，不過這里有一個 (假想的) 例子，以展示使用了組件的應用模板是什么樣的： ``` html <div id="app"> <app-nav></app-nav> <app-view> <app-sidebar></app-sidebar> <app-content></app-content> </app-view> </div> ``` ### 與自定義元素的關系你可能已經注意到 Vue 組件非常類似于**自定義元素**——它是 [Web 組件規范](https://www.w3.org/wiki/WebComponents/)的一部分，這是因為 Vue 的組件語法部分參考了該規范。例如 Vue 組件實現了 [Slot API](https://github.com/w3c/webcomponents/blob/gh-pages/proposals/Slots-Proposal.md) 與 `is` 特性。但是，還是有幾個關鍵差別： 1. Web Components 規范已經完成并通過，但未被所有瀏覽器原生實現。目前 Safari 10.1+、Chrome 54+ 和 Firefox 63+ 原生支持 Web Components。相比之下，Vue 組件不需要任何 polyfill，并且在所有支持的瀏覽器 (IE9 及更高版本) 之下表現一致。必要時，Vue 組件也可以包裝于原生自定義元素之內。 2. Vue 組件提供了純自定義元素所不具備的一些重要功能，最突出的是跨組件數據流、自定義事件通信以及構建工具集成。 ## 準備好了嗎？我們剛才簡單介紹了 Vue 核心最基本的功能——本教程的其余部分將涵蓋這些功能以及其它高級功能更詳細的細節，所以請務必讀完整個教程！ <div id="video-modal" class="modal"><div class="video-space" style="padding: 56.25% 0 0 0; position: relative;"></div></div>