轉載自：http://www.bslxx.com/m/view.php?aid=1799

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：
    <any v-for="tmp in array"></any>
    基本語法2：
    <any v-for="(value,index) in array"></any>
    
    作用：
    在遍歷array這個集合時，將臨時變量保存在tmp中，創建多個any標簽

3、指令-選擇指令
    語法：
      <any v-if="表達式"></any>
      <any v-else-if="表達式"></any>
      <any v-else="表達式"></any>
    作用：
      根據表達式執行結果的真假，來決定是否要將當前的這個元素 掛載到DOM樹


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

5、指令-屬性綁定
  基本語法：
    <any v-bind:myProp="表達式"></any>
    補充，支持簡寫：
    <any :myProp="表達式"></any>
  作用：
    將表達式執行的結果 綁定 到當前元素的myProp屬性

    <img v-bind:src="‘img/‘+myImg" alt="">
   動態樣式綁定
    <p :style="{backgroundColor:myBGColor}">動態樣式綁定</p>

   動態樣式類綁定
      <h1 :class="{myRed:false}">動態樣式類的綁定</h1>

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、組件使用
    作為普通的標簽去使用
    <my-com></my-com>


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(){
    //解綁
    }
 })
 <any v-change="count"></any>

6.過濾器

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

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

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

1、過濾器的創建和使用

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

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

2、如何在調用過濾器時，完成參數的發送和接受

1.發送
<any>{{expression | myFilter(參數1，參數2)}}</any>

2.接受
Vue.filter(‘myFilter‘,function(myInput，參數1，參數2){
    return ‘處理後的結果‘
})

7.復合組件

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

  <my-header></my-header>

 復合組件：並不是新的概念，就是一個組件，只不過這個組件中 可以調用其他的組件

 註意事項：
  1.組件要渲染的內容 取決於在定義組件時template
  
  <my-list>
    <my-item></my-item>
  </my-list>
  效果是出不來的
  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.發送
        <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.觸發
    子組件內部：
    this.$emit(‘customEvent’,100);

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

    2.根據ref得到子組件實例
    this.$refs.mySon

4、$parent
    this.$parent得到父組件的實例

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

11.補充組件創建的方式

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

    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.指定一個容器
<router-view></router-view>
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：
 <router-link 
 to="路由地址"></router-link>

4、完成參數的傳遞

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

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

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

5、路由嵌套

在一個路由中，path對應一個component，如果這個component需要根據
不同的url再加載其他的component，稱之為路由的嵌套

舉例：比如A組件現在需要根據不同的url，加載B組件或者C組件
1.給A組件指定一個容器
  <router-view></router-view>
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
  }
})

前端知識點總結——VUE