vue.js基礎知識總結

初始化一個項目

• npm init -y

安裝一些依賴

• npm install 名稱 --save

• 例如 npm install vue axios bootstrap --save

• --save 表示開發和上線都要用

• --save dev 表示開始時候用，上線丟掉

vue總結

1.指令

• v-show 切換顯示隱藏，頻繁顯示使用

• v-if 根據條件語句能夠顯示隱藏，不頻繁顯示隱藏使用

• v-else 前面有v-if 配合使用，若是前面v-if不成立狀況下

• v-model 雙向數據綁定的關鍵所在，視圖變化

• v-cloak 防止閃爍css中定義一下[v-cloak]{display:none}

• v-once 控制綁定的內容不會再次被監測變化一般是配合v-model使用

• v-html 解析數據裏面的標籤，插入到綁定節點裏面去

• v-text 綁定數據 ，和{{}}等價，但能夠防閃爍

• v-for 循環 語法- 不帶索引寫法 item in arr 語法二 帶索引寫法 (item,index) in arr v-for能夠嵌套

• v-on 用於監聽dom事件 ，簡寫@

• v-bind 用於綁定屬性 ，簡寫:

• v-style 寫內嵌樣式，基本沒有什麼做用

阻止冒泡

• e.cancelBubble=true;

• e.stopPropagation();

• @click.stop

修飾符

• 時間後面能夠加一些修飾符號

• @click.stop 阻止冒泡

• @click.capture 時間捕獲，先捕獲到目標再冒泡

• @click.self 只有在本身身上點擊纔會觸發函數，其餘冒泡，會跳過這個函數

• @click.prevent 阻止默認事件，例如a標籤點擊跳轉，加上這個@click.prevent，就阻止了默認屬性href跳轉了

ref="wo" 給節點綁定一個標識

• 後期調用綁定的標識

  • this.$refs.wo

建立實例以後，再添加一個數據上去

• Vue.set(data,'sex', '男')

2 實例化一個Vue生命週期

實例化一個Vue函數 new Vue({})

• 週期裏面的屬性

• el -綁定vue用的範圍，id和class均可以

  • 語法1： 內部：el:"#app"或el:".app

  • 語法2：外部：vm.$ount(''#app')

  • 語法2：其實沒有必要外部掛載範圍

• data:{ }

  • 綁定vue全局的數據，是一個對象

  • 語法 ： data:{ }

• created(){}

  • 實例已經建立完成以後被調用的函數

  • 一般用數據請求

• methods:{}

  • ，實例上去以後,獲取真實的dom元素,調用這個對象

  • 基本全部的方法，函數都丟在這個函數裏面

• directives:{}

  • 自定義指令方法,裏面寫指令函數，名稱能夠不帶v-;可是外部必須帶v-

    • 指令函數裏面有兩個參數，第一個（ele）是當前元素，第二個(bind)是當前元素的對象

  • 語法 directives:{auto(ele,bind){

    } }

• filters:{}

  • 過濾器,過濾管道(|)左邊值的操做

  • 過濾器裏面過濾方法auto

  • 第一個參數是左邊要過濾的值，

  • 第二個參數是過濾方法裏面傳的參數

  • 語法

  • filters:{

    auto(e,prem){   
    }

    }

• computed:{}

  • 計算屬性

  • 計算屬性裏面不支持異步編程，好比計時器呀，ajax等

    • 默認get()函數，意思就是根據別人數據，獲得本身計算的數據

    • set()函數，意思是根據本身，影響別人數據，不多用

• watch:{}

  • 監控屬性，返回回調函數

  • 監控的數據，必須和data裏面定義是同樣的

  • 默認是handler(){} 方法

  • deep:true 是深度監控，值發生變化，也能監控

• beforeDestroy(){}

  • 銷燬實例的Vue

不經常使用的vue裏面的屬性

• beforeCreate(){}

  • 數據沒有被掛載，方法也沒有被掛載的時候

  • 基本不用

• beforeMount(){}

  • 判斷有沒有el屬性，這時候，有模板template，就用模板，沒有就用#app節點內部渲染

  • 基本不用

• beforeUpdate(){}

• 當頁面數據發送變化時候，執行，前提是頁面用到了這個數據

• 基本不用 computed{} 計算屬性基本所有搞定

• destroyed(){}

  • 銷燬vue實例，

  • 基本不用

localStorage緩存

• localStorage.setItem('緩存的名字','緩存的值');

• localStorage.getItem('緩存的名字')

• 咱們日常緩存時候，將對象想變成字符串緩存JSON.stringify()

  • JSON.stringify()

    • 將一個對象變爲字符串

• 而後取出緩存數據再將字符串轉爲json對象JSON.parse()

  • JSON.parse

    • 將一個字符串變爲json對象

異步編程之一 Promise

• 解決回調地獄

• 同步請求,依次等待

• Promise 有三種狀態，成功，失敗，等待

• Promise 有兩個參數，實際上是兩個函數類型

  • 第一個參數 resolve ,表明成功

  • 第二個參數 reject 表明失敗

• Promise 自帶then方法，

  • then 方法有兩個函數

    • 第一個函數成功

    • 第二個函數失敗

數組常見操做

• reverse()倒序數組

• [1,2,3,4].reverse()

  • [4,3,2,1]

• join()

• 接收一個參數,即用做分隔符的字符串,而後返回包含全部數組項的字符串

  • ["red","green","blue"].join("|")

    • red|green|blue

• pop()

  • 從數組末尾移除最後一項,減小數組的length值,而後返回移除的項

  • [1,2,3].pop()

  • [1,2]

• concat()

  • 合併數組

  • [1,2].concat([3,4])

  • [1,2,3,4]

• map 映射

  • 結果生產一個新數組，不影響原來的數組

  console.log(arr=[1,1,3].map(function(item){
       return item+1;
  }))

  • 結果[2,2,4]，不影響上一個數組

• forEach 循環

• 循環數組

• filter 過濾

• 根據條件過濾一個數組，返回過濾後的數組

 console.log([1,2,3].filter(function(item){
        if(item>1){
        return item
    }
 }))

• 結果就是[2,3],以前的[1,2,3]就不在了

• find 查找

  • 用於找出第一個符合條件的數組元素，有就返回該元素，沒有就undefined

  console.log([1,2,3].find(function(item){
           if(item==1){
           return item;
               }
  }))

  • 結果找到 1

• includes 方法

  • 判斷當前數組是否包含某個指定的元素，若是有true,沒有false

  console.log([1,2,3].includes(1))

  • 結果true 當中包含1

• some 方法

• 判斷當前數組有沒有符合條件的，有就返回ture,沒有就false

  console.log([1,2,3,6].some(function(item){
        if(item>1){
            return item    
        }
  }))

• 結果爲true 當前有元素大於1

• every 方法

  • 判斷當前數組裏面是否是每個元素符合條件，都符合返回true,有一個不符合返回false

  console.log([1,2,3].every(function(item){
           if(item>1){
               return item        
           }
  }))

  • 結果爲false ，當前有元素1不大於1

  • reduce 方法

  • 累加結果，其實循環累加，=+

  • 有4個參數

    • 第一個參數 是當前元素上一次累加的值

    • 第二個參數 是當前元素

    • 第三個參數 是當前索引值

    • 第四個參數 是數組自己

  • 爲了每次累加沒有出現undefined,默認添加一個第一項爲0

  console.log([1,2,3].reduce(prev,next,index,arr){
           return prev+next;
  })
    

  • 過程，第一次選項值爲0,加上第一項的值爲1

    • 0+1 //1

  • 第二次，前一個累加的值爲1，加上第二項的值爲2

    • 1+2 //3

  • 第三次 前面累加的值爲3 ，加上第三項的值爲3

    • 3+3-所有長度就是3個元素，結束，此時return 最後的結果爲6

  -因此結果爲6