前端知識點總結——VUE

轉載：www.bslxx.com/m/view.php?…

1.框架和庫的區別： 框架：framework 有着本身的語法特色、都有對應的各個模塊 庫 library 專一於一點

框架的好處：

1.提到代碼的質量，開發速度 2.提升代碼的複用率 3.下降模塊之間的耦合度 （高內聚低耦合） UI：user interface GUI : graphical user interface CLI : command line interface API : application interface

思惟模式的轉換：

從操做DOM的思惟模式 切換到 以數據爲主 2.Vue概述 一、what
是一個漸進式的構建用戶界面的js框架 二、where 小到的簡單的表單處理，大到複雜的數據操做比較頻繁的單頁面應用程序 三、why 1.方便閱讀的中文文檔 2.容易上手 （學習曲線比較緩和） 3.體積小 4.基於組件化的開發方式 5.代碼的可讀性、可維護性獲得了提升 四、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中基礎知識 一、雙花括號 mustache(鬍子)/interpolation（插值表達式）

語法：
<any>{{表達式}}</any>
做用：
將表達式執行的結果 輸出當調用元素的innerHTML中；還能夠將數據綁定到視圖
複製代碼

二、指令-循環指令 基本語法1： 基本語法2：

做用：
在遍歷array這個集合時，將臨時變量保存在tmp中，建立多個any標籤
複製代碼

三、指令-選擇指令 語法： 做用： 根據表達式執行結果的真假，來決定是否要將當前的這個元素 掛載到DOM樹

四、指令-事件綁定 語法： 做用： 給指定的元素 將handleEvent的方法綁定給指定eventName事件

五、指令-屬性綁定 基本語法： 補充，支持簡寫： 做用： 將表達式執行的結果 綁定 到當前元素的myProp屬性

<img v-bind:src="'img/'+myImg" alt="">
複製代碼

動態樣式綁定

動態樣式綁定

動態樣式類綁定

動態樣式類的綁定

六、指令-雙向數據綁定 方向1：數據綁定到視圖 方向2：將視圖中（表單元素）用戶操做的結果綁定到數據

基本語法:
  <表單元素 v-model="變量">
  </表單元素>
複製代碼

4.組件化 組件：組件就是可被反覆使用的，帶有特定功能的視圖

所謂的組件化，就像玩積木同樣，把封裝的組件進行復用,把積木（組件）拼接在一塊兒，構成一個複雜的頁面應用程序。

組件樹就是由各個組件構成的一種數據結構，它存在的意義是爲了幫梳理應用程序

一、組件的建立 全局組件 Vue.component('my-com',{ template:<h2>it is a header</h2> }) 局部組件 new Vue({ components:{ 'my-footer':{ template:'' } } }) 二、組件使用 做爲普通的標籤去使用

三、注意事項 1.組件的id和使用方式 遵循烤串式命名方式：a-b-c 2.若是一個組件 要渲染多個元素，將多個元素放在一個頂層標籤中，好比div、form 3.全局組件能夠用在id爲example的範圍內的任何一個組件內部，直接調用能夠；可是局部組件只能在父模板中直接調用

5.自定義指令 一、建立和使用 Vue.directive('change',{ bind:function(el,bindings){ //首次調用 }, update:function(el,bindings){ //只要是有數據變化，都會調用 }, unbind:function(){ //解綁 } })

6.過濾器 過濾器是針對一些數據 進行篩選、過濾、格式化等相關的處理，變成咱們想要的數據

過濾器的本質 就是一個帶有參數帶有返回值的方法

Vue1. 支持內置的過濾器，可是Vue2. 就再也不內置過濾器，可是支持自定義過濾器。

一、過濾器的建立和使用

1.建立 Vue.filter( 'myFilter', function(myInput){ //myInput是在調用過濾器時，管道前表達式執行的結果 //針對myInput，按照業務需求作處理 //返回 return '處理後的結果' })

2.使用 {{expression | myFilter}} 二、如何在調用過濾器時，完成參數的發送和接受

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.經常使用屬性 一、watch 1. 表單元素的雙向數據綁定 v-model="myValue" 2.監聽 watch:{ myValue:function(newValue,oldValue){

}
}
複製代碼

二、computed 計算屬因而用於在模板中，搞定複雜的業務邏輯，由於有依賴緩存。 1.指定計算屬性 computed:{ myHandle:function(){ return 數據 } }

2.調用
    <any>{{myHandle}}</any>
複製代碼

10.組件間通訊 一、父與子通訊 （props down） 1.發送 2.接受 到son組件： Vue.component('son',{ props:['myName'], template:<p>{{myName}}</p> })

二、子與父通訊 (events up) 1.綁定 methods:{ handleEvent:function(msg){} } <son @customEvent="handleEvent"> 2.觸發 子組件內部： this.$emit(‘customEvent’,100);

三、ref(reference 引用/參考 外號) 幫助在父組件中 獲得子組件中的數據、方法。 1.指定ref屬性

2.根據ref獲得子組件實例
this.$refs.mySon
複製代碼

四、parent獲得父組件的實例

五、兄弟組件通訊 1.var bus = new Vue(); 2.接收方 bus.emit('eventName',123); 11.補充組件建立的方式 一、直接在template屬性中指定模板內容 1.全局組件 Vue.component 2.局部組件 { components:{ 'my-footer'：{template:``} } } 二、.vue結尾的文件 三、單獨指定一個模板內容

Vue.component('',{
  template:'#myContent'
})
複製代碼

12.路由模塊 路由模塊的本質 就是創建起url和頁面之間的映射關係

一、SPA的基本概念和工做原理

SPA：single page application 單一頁面應用程序，只有一個完整的頁面； 它在加載頁面時，不會加載整個頁面，而是隻更新某個指定的容器中內容。 好比Gmail、移動的webApp

工做原理： 1.解析地址欄 完整的頁面地址、路由地址 2.根據路由地址 從路由詞典中找到真正的要加載的頁面 3.發起ajax請求 請求要加載的頁面 4.像指定的容器中 插入加載來的頁面

二、路由模塊的基本使用

專業術語： 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

三、使用路由模塊來實現頁面跳轉的方式

方式1：直接修改地址欄 方式2：js this.$router.push(‘路由地址’); 方式3： 四、完成參數的傳遞

在頁面之間跳轉的時候，在有些場景下，須要同時指定參數

1.明確發送方和接收方 list --20--> detail 1.配置接收方的路由地址 /detail --》 /detail/:index

this.router.push('/detail/20')

五、路由嵌套

在一個路由中，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 } })