1.框架和庫的區別： 框架：framework 有著自己的語法特點、都有對應的各個模組 庫 library 專注於一點
框架的好處：
1.提到程式碼的質量，開發速度 2.提高程式碼的複用率 3.降低模組之間的耦合度 （高內聚低耦合） UI：user interface GUI : graphical user interface CLI : command line interface API : application interface
思維模式的轉換：
從操作DOM的思維模式 切換到 以資料為主
2.Vue概述
1、what
是一個漸進式的構建使用者介面的js框架
2、where
小到的簡單的表單處理，大到複雜的資料操作比較頻繁的單頁面應用程式
3、why
1.方便閱讀的中文文件
2.容易上手 （學習曲線比較緩和）
3.體積小
4.基於元件化的開發方式
5.程式碼的可讀性、可維護性得到了提高
4、how
工作方式：可以通過豐富的指令擴充套件模板，可以通過各種各樣的外掛來增強功能
搭建環境：
方式1
全域性安裝 vue-cli
$ npm install --global vue-cli
# 建立一個基於 webpack 模板的新專案
$ vue init webpack my-project
# 安裝依賴，走你
$ cd my-project
$ npm install
$ npm run dev
方式2:
直接引入對應的js檔案
複製程式碼3.Vue中基礎知識 1、雙花括號 mustache(鬍子)/interpolation（插值表示式）
語法：
<any>{{表示式}}</any>
作用：
將表示式執行的結果 輸出當呼叫元素的innerHTML中；還可以將資料繫結到檢視
複製程式碼2、指令-迴圈指令 基本語法1： 基本語法2：
作用：
在遍歷array這個集合時，將臨時變數儲存在tmp中，建立多個any標籤
複製程式碼3、指令-選擇指令 語法： 作用： 根據表示式執行結果的真假，來決定是否要將當前的這個元素 掛載到DOM樹
4、指令-事件繫結 語法： 作用： 給指定的元素 將handleEvent的方法繫結給指定eventName事件
5、指令-屬性繫結 基本語法： 補充，支援簡寫： 作用： 將表示式執行的結果 繫結 到當前元素的myProp屬性
<img v-bind:src="'img/'+myImg" alt="">
複製程式碼動態樣式繫結
動態樣式繫結
動態樣式類繫結
動態樣式類的繫結
6、指令-雙向資料繫結 方向1：資料繫結到檢視 方向2：將檢視中（表單元素）使用者操作的結果繫結到資料
基本語法:
<表單元素 v-model="變數">
</表單元素>
複製程式碼4.元件化 元件：元件就是可被反覆使用的，帶有特定功能的檢視
所謂的元件化，就像玩積木一樣，把封裝的元件進行復用,把積木（元件）拼接在一起，構成一個複雜的頁面應用程式。
元件樹就是由各個元件構成的一種資料結構，它存在的意義是為了幫梳理應用程式
1、元件的建立
全域性元件
Vue.component('my-com',{
template:<h2>it is a header</h2>
})
區域性元件
new Vue({
components:{
'my-footer':{
template:''
}
}
})
2、元件使用
作為普通的標籤去使用
3、注意事項 1.元件的id和使用方式 遵循烤串式命名方式：a-b-c 2.如果一個元件 要渲染多個元素，將多個元素放在一個頂層標籤中，比如div、form 3.全域性元件可以用在id為example的範圍內的任何一個元件內部，直接呼叫可以；但是區域性元件只能在父模板中直接呼叫
5.自定義指令 1、建立和使用 Vue.directive('change',{ bind:function(el,bindings){ //首次呼叫 }, update:function(el,bindings){ //只要是有資料變化，都會呼叫 }, unbind:function(){ //解綁 } })
6.過濾器 過濾器是針對一些資料 進行篩選、過濾、格式化等相關的處理，變成我們想要的資料
過濾器的本質 就是一個帶有引數帶有返回值的方法
Vue1. 支援內建的過濾器，但是Vue2. 就不再內建過濾器，但是支援自定義過濾器。
1、過濾器的建立和使用
1.建立 Vue.filter( 'myFilter', function(myInput){ //myInput是在呼叫過濾器時，管道前表示式執行的結果 //針對myInput，按照業務需求做處理 //返回 return '處理後的結果' })
2.使用 {{expression | myFilter}} 2、如何在呼叫過濾器時，完成引數的傳送和接受
1.傳送 {{expression | myFilter(引數1，引數2)}}
2.接受 Vue.filter('myFilter',function(myInput，引數1，引數2){ return '處理後的結果' })
7.複合元件
知識回顧：
Vue.component('my-header',{
template:<div></div>
});
複合元件：並不是新的概念，就是一個元件，只不過這個元件中 可以呼叫其他的元件
注意事項： 1.元件要渲染的內容 取決於在定義元件時template
效果是出不來的 2.允許在一個元件中，直接來呼叫另外一個元件8.生命週期 四個階段： create 準備工作 （資料的初始化。。。） mount 掛載前後針對元素進行操作 update 資料發生變化， destroy 清理工作 (關閉定時器、集合清空..)
beforeCreate/created
beforeMount/mounted
beforeUpdate/updated
beforeDestroy/destroyed
複製程式碼9.常用屬性 1、watch 1. 表單元素的雙向資料繫結 v-model="myValue" 2.監聽 watch:{ myValue:function(newValue,oldValue){
}
}
複製程式碼2、computed 計算屬於是用於在模板中，搞定複雜的業務邏輯，因為有依賴快取。 1.指定計算屬性 computed:{ myHandle:function(){ return 資料 } }
2.呼叫
<any>{{myHandle}}</any>
複製程式碼10.元件間通訊
1、父與子通訊 （props down）
1.傳送
2.接受
到son元件：
Vue.component('son',{
props:['myName'],
template:<p>{{myName}}</p>
})
2、子與父通訊 (events up) 1.繫結 methods:{ handleEvent:function(msg){} } <son @customEvent="handleEvent"> 2.觸發 子元件內部： this.$emit(‘customEvent’,100);
3、ref(reference 引用/參考 外號) 幫助在父元件中 得到子元件中的資料、方法。 1.指定ref屬性
2.根據ref得到子元件例項
this.$refs.mySon
複製程式碼4、parent得到父元件的例項
5、兄弟元件通訊
1.var bus = new Vue();
2.接收方
bus.emit('eventName',123);
11.補充元件建立的方式
1、直接在template屬性中指定模板內容
1.全域性元件
Vue.component
2.區域性元件
{
components:{
'my-footer'：{template:``}
}
}
2、.vue結尾的檔案
3、單獨指定一個模板內容
Vue.component('',{
template:'#myContent'
})
複製程式碼12.路由模組 路由模組的本質 就是建立起url和頁面之間的對映關係
1、SPA的基本概念和工作原理
SPA：single page application 單一頁面應用程式，只有一個完整的頁面； 它在載入頁面時，不會載入整個頁面，而是隻更新某個指定的容器中內容。 比如Gmail、移動的webApp
工作原理： 1.解析位址列 完整的頁面地址、路由地址 2.根據路由地址 從路由詞典中找到真正的要載入的頁面 3.發起ajax請求 請求要載入的頁面 4.像指定的容器中 插入載入來的頁面
2、路由模組的基本使用
專業術語： router路由器 route路由 routes 路由陣列（路由詞典） 1.引入vue.js vue-router.js 2.指定一個容器 3.建立業務所需要用到的元件類 var MyLogin = Vue.component() 4.配置路由詞典 const myRoutes = [ {path:'',component:MyLogin}, {path:'/login',component:MyLogin} ];
const myRouter = new VueRouter({ routes:myRoutes })
new Vue({ router:myRouter }) 5.測試 修改位址列中的路由地址，測試看載入的元件是否正確
注意事項： 1.先引入vue，再引入外掛 2.一定要指定router-view 3.route路由 {path:'',component:} routes 路由陣列 [] router 路由器:按照指定的路由規則去訪問對應的元件 new VueRouter
3、使用路由模組來實現頁面跳轉的方式
方式1：直接修改位址列 方式2：js this.$router.push(‘路由地址’); 方式3： 4、完成引數的傳遞
在頁面之間跳轉的時候，在有些場景下，需要同時指定引數
1.明確傳送方和接收方 list --20--> detail 1.配置接收方的路由地址 /detail --》 /detail/:index
this.router.push('/detail/20')
5、路由巢狀
在一個路由中，path對應一個component，如果這個component需要根據 不同的url再載入其他的component，稱之為路由的巢狀
舉例：比如A元件現在需要根據不同的url，載入B元件或者C元件 1.給A元件指定一個容器 2.配置路由詞典 { path:'/a', component:A, children:[ {path:'/b',component:B} ] }
需求：現在有兩個元件，分別是login/mail,建立SPA。 在此基礎上，希望mail元件 巢狀inbox/outbox/draft
補充：在設定子路由，路由匹配規則依然是適用的， 只不過路由地址為空和異常，要攜帶父元件的路由地址 /mail /mail/draft
13.搭建基於CLI開發環境的方式 1.指定一個資料夾 C:\xampp\htdocs\framework\vue\project 2.將tpls.zip拷貝到project中 3.右鍵單擊壓縮包，解壓縮到當前資料夾 4.進入到tpls 5.同時按下shift和滑鼠右鍵，選擇在此位置開啟命令列串列埠 6.執行npm install 7.執行npm start 14.axios 1.axios的get方法
export const getAjax= function (getUrl,getAjaxData) { return axios.get(getUrl, { params: { 'getAjaxDataObj1': getAjaxData.obj1,//obj1為getAjaxData的一個屬性 'getAjaxDataObj2': getAjaxData.obj2 } }) } 2.axios的post方法
export const postAjax= function (getUrl,postAjaxData) { return axios.get(postUrl, {
'postAjaxDataObj1': postAjaxData.obj1,//obj1為postAjaxData的一個屬性 'postAjaxDataObj2': postAjaxData.obj2 }) }
3.axios的攔截器 主要分為請求和響應兩種攔截器,請求攔截一般就是配置對應的請求頭資訊(適用與常見請求方法,雖然ajax的get方法沒有請求頭,但是axios裡面進行啦封裝),響應一般就是對reponse進行攔截處理,如果返回結果為[]可以轉化為0
1.請求攔截:將當前城市資訊放入請求頭中
axios.interceptors.request.use(config => { config.headers.cityCode = window.sessionStorage.cityCode //jsCookie.get('cityCode') return config },
2.響應攔截:處理reponse的結果
axios.interceptors.response.use((response) =>{ let data = response.data if(response.request.responseType === 'arraybuffer'&&!data.length){ reponse.date=0 } })