介紹 · vue2中文文檔

# 介紹 [](https://vuefe.cn/guide/index.html#Vue-js-是什么) ## [](https://vuefe.cn/guide/index.html#Vue-js-是什么)[](https://vuefe.cn/guide/index.html#Vue-js-是什么 "Vue.js 是什么")Vue.js 是什么 Vue.js（讀音 /vju?/, 類似于?view）是一套構建用戶界面的?漸進式框架。與其他重量級框架不同的是，Vue 采用自底向上增量開發的設計。Vue 的核心庫只關注視圖層，并且非常容易學習，非常容易與其它庫或已有項目整合。另一方面，Vue 完全有能力驅動采用[單文件組件](https://vuefe.cn/guide/single-file-components.html)和[Vue生態系統支持的庫](https://github.com/vuejs/awesome-vue#libraries--plugins)開發的復雜單頁應用。 Vue.js 的目標是通過盡可能簡單的 API 實現響應的數據綁定和組合的視圖組件。如果你是有經驗的前端開發者，想知道 Vue.js 與其它庫/框架的區別，查看[對比其它框架](https://vuefe.cn/guide/comparison.html)。 [](https://vuefe.cn/guide/index.html#起步) ## [](https://vuefe.cn/guide/index.html#起步)[](https://vuefe.cn/guide/index.html#起步 "起步")起步嘗試 Vue.js 最簡單的方法是使用?[JSFiddle Hello World 例子](https://jsfiddle.net/chrisvfritz/50wL7mdz/)。請在瀏覽器新標簽頁中打開它，跟著我們查看一些基礎示例。如果你喜歡用包管理器下載/安裝，查看[安裝](https://vuefe.cn/guide/installation.html)教程。 [](https://vuefe.cn/guide/index.html#聲明式渲染) ## [](https://vuefe.cn/guide/index.html#聲明式渲染)[](https://vuefe.cn/guide/index.html#聲明式渲染 "聲明式渲染")聲明式渲染 Vue.js 的核心是一個允許你采用簡潔的模板語法來聲明式的將數據渲染進 DOM 的系統： ~~~ <div id="app"> {{ message }} </div> ~~~ ~~~ var app = new Vue({ el: '#app', data: { message: 'Hello Vue!' } }) ~~~ ```shell Hello Vue! ``` 我們已經生成了我們的第一個 Vue 應用！看起來這跟單單渲染一個字符串模板非常類似，但是 Vue.js 在背后做了大量工作。現在數據和 DOM 已經被綁定在一起，所有的元素都是響應式的。我們如何知道？打開你的瀏覽器的控制臺，并修改?`app.message`，你將看到上例相應地更新。除了綁定插入的文本內容，我們還可以采用這樣的方式綁定 DOM 元素屬性： ~~~ <div id="app-2"> <span v-bind:title="message"> Hover your mouse over me for a few seconds to see my dynamically bound title! </span> </div> ~~~ ~~~ var app2 = new Vue({ el: '#app-2', data: { message: 'You loaded this page on ' + new Date() } }) ~~~ Hover your mouse over me for a few seconds to see my dynamically bound title! 這里我們遇到點新東西。你看到的?`v-bind`?屬性被稱為指令。指令帶有前綴?`v-`，以表示它們是 Vue.js 提供的特殊屬性。可能你已經猜到了，它們會在渲染過的 DOM 上應用特殊的響應式行為。這個指令的簡單含義是說：將這個元素節點的?`title`?屬性和 Vue 實例的?`message`?屬性綁定到一起。你再次打開瀏覽器的控制臺輸入?`app2.message = 'some new message'`，你就會再一次看到這個綁定了`title`屬性的HTML已經進行了更新。 [](https://vuefe.cn/guide/index.html#條件與循環) ## [](https://vuefe.cn/guide/index.html#條件與循環)[](https://vuefe.cn/guide/index.html#條件與循環 "條件與循環")條件與循環控制切換一個元素的顯示也相當簡單： ~~~ <div id="app-3"> <p v-if="seen"> Now you see me </p> </div> ~~~ ~~~ var app3 = new Vue({ el: '#app-3', data: { seen: true } }) ~~~ Now you see me 繼續在控制臺設置?`app3.seen = false`，你會發現 “Now you see me” 消失了。這個例子演示了我們不僅可以綁定 DOM 文本到數據，也可以綁定 DOM?結構到數據。而且，Vue.js 也提供一個強大的過渡效果系統，可以在 Vue 插入/刪除元素時自動應用[過渡效果](https://vuefe.cn/guide/transitions.html)。也有一些其它指令，每個都有特殊的功能。例如，?`v-for`?指令可以綁定數據到數據來渲染一個列表： ~~~ <div id="app-4"> <ol> <li v-for="todo in todos"> {{ todo.text }} </li> </ol> </div> ~~~ ~~~ var app4 = new Vue({ el: '#app-4', data: { todos: [ { text: 'Learn JavaScript' }, { text: 'Learn Vue' }, { text: 'Build something awesome' } ] } }) ~~~ 1. Learn JavaScript 2. Learn Vue 3. Build something awesome 在控制臺里，輸入?`app4.todos.push({ text: 'New item' })`。你會發現列表中多了一欄新內容。 [](https://vuefe.cn/guide/index.html#處理用戶輸入) ## [](https://vuefe.cn/guide/index.html#處理用戶輸入)[](https://vuefe.cn/guide/index.html#處理用戶輸入 "處理用戶輸入")處理用戶輸入為了讓用戶和你的應用進行互動，我們可以用?`v-on`?指令綁定一個監聽事件用于調用我們 Vue 實例中定義的方法： ~~~ <div id="app-5"> <p>{{ message }}</p> <button v-on:click="reverseMessage"> Reverse Message </button> </div> ~~~ ~~~ var app5 = new Vue({ el: '#app-5', data: { message: 'Hello Vue.js!' }, methods: { reverseMessage: function () { this.message = this.message.split('').reverse().join('') } } }) ~~~ Hello Vue.js! Reverse Message 在?`reverseMessage`?方法中，我們在沒有接觸 DOM 的情況下更新了應用的狀態 - 所有的 DOM 操作都由 Vue 來處理，你寫的代碼只需要關注基本邏輯。 Vue 也提供了?`v-model`?指令，它使得在表單輸入和應用狀態中做雙向數據綁定變得非常輕巧。 ~~~ <div id="app-6"> <p>{{ message }}</p> <input v-model="message"> </div> ~~~ ~~~ var app6 = new Vue({ el: '#app-6', data: { message: 'Hello Vue!' } }) ~~~ Hello Vue! [](https://vuefe.cn/guide/index.html#用組件構建（應用）) ## [](https://vuefe.cn/guide/index.html#用組件構建（應用）)[](https://vuefe.cn/guide/index.html#用組件構建（應用） "用組件構建（應用）")用組件構建（應用）組件系統是 Vue.js 另一個重要概念，因為它提供了一種抽象，讓我們可以用獨立可復用的小組件來構建大型應用。如果我們考慮到這點，幾乎任意類型的應用的界面都可以抽象為一個組件樹： ![Component Tree](https://vuefe.cn/images/components.png) 在 Vue 里，一個組件實質上是一個擁有預定義選項的一個 Vue 實例： ~~~ // Define a new component called todo-item Vue.component('todo-item', { template: '<li>This is a todo</li>' }) ~~~ 現在你可以另一個組件模板中寫入它： ~~~ <ul>  <todo-item></todo-item> </ul> ~~~ 但是這樣會為每個 todo 渲染同樣的文本，這看起來并不是很酷。我們應該將數據從父作用域傳到子組件。讓我們來修改一下組件的定義，使得它能夠接受一個?[`prop`](https://vuefe.cn/guide/components.html#Props)?字段： ~~~ Vue.component('todo-item', { // The todo-item component now accepts a // "prop", which is like a custom attribute. // This prop is called todo. props: ['todo'], template: '<li>{{ todo.text }}</li>' }) ~~~ 現在，我們可以使用?`v-bind`?指令將 todo 傳到每一個重復的組件中： ~~~ <div id="app-7"> <ol>  <todo-item v-for="todo in todos" v-bind:todo="todo"></todo-item> </ol></div> ~~~ ~~~ Vue.component('todo-item', { props: ['todo'], template: '<li>{{ todo.text }}</li>' }) var app7 = new Vue({ el: '#app-7', data: { todos: [ { text: 'Learn JavaScript' }, { text: 'Learn Vue' }, { text: 'Build something awesome' } ] } }) ~~~ 1. Learn JavaScript 2. Learn Vue 3. Build something awesome 這只是一個假設的例子，但是我們已經將應用分割成了兩個更小的單元，子元素通過?`props`?接口實現了與父親元素很好的解耦。我們現在可以在不影響到父應用的基礎上，進一步為我們的?`todo`?組件改進更多復雜的模板和邏輯。在一個大型應用中，為了使得開發過程可控，有必要將應用整體分割成一個個的組件。在[后面的教程](https://vuefe.cn/guide/components.html)中我們將詳述組件，不過這里有一個（假想）的例子，看看使用了組件的應用模板是什么樣的： ~~~ <div id="app"> <app-nav></app-nav> <app-view> <app-sidebar></app-sidebar> <app-content></app-content> </app-view> </div> ~~~ [](https://vuefe.cn/guide/index.html#與自定義元素的關系) ## [](https://vuefe.cn/guide/index.html#與自定義元素的關系)[](https://vuefe.cn/guide/index.html#與自定義元素的關系 "與自定義元素的關系")與自定義元素的關系你可能已經注意到 Vue.js 組件非常類似于自定義元素——它是?[Web 組件規范](https://www.w3.org/wiki/WebComponents/)的一部分。實際上 Vue.js 的組件語法參考了該規范。例如 Vue 組件實現了?[Slot API](https://github.com/w3c/webcomponents/blob/gh-pages/proposals/Slots-Proposal.md)?與?`is`?特性。但是，有幾個關鍵的不同： 1. Web 組件規范仍然遠未完成，并且沒有瀏覽器實現。相比之下，Vue.js 組件不需要任何補丁，并且在所有支持的瀏覽器（IE9 及更高版本）之下表現一致。必要時，Vue.js 組件也可以放在原生自定義元素之內。 2. Vue.js 組件提供了原生自定義元素所不具備的一些重要功能，比如組件間的數據流，自定義事件系統，以及動態的、帶特效的組件替換。 [](https://vuefe.cn/guide/index.html#準備好探索更廣闊的世界了？) ## [](https://vuefe.cn/guide/index.html#準備好探索更廣闊的世界了？)[](https://vuefe.cn/guide/index.html#準備好探索更廣闊的世界了？ "準備好探索更廣闊的世界了？")準備好探索更廣闊的世界了？我們剛才簡單介紹了 Vue.js 核心的一些最基本的特征 - 本指南的其余部分將用更詳盡的篇幅去描述其他的一些高級特性，所以一定要閱讀完所有的內容哦！