『壹』 vue怎麼學
如果你是 Vue 開發新手，可能已經聽過很多行話術語，比如單頁面應用程序、非同步組件、伺服器端渲染，等等。你可能還聽說過與 Vue 有關的一些工具和庫，比如 Vuex、Webpack、Vue CLI 和 Nuxt。
浸沒在術語和工具的浩瀚海洋中難免會令人感到沮喪，但其實並不是只有你一個人有這種感受，所有經驗水平的開發人員都會持續感覺到這種莫名的壓力。分享一張圖給你看看
基礎知識：
vue的生命周期： beforeCreate/created、 beforeMount/mounted、 beforeUpdate/updated、 beforeDestory/destoryed
vue常用指令： v-for、 v-bind（縮寫形式 :prop）、 v-on(縮寫形式 @click=』sss')、 v-if/v-else/v-else-if、 v-model、 v-once、 v-html、 v-show...
vue自定義組件： Vue.component(『componentName',{ props:[『p1』,』p2』], template: 『<li>{{ p1 }}</li>'})
vue常用實例方法和屬性： data/$data、 methods/$methods、 $el、 computed(計算屬性)、 $watch、 $set、 $event、 $emit...
如果需要更新的屬性需要緩存，則使用計算屬性的方式，否則可以使用 methods里的方法來更新屬性（ methods里的方法每次重新渲染都會執行）
計算屬性默認提供了 getter，你還可以給它設置 setter
當你數據變化是非同步或者開銷較大時，可以使用 watch偵聽器來響應數據的變化
v-bind:class的值可以是一個對象，可實現類似 react中 classnames模塊的功能
自定義組件上的 class會被渲染拼接到 template的根節點的 class屬性上（自定義組件上可使用 v-bind:class來做class的判斷顯示邏輯）
v-bind:style可以用來綁定內聯樣式，這個內聯樣式的值可以由一個對象來定義（類似css in js的模式）,且可以被定義為數組(多個樣式對象)
v-bind:style可以使用多重值的形式： <div:style=「display:[『-webkit-box』,』-ms-flexbox』,『flex']"></div>
v-if/v-else/v-else-if的時候，可以用key來管理可復用的元素
v-if是』真正』的渲染，它會確保在切換條件過程中條件塊內的元素的事件監聽器和子組件適時的銷毀和重建
v-if是惰性的，初始為假，什麼也不做，直到為真的時候才渲染元素
v-show總是渲染元素，只是簡單的進行切換
v-if的切換開銷大， v-show則是初始渲染開銷大，頻繁切換使用 v-show，運行時經常改變則使用 v-if
v-if和 v-for一起使用時， v-for的優先順序更高
v-for可遍歷數組，第二個參數是索引
v-for可遍歷對象，第二個參數是 key，第三個參數是索引
v-for和 <template>搭配可減少渲染次數
v-for和自定義組件使用時，需要使用 props來傳遞值
盡可能的為遍歷子元素加上 key，獲得渲染優化
數組變異方法： push/pop/unshift/shift/splice/sort/reverse改變原始數組
數組非變異方法： filter/concat/slice 不改變原始數組，總是返回新數組
Vue不能檢測到數組索引賦值（使用 vm.$set解決）和修改 length長度賦值(使用 splice解決)的情況
Vue不能檢測對象屬性的添加和刪除(使用 vm.$set或 Object.assign)
is=「todo-item」這種屬性的寫法比較適合DOM模板
事件修飾符，它們可串聯使用： .stop、 .prevent、 .capture、 .self、 .once、 .passive(尤其適合移動端)
.passive不用同時和 .prevent使用，後者會被忽略
按鍵修飾符: .enter、 .tab、 .delete、 .esc、 .space、 .up、 .down、 .left、 .right
系統按鍵修飾符: .ctrl、 .alt、 .shift、 .meta(⌘|⊞|◆)、 .exact(允許精確控制系統修飾符組合鍵觸發)
滑鼠修飾符： .left、 .right、 .middle
v-model會忽略表單元素的 value、 checked、 selected，僅僅使用實例中的數據作為數據源
表單事件修飾符： .lazy、 .number、 .trim
組件是可復用的vue實例，具有vue實例大多數屬性和方法
組件可復用，每個組件有獨立的空間
組件上的data必須是一個函數，這樣做避免影響了其他組件
通過 Vue.component()全局注冊的組件可在其被注冊後的任何通過 newVue()創建的實例所使用，包含其組件樹中的所有組件
通過插槽 <slot>分發內容(其實就是類似於react的children)
動態組件 <component>配合屬性 is來實現
解析DOM模板時需要注意下可能會有不生效的情況，需要使用is來傳遞組件
『貳』 web前端開之網站搭建框架之vue詳解
網站搭建框架之vue
Vue是web前端快速搭建網站的框架之一。它與jQuery有所不同，是以數據驅動web界面（以操作數據改變頁面，而jQuery是以操作節點來改變頁面），同時，vue還實現了數據的雙向綁定，可及時響應用戶的輸入。最主要的是vue的寫法簡單，容易掌握，組件形式可以大大提高工作效率。
對於vue的使用可以分為兩種使用形式：1.引入vue.js文件，在js中將vue實例化；2.通過node安裝第三方包--vue，搭建腳手架，用腳手架將頁面分成幾個組件編寫，從而利用組件來搭建頁面。
引入vue.js的寫法
Vue分為V層（視圖層）和M層（數據層），一般都是由M層的數據來驅動V層的改變。而vue的常用指令數量不多且寫法簡單。常用的有v-html、v-text、v-show、v-if、v-else、v-for、v-bind:、v-model。v-html和v-text都是將數據寫進標簽內，但它們的不同之處在於v-text會將標簽當做文本內容寫入
，而v-html則會對標簽進行編譯，只顯示標簽內的內容。
至於v-show、v-if、v-else這三個指令都是通過布爾值的判斷來執行的，當布爾值為真時，設置了v-show、v-if指令的標簽會顯示出來，當布爾值為假時，標簽隱藏；而v-else與這兩個指令相反。除此之外，v-show和v-if、v-else之間也有差別，v-show是改變標簽的display屬性來使標簽顯示或隱藏；而v-if、v-else是通過添加或刪除節點，來顯示或隱藏標簽的。
V-for是vue的一種遍歷方法，這個方法極大的簡化了數組或對象的遍歷並顯示到頁面的步驟
而v-bind：是對html屬性或自定義屬性的數據驅動方式，格式為v-bind:href，可簡寫為：href。對於類（class）的操作是通過布爾值來判斷增加或者隱藏類，同時。類和樣式（style）所接受的數據類型為對象。
V-model指令的作用是將數據進行雙向綁定，僅限於輸入類型標簽。當用戶在頁面輸入時，數據層的數據會跟著改變。這是VM模式。由v驅動m。
除了這些普通的指令之外，還有事件指令v-on:，可簡寫為@+事件名，例如：@click，並將執行函數寫到vue的methods中
通過腳手架來寫項目的話，可用通過寫組件，再將組件引入（注冊）到另一個vue文件里拼接在一起，從而構建出一個頁面。
（組件書寫格式）
（組件整合）
（注冊路由）
路由是通過vue-router來實現的，在注冊路由的時候要將router實例化。不同的路由跳轉不同的頁面，這是搭建單頁面應用的優勢。
而父組件與子組件之間的通訊可以通過props將父組件的信息傳遞給子組件，改變子組件的內容，這樣子組件的復用就不會有障礙了，而子組件傳遞信息給父組件或者其他組件的通訊則需vuex。
通過引入vuex並實例化一個Vuex.Store作為一個公共平台，將數據進行傳輸。通過vue的computed方法接收數據，通過methods方法改變數據。而這個公用平台可以實現組件與組件之間的信息傳遞，從而實現組件之間的交互。
通過一個星期的實戰，深深的體會到了vue的優勢，在構建移動端這方面的效率很高。但在搭建的過程中，還是少不了與jQuery結合，畢竟每個工具都有其優點，擇其優而用是明智的選擇。
『叄』 Vue基本用法
Vue:漸進式javascript框架
聲明式渲染-->組件系統-->客戶端路由-->集中狀態管理-->項目構建
Vue的基本使用
Vue的兩種掛載方式:
模板語法:
1.插值表達式
存在閃動問題:快速刷新瀏覽器時,有時會氏橡顯示{{xxx}}內容,然後替換為要顯示的值.解決的辦法-->指令(先隱藏,替換好值之後再顯示)
2.指令(指令的本身就是自定義屬性)
以v-開頭 例如v-cloak
html:
js
效果:
使用v-cloak
html:
css:
效果:
在簡單項目中，使用 v-cloak 指令是解決屏幕閃動的好方法。但在大型、工程化的項目中（webpack、vue-router）只有一個空的 div 元素，元素中的內容是通過路由掛載來實現的，這時我們就不需要用到 v-cloak 指令咯。
雙向數據綁定:v-model
2.MVVM私享
M(model)
V(view)
VM(view-model)
mvc,mvp和mvvm的區別:
http://www.ruanyifeng.com/blog/2015/02/mvcmvp_mvvm.html
3.事件綁定
事件冒泡和事件捕獲
3.1v-on指令
示例:
效果:
3.2事件函數的調用方式
html:
js
3.3事件函數參數傳遞
普通參數和事件對象
3.4事件修飾符
.stop 是阻止冒泡行為,不讓當前元素的事件繼續往外觸發,如阻止點擊div內部事件,觸發div事件
.prevent 是阻止事件本身行為,如阻止超鏈接的點擊跳轉,form表單的點擊提交
.self 是只有是自己觸發的自己才會執行,如果接受到內部羨模的冒泡事件傳遞信號觸發,會忽略兄核緩掉這個信號
.capture 是改變js默認的事件機制,默認是冒泡,capture功能是將冒泡改為傾聽模式
.once 是將事件設置為只執行一次,如 .click.prevent.once 代表只阻止事件的默認行為一次,當第二次觸發的時候事件本身的行為會執行
.passive 滾動事件的默認行為 (即滾動行為) 將會立即觸發，而不會等待 onScroll 完成。這個 .passive 修飾符尤其能夠提升移動端的性能。
html:
js:
e.prevent等同於
event.preventDefault()
3.5按鍵修飾符
在Vue中可以通過 config.keyCodes 自定義按鍵修飾符別名
示例:Vue.config.keyCodes.aaa = 65;
自定義按鍵:
4.屬性綁定
v-bind指令:被用來響應地更新 HTML 屬性
html:
js:
效果:
5.v-model的實現原理分析
①
等價於
②
第一種實現只是後面兩種寫法的語法糖.
當在input元素中使用v-model實現雙數據綁定，其實就是在輸入的時候觸發元素的input事件，通過這個語法糖，也能夠實現父子組件數據的雙向綁定.
父組件:
子組件:
6.樣式綁定v-bind:class
1️⃣class 與 style 是 HTML 元素的屬性，用於設置元素的樣式，我們可以用 v-bind 來設置樣式屬性。
v-bind 在處理 class 和 style 時， 專門增強了它。表達式的結果類型除了字元串之外，還可以是對象或數組。
①動態切換多個class
html
css
js
效果:
②樣式綁定到對象
③數組語法:
默認class會被保留合並
2️⃣style
三元表達式:
7.分支循環結構
7.1
v-show與v-if的區別:
v-show:
v-if:
1.原理
2.應用場景
7.2 循環結構
為什麼需要獨一無二的key的簡單示例:
效果:
點擊查看更多:
v-for:需要key的原因:
v-for遍歷對象
『肆』 Vue中使用新手引導功能：intro.js
1.webpack相關配置
2.如拿者哪果是vue-cli3的消碼嫌舉項目，則在vue.config.js
1.引入
2.初始化
3.html部分
https://github.com/alex-oleshkevich/vue-introjs
https://introjs.com/
『伍』 從零開始Gin Web+Vue商城的搭建（一）-- 前後端框架搭建和簡單溝通
同步更新的github地址： https://github.com/nds15763/ginMall
看了一位老哥寫的《 前後分離Vue+Gin(go)總結 》以後有種自己搭一份的想法，結合最近找工作比較閑，就准備自己寫一份商城源碼。
一、先來實現前端部分第一步搭建Vue框架。Vue我也是第一次接觸，看了半者飢天多的文檔才有了大概的了解。先不過多考慮前端的實現，首先考慮一下前後台溝通的問題。
用vue-cli搭建一個新框架，在Helloworld.vue 或者新建一個模板頁。
老哥的文檔中寫到，他推薦使用axios插件代替jquery來和後台做交互。那麼我也按照他的思路安裝一個axios插件，寫一個跟後台通訊的Get請求。
二、然後指激來搭建後台框架，老哥說的是用Gin框架來搭建，並且用cors中間件來解決跨域訪問問題，咱們也先來搭建一個簡單的框架。
main.go
router.go
FPList.go
在瀏覽器里輸入localhost:8081/FPList，可以看到剛才自己定義的Json串，知道後台唯嫌襪算是成功了。
此時再打開前端頁面，可以看到後台返回的結果已經顯示在頁面了。
『陸』 vue是什麼 怎麼用
Vue.js是一套構建用戶界面的漸進式框架，Vue 採用自下向上增量開發的設計，其核心庫只關注視圖層，易於上手，同時vue完全有能力驅動採用單文件組件和 Vue 生態系統支持的庫開發的復雜單頁應用。
1、MVVM即model，view，viewmodel，它是數據驅動模式，即所有的一切通過操作數據來進行，而盡量避免操作dom樹。
(6)web新手指引vue擴展閱讀：
vue在web開發、網站製作中的優勢
1、據綁定：vue會根據對應的元素，進行設置元素數據，通過輸入框，以及get獲取數據等多種方式進行數據的實時綁定，進行網頁及應用的數據渲染 。
2、組件式開發：通過vue的模塊封裝，它可以將一個web開發中設計的各種模塊進行拆分，變成單獨的組件，然後通過數據綁定，調用對應模版組件，同時傳入參數，即可完成對整個項目的開發。
3、簡單小巧的核心，漸進式技術棧，足以應付任何規模的應用。
『柒』 webpack-從零搭建vue過程
執行了npm init之後,會讓我們填寫一些配置信息，如果還不知道怎麼填寫的話可以一路回車，會生成一個pakeage.json文件,文件內容如下：
當使用 vue-loader 或 vueify 的時候，*.vue 文件內部的模賣吵絕板會在構建時預編譯成 JavaScript。你在最終打好的包里實際上是不需要編譯器的，所以只用運行時版本即碰改可。
因為運行時版本相比完整版體積要小大約 30%，所以應該盡可能使中姿用這個版本。如果你仍然希望使用完整版，則需要在打包工具里配置一個別名：
在webpack.config.js配置一下vue-loader
Vue-loader在15.*之後的版本都是 vue-loader的使用都是需要伴生 VueLoaderPlugin的,所以在webpack.config.js中加入
先安裝html-webpack-plugin插件 npm install --save-dev html-webpack-plugin,然後配置webpack.config.js
先安裝webpack-dev-server；npm install webpack-dev-server --save-dev
然後在webpack.config.js文件配置：
最後在package.json文件配置一下運行webpack-dev-server的腳本
『捌』 零基礎新手學習Web前端應該掌握哪些知識
一、零基礎學web前端開發要怎麼去學?
首先要學習的就是基礎知識：HTML、CSS和JavaScript。HTML是內容，CSS是表現，JavaScript是行為。前端開發的門檻其實非常低，與伺服器端語言先慢後快的學習曲線相比，前端開發的學習曲線是先快後慢。
所以，對於從事IT工作的人來說，前端開發是個不錯的切入點。也正因為如此，前端開發的領域有很多自學成「才」的同行。HTML是最基礎的，現在流行的是HTML5設計，能更好的為移動端服務，要先學會網頁布局。CSS是用來美化HTML頁面的為頁面提供布局和格式。最後再學JavaScript。
二、web前端基礎知識要怎麼合理安排學習?
1熟練掌握HTML基本知識，包括每個標簽的用法等。這個是前端開發的信息結構。
2、熟練掌握DIV+CSS基本知識，這個東西基本就是前端的基礎了，它可以將你寫的東西直觀的展示出效果給你看，這個就是前端開發的顯示效果。
3、學習JavaScript編程，深入學習，包括jquery等框架。js東西會比較多。Js就是前端的行為和數據交換。
4、學習一門簡單的後台編程語言，比如asp或者php，對自身會有一定的幫助。
三、如何學習最新的HTML5+CSS3技術
上述簡單闡述了前端開發要怎麼學，主要是從學習的基本點來描述的，另外說下最新的HTML5+CSS3了，這些與時俱進的東西一定要看。在學習HTML/CSS的時候，一定要邊學邊練習，通過這些練習來鞏固、理解自己的知識。其次學習JavaScript首先要知道這門語言可以做什麼，不能做什麼，擅長做什麼，不擅長做什麼!
『玖』 web前端怎樣入門
先說一下自學前端如何入門吧。
方法：
第一：理清Web前端的知識結構。要想高效學習Web前端知識，首先應該搞清楚Web前端都包括哪些技術結構。Web前端開發雖然技術難度並不高，但是技術細節卻比較多，內容也比較雜。Web前端的基礎包括三大部分，包括Html、CSS和JavaScript，其中JavaScript是學習的重點，也是難點。另外，vue等框架也是需要熟練掌握的。
第二：緊跟技術發展趨勢。目前Web前端的技術發展趨勢有三個，其一是前端開發數據化;其二是前端開發高效化;其三是前端開發全棧化。前端開發數據化主要是大數據發展的影響，在大數據的推動下，Web前端逐漸涉及到了大量的數據展示任務。前端開發高效化主要體現在Web前端正在進行獨立部署，前端與後端的溝通主要通過資源介面的方式來進行。前端開發全棧化也是一個比較明顯的趨勢，比如Nodejs的應用。
路線：
第1階段：前端頁面重構(4周)
內容包含了：(PC端網站布局項目、HTML5+CSS3基礎項目、WebApp頁面布局項目)
第2階段：JavaScript高級程序設計(5周)
內容包含：(原生JavaScript交互功能開發項目、面向對象進階與ES5/ES6應用項目、JavaScript工具庫自主研發項目)
第3階段：PC端全棧項目開發(3周)
內容包含：(jQuery經典交互特效開發、HTTP協議、Ajax進階與PHP/JAVA開發項目、前端工程化與模塊化應用項目、PC端網站開發項目、PC端管理信息系統前端開發項目)
第4階段：移動端項目開發(6周)
內容包含：(Touch端項目、微信場景項目、應用Angular+Ionic開發WebApp項目、應用Vue.js開發WebApp項目、應用React.js開發WebApp項目)
第5階段：混合(Hybrid,ReactNative)開發(1周)
內容包含：(微信小程序開發、ReactNative、各類混合應用開發)
第6階段：Node.js全棧開發(1周)
內容包括：(WebApp後端系統開發、一、Node.js基礎與Node.js核心模塊；二、Express；三、noSQL資料庫)
至於視頻教程，我這里有很多前端的全套教程，如果你需要的話，可以加一下我的學習交流裙裙，找我要就行了！