Vue 學習筆記
?
2016.05.13 13:45*?字數 3279?閱讀 12442評論 17喜歡 216贊賞 1
個人基于對 Vuejs 的學習制作了一個 Todo 單頁應用?Lightodo，功能包括：添加待辦事項卡片，對卡片或待辦事項進行排序或刪除操作脚仔，設置待辦事項定時提醒，登錄注冊等论寨，僅供參考，請勿模仿（代碼亂得無法形容爽茴，捂臉）~
Vue 簡介
vue.js
提醒：Vuejs 如今正處在快速發(fā)展中葬凳，很多資源隨時都有可能過時（outdated），記得查看最新文檔室奏，使用最新資源火焰。
Vue 的官方說明
數據驅動的組件，為現代化的 Web 界面而生胧沫。
Vue.js（讀音 /vju?/, 類似于 view）是一個構建數據驅動的 web 界面的庫昌简。Vue.js 的目標是通過盡可能簡單的 API 實現響應的數據綁定和組合的視圖組件。
Vue.js 自身不是一個全能框架——它只聚焦于視圖層绒怨。因此它非常容易學習纯赎，非常容易與其它庫或已有項目整合。另一方面南蹂，在與相關工具和支持庫一起使用時犬金，Vue.js 也能完美地驅動復雜的單頁應用。
關于 Vue 的作者
是個介于設計師和程序員之間的大牛六剥，設計能力比程序員好晚顷，編程能力比設計師（和普通程序員）好太多！
如今辭了工作疗疟，專心投入到了 Vuejs 的發(fā)展和推廣中该默。
工作信息：
Meteor (2014 - 2016)
地區(qū)：海外 ，美國
職位：Core dev
Google (2012 - 2014)
地區(qū)：海外 秃嗜，美國
職位：Creative Lab
相關信息：
JavaScript Air Episode 016: JavaScript Frameworks: Vue.js
和 Vue.js 框架的作者聊聊前端框架開發(fā)背后的故事 | Teahour.fm
Vue 的基本用法
Vue 相比于 React 和 Angular 容易上手多了权均，因此我對 Vue 的學習主要以文檔為主顿膨，視頻為輔（只有像我這種菜鳥才看視頻教程锅锨，真正的牛人文檔瞄幾眼就會了(-_-#)）。
下載使用（兩種方式）
直接下載并用??標簽引入恋沃，Vue?會被注冊為一個全局變量必搞。
平時對于 Dom 操作比較頻繁的小項目可以直接這樣使用。
Vue.js 提供一個官方命令行工具囊咏，可用于快速搭建大型單頁應用恕洲。該工具提供開箱即用的構建工具配置塔橡，帶來現代化的前端開發(fā)流程。只需一分鐘即可啟動帶熱重載霜第、保存時靜態(tài)檢查以及可用于生產環(huán)境的構建配置的項目：
針對單頁應用的構建推薦使用這種方式葛家，可以更好的體驗到 vue 所提供的組件化功能 （單文件組件），順帶著享受到 webpack 帶來的流暢的自動化開發(fā)體驗泌类。
# 全局安裝 vue-cli$ npm install -g vue-cli# 創(chuàng)建一個基于 "webpack" 模板的新項目$ vue init webpack my-project# 安裝依賴癞谒，走你$ cd my-project$ npm install$ npm run dev
Vue 的使用教程
廢話不多說，大家直接看官方文檔刃榨，已經寫得非常棒了弹砚。
頁面上的搜索功能可以快速幫助你定位到相關文檔說明，非常方便枢希。
針對相關問題的解決方法：
問題：Vue 還未實例化前桌吃， HTML 模板中的 "{{ }}"( Mustache 標簽) 會暴露在用戶界面上，也就是說頁面有那么一瞬間會將所有的 "{{ }}" 都顯示出來苞轿，如何解決茅诱？
解決：
方法一：使用?v-cloak?指令，這個指令保持在元素上直到關聯實例結束編譯搬卒。和 CSS 規(guī)則如?[v-cloak] { display: none }?一起用時让簿，這個指令可以隱藏未編譯的 Mustache 標簽直到實例準備完畢。
[v-cloak]{display: none;}
{{ message }}
方法二：使用?v-text
{{msg}}
問題：新增的 data 數據沒法同步響應到頁面秀睛？
解決：認真閱讀官方文檔里的深入響應式原理尔当。
在實例創(chuàng)建之后添加屬性并且讓它是響應的:
對于 Vue 實例，可以使用 $set(key, value) 實例方法：
vm.$set('b',2)// `vm.b` 和 `data.b` 現在是響應的
對于普通數據對象蹂安，可以使用全局方法 Vue.set(object, key, value)：
Vue.set(data,'c',3)// `vm.c` 和 `data.c` 現在是響應的
注意事項：
注意如果?prop?是一個對象或數組椭迎，是按引用傳遞。在子組件內修改它會影響父組件的狀態(tài)田盈，不管是使用哪種綁定類型
針對同一個元素的后一個 watch 會覆蓋前一個 watch畜号，無論是不是 deep
自定義指令內部可以通過 this.vm.someKey 來訪問到組件的數據
自定義指令名不要有大寫，props 命名也不要有大寫
Vue 的組件化實踐
組件（Component）是 Vue.js 最強大的功能之一允瞧。組件可以擴展 HTML 元素简软，封裝可重用的代碼。在較高層面上述暂，組件是自定義元素痹升，Vue.js 的編譯器為它添加特殊功能。在有些情況下畦韭，組件也可以是原生 HTML 元素的形式疼蛾，以?is?特性擴展。
使用上文提到的官方命令行工具：
目前可供使用的模板包括（模板名-說明）：
webpack?- A full-featured Webpack + vue-loader setup with hot reload, linting, testing & css extraction.（全功能的 Webpack + vue-loader 設置艺配，包括熱加載察郁，靜態(tài)檢測衍慎，測試，css 提绕つ啤）
webpack-simple?- A simple Webpack + vue-loader setup for quick prototyping.（一個簡易的 Webpack + vue-loader 設置稳捆，以便于快速開始）
browserify?- A full-featured Browserify + vueify setup with hot-reload, linting & unit testing.（全功能的 Browserify + vueify 設置，包括熱加載麦轰，靜態(tài)檢測眷柔，單元測試）
browserify-simple?- A simple Browserify + vueify setup for quick prototyping.（一個簡易的 Browserify + vueify 設置，以便于快速開始）
simple?- The simplest possible Vue setup in a single HTML file
相關閱讀：
webpack 基礎入門
webpack?is a?module bundler.
webpack takes modules with dependencies and generates static assets representing those modules.
Webpack 主要特性如下：
同時支持?CommonJS?和?AMD?模塊（對于新項目原朝，推薦直接使用 CommonJS）驯嘱；
串聯式模塊加載器以及插件機制，讓其具有更好的靈活性和擴展性喳坠，例如提供對 CoffeeScript鞠评、ES6 的支持；
可以基于配置或者智能分析打包成多個文件壕鹉，實現公共模塊或者按需加載剃幌；
支持對 CSS，圖片等資源進行打包晾浴，從而無需借助 Grunt 或 Gulp负乡；
開發(fā)時在內存中完成打包，性能更快脊凰，完全可以支持開發(fā)過程的實時打包需求抖棘；
對 sourcemap 有很好的支持，易于調試狸涌。
Webpack 將項目中用到的一切靜態(tài)資源都視之為模塊切省，模塊之間可以互相依賴。Webpack 對它們進行統(tǒng)一的管理以及打包發(fā)布帕胆。
Webpack 一般作為全局的 npm 模塊安裝：
npm install -g webpack
安裝成功后朝捆，在命令行輸入 webpack -h 即可查看當前安裝的版本信息，以及可以使用的指令懒豹。直接執(zhí)行 webpack 命令會默認使用當前目錄的 webpack.config.js 作為配置文件芙盘。如果要指定另外的配置文件，可以執(zhí)行：
webpack—configwebpack.custom.config.js
Webpack 可以通過直接命令行來指定參數：
# 命令 入口文件 生成文件webpackentry.jsbundle.js
但我們通常會將所有相關參數定義在配置文件中脸秽，配置文件通常放在項目根目錄之下儒老，其本身也是一個標準的 CommonJS 模塊。一個最簡單的 Webpack 配置文件 webpack.config.js 如下所示：
module.exports= {? entry:['./app/entry.js'],? output: {? ? path: __dirname +'/assets/',? ? publicPath:"/assets/",? ? filename:'bundle.js'}};
其中 entry 參數定義了打包的入口文件豹储，數組中的所有文件會按順序打包贷盲。每個文件進行依賴的遞歸查找淘这，直到所有相關模塊都被打包剥扣。output 參數定義了輸出文件的位置巩剖，其中常用的參數包括：
path: 打包文件存放的絕對路徑
publicPath: 網站運行時的訪問路徑
filename: 打包后的文件名
Webpack 會分析入口文件，解析包含依賴關系的各個文件钠怯。這些文件（模塊）都打包到?bundle.js（打包后的文件名） 佳魔。Webpack 會給每個模塊分配一個唯一的 id 并通過這個 id 索引和訪問模塊。在頁面啟動時晦炊，會先執(zhí)行?entry.js?中的代碼鞠鲜，其它模塊會在運行依賴引入（require / import）代碼的時候再執(zhí)行。
官網首頁的說明：
// webpack is a module bundler// This means webpack takes modules with dependencies//? and emits static assets representing those modules.// dependencies can be written in CommonJsvarcommonjs =require("./commonjs");// or in AMDdefine(["amd-module","../file"],function(amdModule, file){// while previous constructs are sync// this is asyncrequire(["big-module/big/file"],function(big){// for async dependencies webpack splits//? your application into multiple "chunks".// This part of your application is//? loaded on demand (Code Splitting)varstuff =require("../my/stuff");// "../my/stuff" is also loaded on demand//? because it's in the callback function//? of the AMD require});});require("coffee!./cup.coffee");// "Loaders" can be used to preprocess files.// "Loaders" 可以用來對文件進行預處理// They can be prefixed in the require call// 可以寫在 require 代碼中//? or configured in the configuration.// 也可以在配置文件中進行配置require("./cup");// This does the same when you add ".coffee" to the extensions//? and configure the "coffee" loader for /\.coffee$/functionloadTemplate(name){returnrequire("./templates/"+ name +".jade");// many expressions are supported in require calls// a clever parser extracts information and concludes//? that everything in "./templates" that matches//? /\.jade$/ should be included in the bundle, as it//? can be required.}// ... and you can combine everythingfunctionloadTemplateAsync(name, callback){require(["bundle?lazy!./templates/"+ name +".jade"],function(templateBundle){? ? ? ? templateBundle(callback);? ? });}
更多信息可以參考 webpack 的官方網站断国。
相關閱讀：
以下四篇文章看完并跟著操作就能對 webpack 有個最起碼的理解贤姆，了解其最基本的使用方式。
webpack入坑之旅（三）webpack.config入門
深入淺出React（二）：React開發(fā)神器Webpack
.vue file
以?.vue?為后綴的文件 - 單文件組件
推薦使用?vue-webpack-simple-boilerplate?這個模板來進行 vuejs 的組件化開發(fā)的學習稳衬。
命令行安裝：
# 全局安裝 vue-clinpm install -g vue-cli# 模板名為 webpack-simple（目前官方有 5 個模板可供選擇霞捡，見上文） # 項目名為 my-project （自定義）# 下面命令執(zhí)行后會出現幾個問題，用于配置你的項目信息薄疚，可以一路回車（即采用默認值）vue init webpack-simple my-project# 進入項目目錄cdmy-project# 執(zhí)行模塊的下載安裝碧信，所需模塊的配置信息在 package.json 中npm install# 執(zhí)行 dev 腳本（也在 package.json 中），即項目開發(fā)模式npm run dev# npm run build 執(zhí)行 build 腳本街夭，項目文件打包生成
npm run dev: Webpack +?vue-loader?with proper config for source maps & hot-reload.
npm run build: Production build with HTML/CSS/JS minification.
提醒：要是執(zhí)行命令?npm run dev?后出現錯誤，有可能是 node 版本導致的，請將 node 更新到最新版侥钳，對于 win 用戶來說刹勃，直接官網再下載一個最新版本的安裝包來安裝即可。
接下去每次要對項目進行開發(fā)時埃碱，就到項目根目錄碴卧，右鍵+Shift 鍵，選擇?在此處打開命令窗口乃正，然后執(zhí)行命令?npm run dev住册，即可在?localhost:8080?地址上看到運行的項目，修改代碼并保存后頁面還會自行更新（使用了熱加載技術?webpack-dev-server --inline --hot?）瓮具。
Automatic Refresh
The webpack-dev-server supports multiple modes to automatic refresh the page:
Iframe mode (page is embedded in an iframe and reloaded on change)
Inline mode?(a small webpack-dev-server client entry is added to the bundle which refresh the page on change)
Each mode also supports Hot Module Replacement in which the bundle is notified that a change happened instead of a full page reload. A Hot Module Replacement runtime could then?load the updated modules and inject them into the running app.
相關閱讀：
webpack-dev-server?- a Node.js based server that supports live reloading and is used for development of webpack powered applications.
vue-loader
vue-loader 用于 webpack 中荧飞，用來對以?.vue?（單文件組件）結尾的文件進行處理。
vue-router
vue-router?- 單頁面應用路由
使用 Vue.js 和 vue-router 創(chuàng)建單頁應用非常的簡單名党，使用 Vue.js 開發(fā)叹阔，整個應用已經被拆分成了獨立的組件。在使用 vue-router 時传睹，我們需要做的就是把路由映射到各個組件耳幢，vue-router 會把各個組件渲染到正確的地方。
相關閱讀：
webpack入坑之旅（六）配合 vue-router 實現 SPA
Vuex
閱讀?Vuex 文檔，中文版的過時了睛藻，盡量閱讀英文版的启上。
Vue 2.0
need-to-insert-img
一張腦圖帶你認識 Vue 2.0( 來源微博@勾三股四 )
Code Review for Vue 2.0 Preview
框架對比
Vue 視頻教程（需科學上網）
最輕松簡單的入門教程，可以初步對 Vuejs 的使用有個概念店印。
An Introduction into Vue.js: Building an Example App
Repository（該視頻教程的代碼資源文件）
很棒的視頻教程冈在，可以最大化的接觸到 Vuejs 所能做到的事情，是我當時看到的對我來說最好的 Vuejs 相關視頻教程按摘。
Vue Js Tutorial Intro with TodoList
就是對文檔里展示的?Todolist?的視頻化演示包券，文檔理解了就沒必要再看了。
Weather app with VueJS & OpenWeatherMap
Learn how to deal with JSON data with Vue / jQuery
use $.getJSON
隨便看看炫贤。
Learning Vue 1.0: Step By Step
沒看過溅固，但看目錄好像不錯，很多值得看一下兰珍，免得自己思路不清晰亂踩坑（而且視頻是免費的）发魄。
名詞解釋
hot-reload（熱加載）
Hot Reloading
The idea behind hot reloading is to keep the app running and to inject new versions of the files that you edited at runtime. This way, you don't lose any of your state which is especially useful if you are tweaking the UI.
在項目運行過程中，將修改的文件的新版本注入到頁面中俩垃，只更新相應的模塊励幼，這樣的話，你不會丟失頁面的狀態(tài)信息口柳，這一點在你微調 UI 的時候尤其有用苹粟。
相關信息：
資源
加入 Vue 社區(qū)?- 社區(qū)、第三方資源跃闹、參與 Vue 開發(fā)（參與規(guī)則嵌削，Vue 的主要組件）
vue-devtools?- Chrome devtools extension for debugging Vue.js applications.
Awesome Vue.js?- A curated list of awesome things related to Vue.js
coligo.io?- 在學習 vuejs 的同學，可以看看這個網站望艺，上面都是些 vuejs 不錯的案例教程
如果你打賞我的話苛秕，我會很開心的~~
贊賞支持
? 著作權歸作者所有
寫了 27680 字，被 330 人關注找默，獲得了 453 個喜歡
是的艇劫，我有強迫癥 PS: 歡迎關注我的微信訂閱號 Alexee Github： https://github.com/SuperAL 掘金： https://juejin.im/user/5735e12e1ea493006420bafb SegmentFault： https://segmentfault.com/u/alexee 開發(fā)者頭條獨家號： https://toutiao.io/subjects/29096
被以下專題收入，發(fā)現更多相似內容
Web前端之路
程序員
讓前端飛
前端開發(fā)那些事
Vue.js 資料
前端
Vue
轉載 :OpenDiggawesome-github-vue 是由OpenDigg整理并維護的Vue相關開源項目庫集合惩激。我們會定期同步OpenDigg上的項目到這里店煞，也歡迎各位提交項目給我們。 如果收錄的項目有錯誤风钻，可以通過issue反饋給我們顷蟀。這里的項目Star數不是實時...
?果汁密碼
javascript 正則表達式總結 - 前端 - 掘金為什么要使用正則表達式 正則表達式通過由普通字符和特殊字符組成的文字模板完成對字符串的校驗，搜索骡技，替換鸣个。在javascript中類似這樣 ... 平時自己項目中用到的 CSS - 掘金css有些屬性容易忘記，半天不寫就...
?掘金官方
來源：github.com Vue.js開源項目速查表：https://www.ctolib.com/cheatsheets-vuejs.html UI組件 element ★12468 - 餓了么出品的Vue2的web UI工具套件Vux ★7759 - 基于Vue和We...
?zhangtaiwei
如今最現代最成功的目的地旅游網站必須涵蓋內容的營銷，展示的形象以滿足不同消費者的需要囤萤，設計上采取移動優(yōu)先策略昼窗，以及使用更多大尺寸照片以及豐富視頻內容。 如今選擇出我們心目中世界上最好的目的地旅游網站遠比2013年更難阁将，更具有挑戰(zhàn)性膏秫，因為旅游局的網站都在前端上優(yōu)化了他們的網站...
?innoutbound
今晚右遭，月亮特別圓做盅，特別亮。 不喜歡孤獨的我卻自己一個人走在校園里窘哈，走在道路的正中間吹榴，兩邊微微亮的路燈將我的影子拉長，變短滚婉，那一刻图筹，感覺整個月亮都是我的。 秋風呼呼而過让腹，一片片樹葉跟隨風的步伐远剩，旋轉，慢慢的骇窍，慢慢的瓜晤，落到地面，一層層疊積腹纳，在月光下痢掠，泛著黃色的微光。 21歲的年...
?明羽繁
我常想嘲恍，若是我去創(chuàng)作一部長篇小說足画，我會寫什么？我不是一個天馬行空佃牛，想象力豐富的人淹辞，也沒經歷過跌宕起伏的人生。我的祖輩曾有些傳奇俘侠，只是年代久遠桑涎，信息寥寥，即便是寫兼贡，恐怕也沒辦法交代清楚攻冷。那么我寫什么呢？ 前些日子遍希，父親參加了一次聚會等曼，回來后唏噓不已。1990年，他所在的鄉(xiāng)鎮(zhèn)企...
?開顏棠棠
畢老師來看我禁谦，說老虎吃人的事情發(fā)生后她很糾結胁黑，晚上沒有睡好。 我好奇怪州泊，老虎吃人的事發(fā)生了丧蘸，我沒有啥感覺，只有網絡上大家都有的認識遥皂，不作死不會死力喷。 而且在看了網絡上的詳細信息后，能感覺到這個人的問題非常大演训。所以任何事都是有原因的弟孟，沒有無緣無故的事情發(fā)生。 而我對畢老師說样悟，就...
?開心的靈通
上個月媽媽來電話跟我說小A離婚了窟她，這太讓我驚訝了陈症，足足驚訝了一個星期。小A是我的小學同學震糖，她們夫婦的結合有過波折录肯，當年，聽說小A老公腳踏兩船试伙。小A的家境屬于書香之家嘁信，父母教書的，獨生女疏叨。而另一個女子聽說是當官的女兒潘靖，家境優(yōu)越，也是獨生女蚤蔓。家境好的這位懷孕了卦溢，也許是孕期反應脾...
?芳子的平臺
