摘要：框架和庫(kù)的區(qū)別框架有著自己的語(yǔ)法特點(diǎn)都有對(duì)應(yīng)的各個(gè)模塊庫(kù)專注于一點(diǎn)框架的好處提到代碼的質(zhì)量，開發(fā)速度提高代碼的復(fù)用率降低模塊之間的耦合度高內(nèi)聚低耦合思維模式的轉(zhuǎn)換從操作的思維模式切換到以數(shù)據(jù)為主概述是一個(gè)漸進(jìn)式的構(gòu)建用戶界面的框架小到的簡(jiǎn)單

1.框架和庫(kù)的區(qū)別：

框架：framework 有著自己的語(yǔ)法特點(diǎn)、都有對(duì)應(yīng)的各個(gè)模塊
庫(kù) library 專注于一點(diǎn)

框架的好處：

1.提到代碼的質(zhì)量，開發(fā)速度
2.提高代碼的復(fù)用率
3.降低模塊之間的耦合度
（高內(nèi)聚低耦合）

UI：user interface
GUI : graphical user interface
CLI : command line interface
API : application interface

思維模式的轉(zhuǎn)換：

從操作DOM的思維模式 切換到 以數(shù)據(jù)為主

2.Vue概述

1、what    
    是一個(gè)漸進(jìn)式的構(gòu)建用戶界面的js框架
2、where
    小到的簡(jiǎn)單的表單處理，大到復(fù)雜的數(shù)據(jù)操作比較頻繁的單頁(yè)面應(yīng)用程序
3、why
    1.方便閱讀的中文文檔
    2.容易上手 （學(xué)習(xí)曲線比較緩和）
    3.體積小
    4.基于組件化的開發(fā)方式
    5.代碼的可讀性、可維護(hù)性得到了提高
4、how
    工作方式：可以通過(guò)豐富的指令擴(kuò)展模板，可以通過(guò)各種各樣的插件來(lái)增強(qiáng)功能

    搭建環(huán)境：
    方式1
         全局安裝 vue-cli
        $ npm install --global vue-cli
        # 創(chuàng)建一個(gè)基于 webpack 模板的新項(xiàng)目
        $ vue init webpack my-project
        # 安裝依賴，走你
        $ cd my-project
        $ npm install
        $ npm run dev
    方式2:
        直接引入對(duì)應(yīng)的js文件

3.Vue中基礎(chǔ)知識(shí)

1、雙花括號(hào)
    mustache(胡子)/interpolation（插值表達(dá)式）

    語(yǔ)法：
    <any>{{表達(dá)式}}any>
    作用：
    將表達(dá)式執(zhí)行的結(jié)果 輸出當(dāng)調(diào)用元素的innerHTML中；還可以將數(shù)據(jù)綁定到視圖

    

2、指令-循環(huán)指令
    基本語(yǔ)法1：
    <any v-for="tmp in array">any>
    基本語(yǔ)法2：
    <any v-for="(value,index) in array">any>
    
    作用：
    在遍歷array這個(gè)集合時(shí)，將臨時(shí)變量保存在tmp中，創(chuàng)建多個(gè)any標(biāo)簽

3、指令-選擇指令
    語(yǔ)法：
      <any v-if="表達(dá)式">any>
      <any v-else-if="表達(dá)式">any>
      <any v-else="表達(dá)式">any>
    作用：
      根據(jù)表達(dá)式執(zhí)行結(jié)果的真假，來(lái)決定是否要將當(dāng)前的這個(gè)元素 掛載到DOM樹


4、指令-事件綁定
    語(yǔ)法：
        <any v-on:eventName="handleEvent">any>
    作用：
        給指定的元素 將handleEvent的方法綁定給指定eventName事件
    

5、指令-屬性綁定
  基本語(yǔ)法：
    <any v-bind:myProp="表達(dá)式">any>
    補(bǔ)充，支持簡(jiǎn)寫：
    <any :myProp="表達(dá)式">any>
  作用：
    將表達(dá)式執(zhí)行的結(jié)果 綁定 到當(dāng)前元素的myProp屬性

    <img v-bind:src="img/+myImg" alt="">
   動(dòng)態(tài)樣式綁定
    <p :style="{backgroundColor:myBGColor}">動(dòng)態(tài)樣式綁定p>

   動(dòng)態(tài)樣式類綁定
      <h1 :class="{myRed:false}">動(dòng)態(tài)樣式類的綁定h1>

6、指令-雙向數(shù)據(jù)綁定
    方向1：數(shù)據(jù)綁定到視圖
    方向2：將視圖中（表單元素）用戶操作的結(jié)果綁定到數(shù)據(jù)

    基本語(yǔ)法:
      <表單元素 v-model="變量">
      表單元素>

4.組件化

所謂的組件化，就像玩積木一樣，把封裝的組件進(jìn)行復(fù)用,把積木（組件）拼接在一起，構(gòu)成一個(gè)復(fù)雜的頁(yè)面應(yīng)用程序。

組件樹就是由各個(gè)組件構(gòu)成的一種數(shù)據(jù)結(jié)構(gòu)，它存在的意義是為了幫梳理應(yīng)用程序

1、組件的創(chuàng)建
  全局組件
    Vue.component(my-com,{
      template:`
        <h2>it is a headerh2>
      `
    })
      局部組件
    new Vue({
        components:{
            my-footer:{
           template:
         }
        }
    })
2、組件使用
    作為普通的標(biāo)簽去使用
    <my-com>my-com>


3、注意事項(xiàng)
    1.組件的id和使用方式 遵循烤串式命名方式：a-b-c 
    2.如果一個(gè)組件 要渲染多個(gè)元素，將多個(gè)元素放在一個(gè)頂層標(biāo)簽中，比如div、form
    3.全局組件可以用在id為example的范圍內(nèi)的任何一個(gè)組件內(nèi)部，直接調(diào)用可以；但是局部組件只能在父模板中直接調(diào)用

5.自定義指令

1、創(chuàng)建和使用
 Vue.directive(change,{
    bind:function(el,bindings){
    //首次調(diào)用
    },
    update:function(el,bindings){
    //只要是有數(shù)據(jù)變化，都會(huì)調(diào)用
    },
    unbind:function(){
    //解綁
    }
 })
 <any v-change="count">any>

6.過(guò)濾器

過(guò)濾器是針對(duì)一些數(shù)據(jù) 進(jìn)行篩選、過(guò)濾、格式化等相關(guān)的處理，變成我們想要的數(shù)據(jù)

過(guò)濾器的本質(zhì) 就是一個(gè)帶有參數(shù)帶有返回值的方法

Vue1. 支持內(nèi)置的過(guò)濾器，但是Vue2. 就不再內(nèi)置過(guò)濾器，但是支持自定義過(guò)濾器。

1、過(guò)濾器的創(chuàng)建和使用

1.創(chuàng)建
   Vue.filter(
    myFilter,
    function(myInput){
       //myInput是在調(diào)用過(guò)濾器時(shí)，管道前表達(dá)式執(zhí)行的結(jié)果
       //針對(duì)myInput，按照業(yè)務(wù)需求做處理
       //返回
       return 處理后的結(jié)果
    })

2.使用
    <any>{{expression | myFilter}}any>

2、如何在調(diào)用過(guò)濾器時(shí)，完成參數(shù)的發(fā)送和接受

1.發(fā)送
<any>{{expression | myFilter(參數(shù)1，參數(shù)2)}}any>

2.接受
Vue.filter(myFilter,function(myInput，參數(shù)1，參數(shù)2){
    return 處理后的結(jié)果
})

7.復(fù)合組件

知識(shí)回顧：
  Vue.component(my-header,{
    template:`<div>div>`
  });

  <my-header>my-header>

 復(fù)合組件：并不是新的概念，就是一個(gè)組件，只不過(guò)這個(gè)組件中 可以調(diào)用其他的組件

 注意事項(xiàng)：
  1.組件要渲染的內(nèi)容 取決于在定義組件時(shí)template
  
  <my-list>
    <my-item>my-item>
  my-list>
  效果是出不來(lái)的
  2.允許在一個(gè)組件中，直接來(lái)調(diào)用另外一個(gè)組件

8.生命周期

四個(gè)階段：
    create 準(zhǔn)備工作 （數(shù)據(jù)的初始化。。。）
    mount  掛載前后針對(duì)元素進(jìn)行操作
    update 數(shù)據(jù)發(fā)生變化，
    destroy 清理工作 (關(guān)閉定時(shí)器、集合清空..)

    beforeCreate/created
    beforeMount/mounted
    beforeUpdate/updated
    beforeDestroy/destroyed

9.常用屬性

1、watch
       1. 表單元素的雙向數(shù)據(jù)綁定
   v-model="myValue"
   2.監(jiān)聽
    watch:{
    myValue:function(newValue,oldValue){
    
    }
    }
2、computed
    計(jì)算屬于是用于在模板中，搞定復(fù)雜的業(yè)務(wù)邏輯，因?yàn)橛幸蕾嚲彺妗?    1.指定計(jì)算屬性
        computed:{
          myHandle:function(){
           return 數(shù)據(jù)
          }
        }

    2.調(diào)用
        <any>{{myHandle}}any>

10.組件間通信

1、父與子通信 （props down）
    1.發(fā)送
        <son myName=zhangsan>
        son>
    2.接受
        到son組件：
        Vue.component(son,{
          props:[myName],
          template:`
           <p>{{myName}}p>
          `
        })
    
2、子與父通信 (events up)
     1.綁定
    methods:{
     handleEvent:function(msg){}
    }
    <son @customEvent="handleEvent">son>
    2.觸發(fā)
    子組件內(nèi)部：
    this.$emit(‘customEvent’,100);

3、ref(reference 引用/參考 外號(hào))
 幫助在父組件中 得到子組件中的數(shù)據(jù)、方法。
    1.指定ref屬性
    <son ref="mySon">son>

    2.根據(jù)ref得到子組件實(shí)例
    this.$refs.mySon

4、$parent
    this.$parent得到父組件的實(shí)例

5、兄弟組件通信
    1.var bus = new Vue();
    2.接收方
    bus.$on(eventName,function(msg){})
    3.發(fā)送方
    bus.$emit(eventName,123);

11.補(bǔ)充組件創(chuàng)建的方式

1、直接在template屬性中指定模板內(nèi)容
    1.全局組件
    Vue.component
    2.局部組件
    {
      components:{
        my-footer：{template:``}
      }
    }
2、.vue結(jié)尾的文件
    <template>template>
    <script>script>
    <style>style>
3、多帶帶指定一個(gè)模板內(nèi)容
    <script
    id=myContent
    type=text/x-template>
    script>

    Vue.component(,{
      template:#myContent
    })

12.路由模塊

路由模塊的本質(zhì) 就是建立起url和頁(yè)面之間的映射關(guān)系

1、SPA的基本概念和工作原理

SPA：single page application 單一頁(yè)面應(yīng)用程序，只有一個(gè)完整的頁(yè)面；
它在加載頁(yè)面時(shí)，不會(huì)加載整個(gè)頁(yè)面，而是只更新某個(gè)指定的容器中內(nèi)容。
比如Gmail、移動(dòng)的webApp


工作原理：
1.解析地址欄 
    完整的頁(yè)面地址、路由地址
2.根據(jù)路由地址 從路由詞典中找到真正的要加載的頁(yè)面
3.發(fā)起ajax請(qǐng)求 
    請(qǐng)求要加載的頁(yè)面
4.像指定的容器中 插入加載來(lái)的頁(yè)面

2、路由模塊的基本使用

專業(yè)術(shù)語(yǔ)： 
    router路由器 
    route路由
    routes 路由數(shù)組（路由詞典）
1.引入vue.js vue-router.js
2.指定一個(gè)容器
<router-view>router-view>
3.創(chuàng)建業(yè)務(wù)所需要用到的組件類
        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.測(cè)試
    修改地址欄中的路由地址，測(cè)試看加載的組件是否正確

注意事項(xiàng)：
 1.先引入vue，再引入插件
 2.一定要指定router-view
 3.route路由 {path:,component:}
  routes 路由數(shù)組 []
  router 路由器:按照指定的路由規(guī)則去訪問(wèn)對(duì)應(yīng)的組件 new VueRouter

3、使用路由模塊來(lái)實(shí)現(xiàn)頁(yè)面跳轉(zhuǎn)的方式

方式1：直接修改地址欄
方式2：js
this.$router.push(‘路由地址’);
方式3：
 <router-link 
 to="路由地址">router-link>

4、完成參數(shù)的傳遞

在頁(yè)面之間跳轉(zhuǎn)的時(shí)候，在有些場(chǎng)景下，需要同時(shí)指定參數(shù)

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

this.$route.params.index
2.發(fā)送
routerLink to="/detail/20"
this.$router.push(/detail/20)

5、路由嵌套

在一個(gè)路由中，path對(duì)應(yīng)一個(gè)component，如果這個(gè)component需要根據(jù)
不同的url再加載其他的component，稱之為路由的嵌套

舉例：比如A組件現(xiàn)在需要根據(jù)不同的url，加載B組件或者C組件
1.給A組件指定一個(gè)容器
  <router-view>router-view>
2.配置路由詞典
  {
    path:/a,
    component:A,
    children:[
      {path:/b,component:B}
    ]
  }

  需求：現(xiàn)在有兩個(gè)組件，分別是login/mail,建立SPA。
  在此基礎(chǔ)上，希望mail組件 嵌套inbox/outbox/draft

  補(bǔ)充：在設(shè)置子路由，路由匹配規(guī)則依然是適用的，
  只不過(guò)路由地址為空和異常，要攜帶父組件的路由地址
  /mail /mail/draft

13.搭建基于CLI開發(fā)環(huán)境的方式

1.指定一個(gè)文件夾
C:xampphtdocsframeworkvueproject
2.將tpls.zip拷貝到project中 
3.右鍵單擊壓縮包，解壓縮到當(dāng)前文件夾
4.進(jìn)入到tpls
5.同時(shí)按下shift和鼠標(biāo)右鍵，選擇在此位置打開命令行串口
6.執(zhí)行npm install
7.執(zhí)行npm start

14.axios

1.axios的get方法

export const getAjax= function (getUrl,getAjaxData) {
  return axios.get(getUrl, {
    params: {
      getAjaxDataObj1: getAjaxData.obj1,//obj1為getAjaxData的一個(gè)屬性
      getAjaxDataObj2: getAjaxData.obj2
    }
  })
}

2.axios的post方法

export const postAjax= function (getUrl,postAjaxData) {
return axios.get(postUrl, {
  postAjaxDataObj1: postAjaxData.obj1,//obj1為postAjaxData的一個(gè)屬性
  postAjaxDataObj2: postAjaxData.obj2
})
}

3.axios的攔截器
主要分為請(qǐng)求和響應(yīng)兩種攔截器,請(qǐng)求攔截一般就是配置對(duì)應(yīng)的請(qǐng)求頭信息(適用與常見請(qǐng)求方法,雖然ajax的get方法沒有請(qǐng)求頭,但是axios里面進(jìn)行啦封裝),響應(yīng)一般就是對(duì)reponse進(jìn)行攔截處理,如果返回結(jié)果為[]可以轉(zhuǎn)化為0

1.請(qǐng)求攔截:將當(dāng)前城市信息放入請(qǐng)求頭中

axios.interceptors.request.use(config => {
config.headers.cityCode = window.sessionStorage.cityCode //jsCookie.get(‘cityCode’)
return config
},

2.響應(yīng)攔截:處理reponse的結(jié)果

axios.interceptors.response.use((response) =>{
  let data = response.data
  if(response.request.responseType === arraybuffer&&!data.length){
    reponse.date=0
  }
})

轉(zhuǎn)載出處：Web前端開發(fā) » 前端知識(shí)點(diǎn)總結(jié)——VUE