VUE詳解

漸進式框架 
聲明式渲染（無需關心如何實現）、組件化開發、客戶端路由（vue-router）、大規模的數據狀態（vuex）、構建工具（vue-cli） 
全家桶：vue.js+vue-router+vuex+vue-cli+axious

Vue核心知識點

數據驅動(主要操做的是數據) 
數據變化會致使視圖自動更新 
組件化開發

框架的模式

MVC單項的數據綁定

• 只能經過改變數據來改變視圖

MVVM 雙向的數據綁定

• 視圖發生改變，數據也會跟着變
• 數據發生改變，視圖也會跟着改變

vue的使用方式

一、採用cdn：<script src="https://unpkg.com/vue"></script> 
二、在須要的項目中安裝vue模塊 npm install vue，安裝以後導入vue.js文件

跑環境

初始化package.json文件，在項目中執行npm init -y可自動生成一個默認的package.json文件； 
因爲項目依賴的模塊較大，每次上傳下載同步都很浪費時間，因此咱們只須要上傳package.json文件，裏面寫了全部的依賴模塊，咱們同步下來以後只須要在須要的項目中打開cmd窗口執行npm install，就能夠把項目依賴的模塊下載到；

vue中數組的變異方法（能改變原數組）

若是data中屬性的值是一個數組，若是想改變數組中內容，只能使用原生的會修改原數組的方法進行修改，普通的 數組[索引]=值 不行； 
操做數組的方法：（如下方法都會修改原數組）

• unshift、push、shift、pop、splice、reverse、sort

vue中經常使用的(如下方法都爲聲明式方法，for循環爲編程式方法，能清晰的看到每一步)

• forEach、filter、map、some、every、reduce、find(ES6)

forEach，for，for in，for of的區別 
forEach：不支持返回值，只是普通的循環遍歷 
for in：key輸出的值爲字符串類型，包括把數組當成對象添加的屬性也能夠遍歷出來 
for of：只返回具備數字索引的屬性。這一點跟for…in循環也不同。（不能遍歷對象）

    let arr = [3, 5, 7];
    arr.foo = 'hello';

    for (let i in arr) {
    //for in是把arr當成對象遍歷，i是屬性名，包括arr的私有屬性
      console.log(i); // "0", "1", "2", "foo"
    }

    for (let i of arr) {
    //for of是把arr當成數組遍歷，i是數組中的每一項
      console.log(i); //  "3", "5", "7"
    }
    for of循環不會返回數組arr的foo屬性
    若是隻想拿到索引，可用keys()方法
    for (let index of ['a', 'b'].keys()) {
      console.log(index);
    }
    // 0
    // 1
    若是兩個都想拿到，可用entries()方法
    for (let (index, elem) of ['a', 'b'].entries()) {
      console.log(index, elem);
    }
    // 0 "a"
    // 1 "b"

把Vue當成對象添加的私有方法

全局過濾器：Vue.filter(方法名,方法)；至關於給全局過濾器中增長了一個方法（一次只能增長一個）

 Vue.filter('my',data=>{return data})；
 //頁面中使用
 <div id="app">
   {{count|my}}
 </div>

建立一個全局組件：Vue.component(自定義標籤名,須要配置的參數)

//js代碼
Vue.component('my-hand',{
        template:'<h3>{{msg}}</h3>',
        data(){
            return {msg:'我很英俊'}
        }
    });
 let vm=new Vue({
    el:'#app'
 })
 //頁面中使用
 <div id="app">
    <my-hand></my-hand>
 </div>

初始化vue時傳入對象中的屬性

el：

表示vue的屬性和方法對哪一個DOM根元素起做用（對它的後代元素也起做用）

data ：

data中的內容表示須要雙向綁定時用到的數據，寫在data中的屬性都會掛載到當前Vue的實例上；（能夠直接用vm.msg來調用）；

methods ：

methods中的方法也將掛載到Vue的實例上。能夠直接經過vm實例訪問這些方法，或者在指令表達式中使用。方法中的 this 自動綁定爲 Vue的實例。 
在指令表達式中使用方法的時候，若是方法名後面不寫括號，則會默認傳入事件對象MouseEvent。寫括號表明要傳遞參數，而不是直接執行，要手動傳入事件對象$event。 
注意：

• 一、methods中的方法名不能和data中的變量名同樣，由於都會掛載到vue的實例上，重名會報錯
• 二、不該該使用箭頭函數來定義method中的方法，由於使用箭頭函數會改變函數中的this，而咱們要保證方法中的this都是vue的實例
• 三、{{}}中執行method中的方法，方法後面必需要加（），才表明執行

filters：

容許你在filters中定義本身的過濾器，可被用於一些常見的文本格式化。過濾器能夠用在兩個地方：雙花括號中和 v-bind 表達式 (後者從 2.1.0+ 開始支持)。過濾器應該被添加在 JavaScript 表達式的尾部，由「管道」符號「｜」來指示； 
注意: 
一、filters方法中的this都是window 
二、｜後面的方法執行的時候，會默認的把｜以前的值看成第一個參數傳遞給｜後面的方法 ; 
三、filters中的方法在{{}}中執行的時候，能夠不寫括號；

  <!-- 在雙花括號中 -->
    {{ message | toFixed(2)}}//toFixed方法執行時不改變原數據，只是改變message的顯示效果
    <!-- 在 `v-bind` 中 -->
    <div v-bind:id="rawId | toFixed"></div>
    filters: {
       toFixed(val,pra){
           return '￥'+val.toFixed(pra);
       }
    }

computed

計算屬性（會有緩存），不是方法：某一個屬性的值依賴於其餘值的改變而改變時，可以使用computed，把須要綁定的屬性寫在computed中，只會跟依賴的值產生關係。屬性中默認會有set和get方法，若是把計算屬性寫成函數，則默認只調用get方法（get方法必需要有返回值）；computed不支持異步；

watch:

監聽屬性（默認只監控所給屬性的第一層）：watch中的方法名應該與data中的要監聽的屬性名相同。只有當監聽的值發生變化的時候纔會觸發對應的方法；watch支持異步，當須要異步的時候，watch還支持設置中間狀態；若是想要深度監控，則須要寫爲對象的形式，而且修改deep：true來實現深度監控；

計算屬性和方法的區別：

一、緩存：計算屬性會根據依賴的屬性（歸vue管理的數據，能夠響應式的變化）進行緩存，只有在它的相關依賴發生改變時纔會從新求值； 
二、在{{}}中使用的時候，方法名後必需要加（）來執行，而計算屬性若是不須要傳遞參數，則不須要寫（）； 
三、方法是無論數據有沒有發生改變，都會從新計算，且get方法必須有返回值；

何時用computed何時用watch：

當數據依賴於多個值的改變而改變時，咱們就須要用computed；

 <div id="app">
        <input type="text" v-model="val"> {{fullName}}
    </div>
    let vm=new Vue({
            el:'#app',
            data:{
                val:'',
                firstName:'zfpx',
                lastName:'zy'
            },
            computed:{
                fullName(){
                //只要依賴的其中一個值改變，就會執行此方法；
                    return this.firstName+this.val+this.lastName;
                }
            }
        });

當監聽的值發生改變的時候，數據須要跟着變，就要用watch，須要異步操做的時候，就必須用watch；

let vm=new Vue({
        el:'#app',
        data:{
            val:'',
            firstName:'zfpx',
            lastName:'zy',
            fullName:''
        },
        watch:{
  //val的值改變了纔會觸發下面的方法,並且會默認傳入兩個參數，新的值和老的值
            val(newV,oldV){
                this.fullName=this.firstName+this.val+this.lastName;
            }
       //若是寫成一個函數的形式（如上的形式），則只會監控第一層級屬性對應的值，第一層級的值發生改變纔會觸發函數執行；若是要實現深度監控，則要寫成以下對象的形式,將deep深度監控屬性賦值爲true；
           val:{
           //監控時發生改變就會觸發此方法，方法名必須是handler
              handler(newV){
                 localStorage.setItem('todo',JSON.stringify(newV));
              },
              deep:true
            }
        }
    });

{{}}：其中可放表達式、能夠放賦值運算、計算、三元運算符（儘可能少寫邏輯運算）

vue的實例擁有的屬性

此處的this是vue的實例 
this.$data vm上的響應式的數據，是個對象 
this.$watch 監控 
this.$el 掛載的DOM根元素 
this.$set 後加的屬性實現響應式的變化 
this.$nextTick(()=>{}) 異步方法，渲染DOM完成後獲取到須要的最新的數據 
this.$refs.xxx 獲取ref值爲xxx的vue對象（可經過this.$refs.xxx.$el獲取DOM元素）（經過v-for循環出來的能夠獲取多個，不然只能獲取一個）

 儘管有 prop 和事件，可是有時仍然須要在 JavaScript 中直接訪問子組件。爲此可使用 ref 爲子組件指定一個引用的值。如：
    <div id="parent">
         <user-profile ref="profile"></user-profile>
    </div>

爲何data中的屬性會出現響應式的變化?

vue會循環data中的屬性，依次增長getter和setter方法，來實現響應式的變化。（只有data中的屬性會被增長getter和setter方法，下面的例子中屬性a中的school屬性不會被增長） 
使用實例.$set能夠給對象添加響應式的數據變化例如：vm.$set(vm.a,'school',1)

let vm=new Vue({
        el:'#app-3',
        data:{
            msg:'zhufeng'，
            a:{school:''}
        }
        methods:{
        }
    });