⑴ Vue基礎篇
內容簡介：
1）Vue指令
2）computed和watch
3）生命周期鉤子
4）組件間的傳參
5）插槽
6）修飾符
7）nextTick()
前端三大框架：
Vue：尤雨溪開發
React：Facebook主導開發
Angular：谷歌主導開發
為什麼選擇Vue?
1.國內Vue的市場份額佔比多
2.簡單易上手，非常適合前端開發初學者學習
前置知識：
1.HTML、CSS和JS基礎
2.了解Node和npm
3.webpack（可選，vue-cli已經封裝了打包功能）
使用Vue的兩種方式：
1.直接script標簽引入vue.js文件
2.基於Node環境創建Vue項目（使用vue-cli初始化一個Vue項目）
前端框架與庫的區別
• jquery 庫 -> DOM(操作DOM) + 動畫+ ajax請求
• 框架 -> 全方位功能
一、指令
指令（Directives）是帶有 v- 前綴的特殊屬性。
插值表達式和v-text指令被直接解析為字元串；元素綁定 v-html 指令後，解析了msg 變數值裡面的html標簽，輸出真正的html元素。
v-model也可用在自定義組件上。
5.v-for（列表渲染）
使用v-for時應綁定key屬性，key屬性可以用來提升v-for渲染的效率
Vue 將被偵聽的數組的變更方法進行了包裹，所以它們也將會觸發視圖更新。這些被包裹過的方法包括：
push()
pop()
shift()
unshift()
splice()
sort()
reverse()
由於 JavaScript 的限制，Vue 不能檢測數組、對象的以下變化：1. 利用索引直接設置數組的某一項 2. 對象屬性的添加或刪除
二、computed和watch
三、生命周期鉤子
什麼是Vue生命周期？
Vue 實例從創建到銷毀的過程，就是生命周期。也就是從開始創建、初始化數據、編譯模板、掛載Dom→渲染、更新→渲染、卸載等一系列過程。
總共分為8個階段：創建前/後，掛載前/後，更新前/後，銷毀前/後。
1）beforeCreate
此時實例上只有一些生命周期函數和默認的事件，此時data computed watch methods上的方法和數據均不能訪問。
2）created
此時可以讀取data的值，並可以對其進行操作，把方法、計算屬性也都掛載到了實例。但是依舊不能訪問el，不能獲取到DOM元素。
在這個鉤子函數中，我們可以進行http請求，把請求到的數據儲存在data中。
3）模板編譯，把data裡面的數據和vue語法寫的模板編譯成HTML
4）beforeMount
將編譯完成的HTML掛載到對應虛擬DOM，此時還未掛載到頁面上
5）mounted
編譯好的HTML已掛載到頁面上
6）beforeUpdate和updated
數據更新時調用，通常使用計算屬性或偵聽器取而代之
7）beforeDestroy
銷毀所有觀察者、組件及事件監聽
8）destroyed
組件已經完全銷毀，組件中的數據、方法、計算屬性、過濾器等都已不可用。
四、組件間的通信
1.父子組件間的通信
父子組件通信可以總結為props向下傳遞，事件向上傳遞。
單向數據流：父級 prop 的更新會向下流動到子組件中，但反過來不行。
每個Vue實例都實現了事件介面：子組件使用 this.$emit(eventName,optionalPayload) 觸發自定義事件。父組件在使用子組件的地方直接用v-on來監聽子組件觸發的事件。
父組件通過ref直接調用子組件中的方法。
子組件調用父組件中的方法：
1）子組件中通過 this.$parent.fatherMethod() 來調用父組件的方法
2）子組件用$emit向父組件觸發一個事件，父組件監聽這個事件
3）父組件通過props把方法傳入子組件中（type: Function），在子組件里直接調用這個方法
2.兄弟組件間的通信
其中一種方法是讓父組件充當兩個子組件之間的中間件（中繼）；
另一種就是使用EventBus（事件匯流排），它允許兩個組件之間直接通信，而不需要涉及父組件：
Vue原型上的方法：
五、插槽
3）作用域插槽
使用場景：
在使用ElementUI組件庫的el-table組件時，表格的編輯和刪除操作要用到作用域插槽。因為el-table組件，就是當前組件的子組件。通過作用域插槽很容易拿到當前表格行的索引和內容，這樣就可以很方便地進行編輯、刪除的操作。v-slot指令是Vue2.6之後，作用域插槽的新語法，舊語法（slot-scope）現在還保留，但3.0之後會移除。
六、修飾符
2.事件修飾符
vue提倡的是在方法中只有純粹的數據邏輯，而不是去處理 DOM 事件細節，所以提供了事件修飾符用於DOM的事件處理。
3.按鍵修飾符
七、nextTick()
定義：在下次 DOM 更新循環結束之後執行延遲回調。在修改數據之後立即使用這個方法，獲取更新後的 DOM。（當數據更新了，在dom中渲染後，自動執行nextTick的回調）
應用場景：需要在視圖更新之後，基於新的視圖進行操作。
⑵ Vue基礎知識
數據雙向綁定，組件化，單文件組件
全局api： vue.extend 、 vue.set
實例選項: new Vue() 、 el 、 data 、 compents 都是vue實例選項
實例屬性和方法： vm.$on 、 vm.$data 、 vm.$destroy() 在$都是vue的實例和方法
指令： directive
內置組件： <components></compontents> 、 <keep-alive></keep-alive> 、 <router-view></router-view>
數組中不可用的方法：slice，concat；
直接修改數組list[i] = 值，不可以這樣直接修改；
Vue.set(數組，索引，{值}) vue的全局方法set來更改數組的某一項的值
標簽屬性和條件渲染
標簽屬性： v-bind：href='link"; 等效於 :href="link" 動態綁定；
條件渲染： v-if 、 v-else 、 v-show ；
數據綁定： {{...}} 、 v-html (原始-HTML)、 v-text ；
事件綁定-內置事件綁定，自定義事件綁定
v-on:click="run" 等效於 @:click="run" 事件綁定；
自定義事件綁定： 父組件自定義事件
<my-compented @my-event='toggle'></my-compented>
子組件觸發 my-event 自定義事件； this.$emit('my-event', opation)；
父組件執行toggle 函數；
計算屬性和數據監聽
computed選項 -計算屬性：根據我們調用屬性來跟新，調用的屬性沒有變更，我們computed選項裡面的方法讀取的是緩存；
頁面內容響應數據v-once
如果你需要頁面內容響應數據的變化，就不加v-once。
如果你需要頁面內容渲染後，不隨數據的變化而變化，就加上這個。
對於一些固定不變的組件，在調用時我們可以加上v-once，只在第一次渲染執行，保存數據在內存中，後面再調用直接從內容中提取，提高執行效率。
應用
組件的通信
<p:is = "動態的組件名"></p> 等同於 <動態的組件名></動態的組件名> 動態綁定組件
註：Vue有個單項數據流的概念：即父組件傳遞給子組件的參數，子組件不能直接修改；防止引用類型參數被修改後，如果父組件中其他地方也使用了此參數會受到影響。
子組件 props 接受的兩種形式：
數組： ['first-name','two-name'] ，從父組件傳遞兩個屬性值；
動態展現： {{firstName}}
對象：
slot：插槽
父組件插件裡面定義的內容放到子組件 slot 中：
子組件
vue高級功能--過渡和動畫
自定義指令：
使用 vue-cli的優勢：
成熟的vue項目架構設計；
本地測試伺服器；
集成打包上線方案 webpack
npm install vue-cli -g ：全局安裝vue-cli
vue init webpack my-project ：初始化項目
npm install 安裝項目依賴
npm run dev ：在localhost啟動測試伺服器；
npm run bulid ：生成上線目錄（部署）
a、安裝 vue-router
b、配置路由
6、關閉eslint
dev模式下，默認會做eslint檢測，若要關閉，打開 config/index.js ，設置 useEslint: false ，${}佔位符，多行字元串
7、生命周期
8、支持es6
es6中很多新特性很好用class、promise、then、catch、...（數組轉換符號）、函數設置參數默認值等
a、安裝babel-polyfill
b、在入口main.js文件當中引入:
c、找到build文件夾下的webpack.base.conf.js
文章參考： 慕課網-歐米雪兒lyy
⑶ vue怎麼學習（網營作業）
Vue基礎部分
第一章：內部指令
1.v-if v-else v-show
2.v-for指令 ：解決模板循環問題
3.v-text & v-html
4.v-on：綁定事件監聽器
5.v-model指令
6.v-bind 指令
7.v-pre & v-cloak & v-once
第二章：全局API
1.Vue.directive 自定義指令
2.Vue.extend構造器的延伸
3.Vue.set全局操作
4.Vue的生命周期（鉤子函數）
5.Template 製作模版
6.Component 初識組件
7.Component 組件props 屬性設置
8.Component 父子組件關系
第三章：選項
1.propsData Option 全局擴展的數據傳遞
2.computed Option 計算選項
3.Methods Option 方法選項
4.Watch 選項 監控數據
5.Mixins 混入選項操作
6.Extends Option 擴展選項
第四章：實例和內置組件
1.實例入門-實例屬性
2.實例方法
3.實例事件
4.內置組件 -slot講解
Vue全家桶部分
第五章：Vue-cli
1.Vue-cli安裝和初始化
2.Vue-cli項目結構講解
3.解讀Vue-cli的模板
第六章：Vue-router
1.Vue-router入門
2.vue-router配置子路由
3.vue-router如何參數傳遞
4.單頁面多路由區域操作
5.vue-router 利用url傳遞參數
6.vue-router 的重定向-redirect
7.alias別名的使用
8.路由的過渡動畫
9.mode的設置和404頁面的處理
10.路由中的鉤子
11.編程式導航
第七章：Vuex
1.初出茅廬 來個小Demo
2.state訪問狀態對象
3.Mutations修改狀態
4.getters計算過濾操作
5.actions非同步修改狀態
6.mole模塊組
⑷ 想學vue.js框架，需要具備哪些知識基礎
需要：
js 和 html 的基礎.(就是最基本的js,ES6,ES5語法,還有html)
如果這些基礎很扎實的話，學起來會很輕松的，加油吧
⑸ 【Vue】vue基礎知識一（本地數據操作）
javaScript 框架
簡化Dom的操作
響應式數據驅動
簡單的vue程序：
1.導入開發版本的vue.is
2.創建vue實例對象，設置el屬性和data屬性
3.使用簡介的模版語法把數據渲染到頁面上
vue實例可以使用雙標簽掛載，不能使用HTML和BODy來進行
v-text . 設置標簽的文本值 (覆蓋標簽中全部的內容 {{}} el只會替換相應的值)
v-html (1.內容中有html結構會被解析成標簽 2.設置元素的innerHTML)
註：解析文本使用 v-text . 解析hml使用v-html
v-on(1.為元素綁定事件，2.事件名不需要寫on,3.指令可以簡寫@ 4.綁定的方法定義在methods屬性中5.方法內部可以通過this關鍵字訪問定義data中的數據)
計數器（創建實例v-on事件和方法綁定，實時更改數據）
v-show(1.根據元素的真假切換元素的顯示狀態 2.原理是修改元素的display實現元素的隱藏)
v-if(1.根據表達式的真假切換元素的顯示狀態 2.本質是操作dom 3.表達式的值是true時，元素存在於dom樹中，為否是從dom樹中移除)
註：v-show和v-if的區別：
v-show：只是改變了display屬性的操作
v-if：改變的是dom數
實際情況 頻繁切換的使用v-show
v-bind (1.為元素綁定屬性 2.完整寫法v-bind:屬性名 3.簡寫的話可以只寫:屬性名)
圖片切換（1.用數組來存放元素 2.用v-on來綁定事件 3.用v-bing來修改元素的屬性）
v-for(1.根據數據生成列表 2.v-for長和)
v-on (補充)（1.時間綁定的方法寫成函數調用的形式，可以傳入自定義參數
2.定義方法時定義形參數來接受傳入的實參
3.通過.修飾符可以對事件進行限制）
例如：@keyup.enter
v-model(1.便捷的設置和獲取表單元素的值
2.綁定的數據會和表單元素值相關聯
3. 表單的 數據=綁定的數據)
記事本實戰演練(1.增加 2.刪除 3.隱藏 4.清空 )
註：shift()函數刪除的是數組中的第一個元素 使用splice刪除指定的某個元素