以前我們用Jquery進行dom的操作，雖然熟悉后開發效率很高，但是如果多個控件的相互操作多的情況下，還是會亂。相比之下，Vue的使用更加清晰，通過虛擬dom將數據綁定，而且組件化和路由的幫助下，讓整個網頁符合SPA（Single Page Application）的潮流趨勢。如果你懂的Angular.js，那么Vue.js就是囊中之物。

<div id="app"><p>{{ message }}</p> <input v-model="message"> </div> new Vue({el: '#app',data: {message: 'Hello Vue.js!'} })

{{}}是一個標識符，將message將Javascript中Vue中數據的message綁定，它的初始值為Hello Vue.js!。當然，所有的操作要在id為app的作用域之中。

數據輸入方面則是將input的數據模型通過v-model進行綁定。這樣，當你在文本框輸入文字時，對應的<p>的內容也會隨之改變，效果參考。這些功能如果用Jquery實現則是非常繁瑣。我必定會對很多id進行設置。

除此以外，還可以像angular那樣進行循環渲染。通過v-for把數組數據進行循環顯示，效果參考。

<div id="app"><ul> <li v-for="todo in todos"> {{ todo.text }} </li> </ul> </div> new Vue({el: '#app',data: {todos: [{ text: 'Learn JavaScript' },{ text: 'Learn Vue.js' },{ text: 'Build Something Awesome' } ] } })

當然method也可以進行綁定，通過v-on:click把Vue中的method綁定。

參考

• vue文檔
• vue-loader

學習之路 <尤雨溪>

1. 扎實的 JavaScript / HTML / CSS 基本功。這是前置條件。

2. 通讀官方教程 (guide) 的基礎篇。不要用任何構建工具，就只用最簡單的 <script>，把教程里的例子模仿一遍，理解用法。不推薦上來就直接用 vue-cli 構建項目，尤其是如果沒有 Node/Webpack 基礎。

3. 照著官網上的示例，自己想一些類似的例子，模仿著實現來練手，加深理解。

4. 閱讀官方教程進階篇的前半部分，到『自定義指令 (Custom Directive) 』為止。著重理解 Vue 的響應式機制和組件生命周期。『渲染函數（Render Function)』如果理解吃力可以先跳過。

5. 閱讀教程里關于路由和狀態管理的章節，然后根據需要學習 vue-router 和 vuex。同樣的，先不要管構建工具，以跟著文檔里的例子理解用法為主。
6. 走完基礎文檔后，如果你對于基于 Node 的前端工程化不熟悉，就需要補課了。下面這些嚴格來說并不是 Vue 本身的內容，也不涵蓋所有的前端工程化知識，但對于大型的 Vue 工程是前置條件，也是合格的『前端工程師』應當具備的知識。

前端生態/工程化

1. 了解 JavaScript 背后的規范，ECMAScript 的歷史和目前的規范制定方式。學習 ES2015/16 的新特性，理解 ES2015 modules，適當關注還未成為標準的提案。

2. 學習命令行的使用。建議用 Mac。

3. 學習 Node.js 基礎。建議使用?nvm?這樣的工具來管理機器上的 Node 版本，并且將 npm 的 registry 注冊表配置為淘寶的鏡像源。至少要了解 npm 的常用命令，npm scripts 如何使用，語義化版本號規則，CommonJS 模塊規范（了解它和 ES2015 Modules 的異同），Node 包的解析規則，以及 Node 的常用 API。應當做到可以自己寫一些基本的命令行程序。注意最新版本的 Node (6+) 已經支持絕大部分 ES2015 的特性，可以借此鞏固 ES2015。

4. 了解如何使用 / 配置 Babel 來將 ES2015 編譯到 ES5 用于瀏覽器環境。

5. 學習 Webpack。Webpack 是一個極其強大同時也復雜的工具，作為起步，理解它的『一切皆模塊』的思想，并基本了解其常用配置選項和 loader 的概念/使用方法即可，比如如何搭配 Webpack 使用 Babel。學習 Webpack 的一個挑戰在于其本身文檔的混亂，建議多搜索搜索，應該還是有質量不錯的第三方教程的。英文好的建議閱讀?Webpack 2.0 的文檔，比起 1.0 有極大的改善，但需要注意和 1.0 的不兼容之處。

Vue 進階

1. 有了 Node 和 Webpack 的基礎，可以通過 vue-cli 來搭建基于 Webpack ，并且支持單文件組件的項目了。建議用 webpack-simple 這個模板開始，并閱讀官方教程進階篇剩余的內容以及?vue-loader 的文檔，了解一些進階配置。有興趣的可以自己親手從零開始搭一個項目加深理解。

2. 根據?例子?嘗試在 Webpack 模板基礎上整合 vue-router 和 vuex
3. 深入理解 Virtual DOM 和『渲染函數 (Render Functions)』這一章節（可選擇性使用 JSX)，理解模板和渲染函數之間的對應關系，了解其使用方法和適用場景。

4. （可選）根據需求，了解服務端渲染的使用（需要配合 Node 服務器開發的知識）。其實更重要的是理解它所解決的問題并搞清楚你是否需要它。
5. 閱讀開源的 Vue 應用、組件、插件源碼，自己嘗試編寫開源的 Vue 組件、插件。

6. 參考?貢獻指南?閱讀 Vue 的源碼，理解內部實現細節。（需要了解?Flow）

7. 參與 Vue GitHub issue 的定位 -> 貢獻 PR -> 加入核心團隊 -> 升任 CTO -> 迎娶白富美.

轉載于:https://www.cnblogs.com/fakeCoder/p/6062855.html

總結

以上是生活随笔為你收集整理的Vue.js 整理笔记的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。