VUE學習總結

時間 2019-11-25

標籤 vue 學習總結简体版

原文原文鏈接

VUE學習總結

文檔：https://cn.vuejs.org/v2/guide/css

Webstorm的一些經常使用快捷鍵：
1. ctrl + shift + n: 打開工程中的文件，目的是打開當前工程下任意目錄的文件。
2. ctrl + j: 輸出模板
3. ctrl + b: 跳到變量申明處
4. ctrl + alt + T: 圍繞包裹代碼(包括zencoding的Wrap with Abbreviation)
5. ctrl + []: 匹配 {}[]
6. ctrl + F12: 能夠顯示當前文件的結構
7. ctrl + x: 剪切(刪除)行，不選中，直接剪切整個行，若是選中部份內容則剪切選中的內容
8. alt + left/right:標籤切換
9. ctrl + r: 替換
10. ctrl + shift + up: 行移動
11. shift + alt + up: 塊移動(if(){},while(){}語句塊的移動)
12. ctrl + d: 行復制
13. ctrl + shift + ]/[: 選中塊代碼
14. ctrl + / : 單行註釋
15. ctrl + shift + / : 塊註釋
16. ctrl + shift + i : 顯示當前CSS選擇器或者JS函數的詳細信息
17. ctrl + '-/+': 能夠摺疊項目中的任何代碼塊，它不是選中摺疊，而是自動識別摺疊。
18. ctrl + '.': 摺疊選中的代碼的代碼。
ctrl+/ 單行註釋
ctrl+shift+/塊註釋
ctrl+shift+ +/-展開/摺疊
ctrl+alt+L 格式化代碼
ctrl+shift+ up/down 上下移動句子
Alt+回車導入包,自動修正
Ctrl+N 查找類
Ctrl+Shift+N 查找文件
Ctrl+Alt+L 格式化代碼
Ctrl+Alt+O 優化導入的類和包
Alt+Insert 生成代碼(如get,set方法,構造函數等)
Ctrl+E或者Alt+Shift+C 最近更改的代碼
Ctrl+R 替換文本
Ctrl+F 查找文本
Ctrl+Shift+Space 自動補全代碼
Ctrl+空格代碼提示
Ctrl+Alt+Space 類名或接口名提示
Ctrl+P 方法參數提示
Ctrl+Shift+Alt+N 查找類中的方法或變量
Alt+Shift+C 對比最近修改的代碼
Shift+F6 重構-重命名
Ctrl+Shift+先上鍵
Ctrl+X 刪除行
Ctrl+D 複製行
Ctrl+/ 或 Ctrl+Shift+/ 註釋（// 或者/*...*/ ）
Ctrl+J 自動代碼
Ctrl+E 最近打開的文件
Ctrl+H 顯示類結構圖
Ctrl+Q 顯示註釋文檔
Alt+F1 查找代碼所在位置
Alt+1 快速打開或隱藏工程面板
Ctrl+Alt+ left/right 返回至上次瀏覽的位置
Alt+ left/right 切換代碼視圖
Alt+ Up/Down 在方法間快速移動定位
Ctrl+Shift+Up/Down 代碼向上/下移動。
F2 或Shift+F2 高亮錯誤或警告快速定位
代碼標籤輸入完成後，按Tab，生成代碼。
選中文本，按Ctrl+Shift+F7 ，高亮顯示全部該文本，按Esc高亮消失。
Ctrl+W 選中代碼，連續按會有其餘效果
選中文本，按Alt+F3 ，逐個往下查找相同文本，並高亮顯示。
Ctrl+Up/Down 光標跳轉到第一行或最後一行下
Ctrl+B 快速打開光標處的類或方法

html

1. Vue.js是什麼?
    1). 一位華裔前Google工程師(尤雨溪)開發的前端js庫
    2). 做用: 動態構建用戶界面
    3). 特色:
        * 遵循MVVM模式
        * 編碼簡潔, 體積小, 運行效率高, 移動/PC端開發
        * 它自己只關注UI, 能夠輕鬆引入vue插件和其它第三庫開發項目
    4). 與其它框架的關聯:
        * 借鑑angular的模板和數據綁定技術
        * 借鑑react的組件化和虛擬DOM技術
    5). vue包含一系列的擴展插件(庫):
        * vue-cli: vue腳手架
        * vue-resource(axios): ajax請求
        * vue-router: 路由
        * vuex: 狀態管理
        * vue-lazyload: 圖片懶加載
        * vue-scroller: 頁面滑動相關
        * mint-ui: 基於vue的組件庫(移動端)
        * element-ui: 基於vue的組件庫(PC端)
  
# 2. 基本使用
    1). 引入vue.js
    2). 建立Vue實例對象(vm), 指定選項(配置)對象
        el : 指定dom標籤容器的選擇器
        data : 指定初始化狀態數據的對象/函數(返回一個對象)
    3). 在頁面模板中使用{{}}或vue指令
        
# 3. Vue對象的選項
## 1). el
    指定dom標籤容器的選擇器
    Vue就會管理對應的標籤及其子標籤

## 2). data
    對象或函數類型
    指定初始化狀態屬性數據的對象
    vm也會自動擁有data中全部屬性
    頁面中能夠直接訪問使用
    數據代理: 由vm對象來代理對data中全部屬性的操做(讀/寫)

## 3). methods
    包含多個方法的對象
    供頁面中的事件指令來綁定回調
    回調函數默認有event參數, 但也能夠指定本身的參數
    全部的方法由vue對象來調用, 訪問data中的屬性直接使用this.xxx

## 4). computed
    包含多個方法的對象
    對狀態屬性進行計算返回一個新的數據, 供頁面獲取顯示
    通常狀況下是至關因而一個只讀的屬性
    利用set/get方法來實現屬性數據的計算讀取, 同時監視屬性數據的變化
    如何給對象定義get/set屬性
        在建立對象時指定: get name () {return xxx} / set name (value) {}
          對象建立以後指定: Object.defineProperty(obj, age, {get(){}, set(value){}})

## 5). watch
    包含多個屬性監視的對象
    分爲通常監視和深度監視
        'xxx' : {
            deep : true,
            handler : fun(value)
        }
    另外一種添加監視方式: vm.$watch('xxx', funn)

# 4. 過渡動畫
    利用vue去操控css的transition/animation動畫
    模板: 使用<transition name='xxx'>包含帶動畫的標籤
    css樣式
        .fade-enter-active: 進入過程, 指定進入的transition
        .fade-leave-active: 離開過程, 指定離開的transition
        .xxx-enter, .xxx-leave-to: 指定隱藏的樣式
    編碼例子
        .xxx-enter-active, .xxx-leave-active {
          transition: opacity .5s
        }
        .xxx-enter, .xxx-leave-to {
          opacity: 0
        }
        
        <transition name="xxx">
          <p v-if="show">hello</p>
        </transition>
    
# 5. 生命週期
    vm/組件對象
    生命週期圖
    主要的生命週期函數(鉤子)
        created() / mounted(): 啓動異步任務(啓動定時器,發送ajax請求, 綁定監聽)
        beforeDestroy(): 作一些收尾的工做

# 6. 自定義過濾器
## 1). 理解
    對須要顯示的數據進行格式化後再顯示

## 2). 編碼
    1). 定義過濾器
        Vue.filter(filterName, function(value[,arg1,arg2,...]){
          // 進行必定的數據處理
          return newValue
        })
    2). 使用過濾器
        <div>{{myData | filterName}}</div>
        <div>{{myData | filterName(arg)}}</div>
    
# 7. vue內置指令
    v-text/v-html: 指定標籤體
        * v-text : 看成純文本
        * v-html : 將value做爲html標籤來解析
    v-if v-else v-show: 顯示/隱藏元素
        * v-if : 若是vlaue爲true, 當前標籤會輸出在頁面中
        * v-else : 與v-if一塊兒使用, 若是value爲false, 將當前標籤輸出到頁面中
        * v-show: 就會在標籤中添加display樣式, 若是vlaue爲true, display=block, 不然是none
    v-for : 遍歷
        * 遍歷數組 : v-for="(person, index) in persons"   
        * 遍歷對象 : v-for="value in person"   $key
    v-on : 綁定事件監聽
        * v-on:事件名, 能夠縮寫爲: @事件名
        * 監視具體的按鍵: @keyup.keyCode   @keyup.enter
        * 中止事件的冒泡和阻止事件默認行爲: @click.stop   @click.prevent
        * 隱含對象: $event
    v-bind : 強制綁定解析表達式  
        * html標籤屬性是不支持表達式的, 就可使用v-bind
        * 能夠縮寫爲:  :id='name'
        * :class
          * :class="a"
            * :class="{classA : isA, classB : isB}"
            * :class="[classA, classB]"
        * :style
            :style="{color : color}"
    v-model
        * 雙向數據綁定
        * 自動收集用戶輸入數據
    ref : 標識某個標籤
        * ref='xxx'
        * 讀取獲得標籤對象: this.$refs.xxx
  
# 8. 自定義指令
## 1). 註冊全局指令
    Vue.directive('my-directive', function(el, binding){
      el.innerHTML = binding.value.toUpperCase()
    })

## 2). 註冊局部指令
    directives : {
      'my-directive' : function(el, binding) {
          el.innerHTML = binding.value.toUpperCase()
      }
    }

## 3). 使用指令
    <div v-my-directive='xxx'>

模板語法：v-* 指令和 {{}} 表達式
計算屬性、監聽器:（computed屬性，watch屬性）
條件渲染：(v-if 、v-show)
列表渲染：（v-for ）
事件處理：（事件冒泡 .stop、事件阻止 .prevent）

　　　　能夠用 v-on 指令監聽 DOM 事件，並在觸發時運行一些 JavaScript 代碼。　　前端

　　　　v-on:click="counter += 1"vue

　　　　@click="counter += 1"react

表單輸入綁定： ( v-model )
生命週期方法

1. vue對象的生命週期
  1). 初始化顯示
    * beforeCreate()
    * created()
    * beforeMount()
    * mounted()
  2). 更新狀態
    * beforeUpdate()
    * updated()
  3). 銷燬vue實例: vm.$destory()
    * beforeDestory()
    * destoryed()
2. 經常使用的生命週期方法
  mounted(): 發送ajax請求, 啓動定時器等異步任務
  beforeDestory(): 作收尾工做, 如: 清除定時器

動畫

transition操做css修改樣式

   /*指定過渡樣式*/
    .xxx-enter-active, .xxx-leave-active {
      transition: opacity 1s
    }
    /*指定隱藏時的樣式*/
    .xxx-enter, .xxx-leave-to {
      opacity: 0;
    }

animation 操做css修改樣式

  .bounce-enter-active {
      animation: bounce-in .5s;
    }
    .bounce-leave-active {
      animation: bounce-in .5s reverse;
    }
    @keyframes bounce-in {
      0% {
        transform: scale(0);
      }
      50% {
        transform: scale(1.5);
      }
      100% {
        transform: scale(1);
      }
    }

https://www.bootcdn.cn/

安裝vue-cli腳手架

運行項目：

訪問http://localhost:8080/ios

設置webstorm的默認瀏覽器

把Path的路徑寫成谷歌目前所在的路徑，而且後面....的路徑也保存成谷歌如今所在的位置，就能夠了。es6

查看谷歌瀏覽器的路徑：谷歌瀏覽器點擊右鍵，屬性，把目標的地址複製在webstorm中Path裏面就能夠了。web

修改vue組件模板：ajax

步驟： settings --> file and code templates .在內容區域左側點擊vue file，修改對應的模板內容便可。vuex

const命令

基本語法

const聲明一個只讀的常量。一旦聲明，常量就會初始化且常量的值就不能改變。

const聲明的變量不得改變值，這意味着，const一旦聲明變量，就必須當即初始化，不能留到之後賦值

const的做用域與let命令相同：只在聲明所在的塊級做用域內有效。

那麼什麼是箭頭函數呢？箭頭函數又該怎麼寫呢？

基本語法：
ES6容許使用「箭頭」（=>）定義函數
var f = a = > a
//等同於
var f = function(a){
   return a;  
}

若是箭頭函數不須要參數或須要多個參數，就使用一個圓括號表明參數部分。

//無形參
var f = () => 5;
// 等同於
var f = function () { return 5 };

//多個形參
var sum = (num1, num2) => num1 + num2;
// 等同於
var sum = function(num1, num2) {
  return num1 + num2;
};

使用箭頭函數注意點：

箭頭函數有幾個使用注意點。

（1）函數體內的this對象，就是定義時所在的對象，而不是使用時所在的對象。

 1  var name = '張三'；   
 2  var person = {
 3         name:'小馬哥',
           age:18,　　
 4         fav:function(){        
 5             console.log(this)
 6             console.log(this.name)
 7         }
 8     }
 9 
10     person.fav();

咱們發現，打印的結果爲

此時this指向的是使用它的對象，也就是person對象

 var person2 = {
    name:'小馬哥',
    age:18,
    fav: ()=>{
         // 當前this指向了定義時所在的對象（window）
         console.log(this);
      }
    }

 person2.fav();

打印的結果：

使用箭頭函數，它表示定義時所在的對象window。

現有數組 let arr=[1,2,3,4];

須要計算出arr內全部值的和

解答方法1：

let arr=[1,2,3,4]; let tmp=0; for(var i=0;i<arr.length;i++){ tmp+=arr[i] }

//reduce 收斂 4個參數返回的是疊加後的結果原數組不發生變化
// es6語法：
// array.reduce(function(total, currentValue, currentIndex, arr), initialValue)
// function(total,currentValue, index,arr): 必需。用於執行每一個數組元素的函數。
// 函數參數:
// total 必需。初始值, 或者計算結束後的返回值。
// currentValue 必需。當前元素

// currentIndex 可選。當前元素的索引
// arr 可選。當前元素所屬的數組對象。
// initialValue 可選。傳遞給函數的初始值

const array1 = [1, 2, 3, 4];
const preTotle= (accumulator, currentValue) => accumulator + currentValue;

// 1 + 2 + 3 + 4
console.log(array1.reduce(preTotle));
// expected output: 10

// 5 + 1 + 2 + 3 + 4
console.log(array1.reduce(preTotle, 5)); //5 是初始值，意思就是在5的基礎上將數組的每一個元素加到一塊兒
// expected output: 15

vue的計算屬性寫法：

console.log([1,2,3,4,5,6].reduce((totle,todo)=> totle+todo))

經過 localStorage 存儲數據到本地：

 data(){
   return{
     // items:[
     //     {title:"吃飯",complete:false},
     //     {title:"睡覺",complete:true},
     //     {title:"coding",complete:false}
     //   ]
     items: JSON.parse(window.localStorage.getItem("items_key") || "[]")
   }
 },
  watch:{
   items:{
     deep:true, // 深度監聽
     handler:function (value) {
       // 將最新的json數據，保存到localStorage
       window.localStorage.setItem("items_key",JSON.stringify(value))
     }
   }
}