vue2.0學習筆記

Vue

 

特色

• 易用（html，es5，css）
• 靈活（核心庫很小，壓縮只有20k左右，漸進式技術棧[從易到難]）
• 性能（虛擬dom）

 

注意：vue不支持ie8以及如下的版本

 

對比

1 react和vue

• 類似：只關注視圖層，只幫助咱們渲染（數據變化，從新渲染dom），使用 Virtual DOM，組件化，
• vue的不一樣：不用像react把全部的虛擬dom都寫在render函數裏，它採用傳統的dom模板，因此比react多一個指令
• vue的優點：

1.在 React 應用中，當某個組件的狀態發生變化時，它會以該組件爲根，從新渲染整個組件子樹。在 Vue 應用中，組件的依賴是在渲染過程當中自動追蹤的，因此係統能精確知曉哪一個組件確實須要被重渲染。你能夠理解爲每個組件都已經自動得到了 shouldComponentUpdate，而且沒有上述的子樹問題限制。

2.在react中全部的都是js。Vue 的總體思想是擁抱經典的 Web 技術，並在其上進行擴展。在 React 中，全部的組件的渲染功能都依靠 JSX。

• vue的劣勢：react擁有更豐富的生態圈

 

2 vue和angular

 

基礎

1 

• new Vue({})裏面傳一個配置對象，再是一個data屬性，data裏面是數據。

 

---

 

2

• el：掛載點，告訴當前應用的模板的位置(當前應用這個實例的模板的位置，讓dom模板和實例相關聯)，將這個根實例掛載到app這個dom節點上，將dom當作根實例模板。（咱們在new一個vue實例的時候，會去讀這個el裏面的全部的dom節點，把這些dom節點都當成模板）。

 

---

 

3 指令：當數據發生變化的時候，操做dom

• 指令的做用：（數據的變化映射到dom的行爲，就是作dom操做的地方，凡是帶V-的是vue提供的特殊屬性）
• v-bind：  若是屬性值是一個變量，在屬性名前面加上v-bind
• 條件： v-if:是否顯示當前的dom節點（0，false不顯示，其餘的顯示）
• 遍歷： v-for='t in todos'  t遍歷的每個對象，in關鍵字，todos遍歷的數組
• 處理用戶操做： v-on:綁定事件 v-on:click='字符串' 字符串是一個函數的引用，在一個methods配置項中進行配置，methods是用來配置模板中處理函數的地方
• 雙向綁定： v-model='value'
• 定義組件： 定義：Vue.component('todo-item', {

        template: '<li>這是個待辦項</li>'

        })

        使用：<todo-item></todo-item>

 

---

 

4 生命週期

      初始化以前

• beforeCreate:  vue實例化以前        
• created: vue實例化以後
• beforeMount：插入真實的dom以前
• mounted: 渲染以後

      初始化以後

• beforeUpdate:當數據發生改變以前，虛擬dom從新渲染以前
• updated:當數據發生改變以後
• beforeDestroy:銷燬實例以前
• destroyed：銷燬實例以後

 

---

 

5 語法

• v-html:輸出真正的 HTML。站點上動態渲染的任意 HTML 可能會很是危險，由於它很容易致使 XSS 攻擊。請只對可信內容使用 HTML 插值，毫不要對用戶提供的內容插值。
• v-once:經過使用 v-once 指令，能執行一次性地插值，當數據改變時，插值處的內容不會更新。但請留心這會影響到該節點上全部的數據綁定
• 雙花括號中僅僅用來顯示數據，加減乘除，三目運算符
• 過濾器:當咱們想要格式化顯示文本的時候，好比後臺返回來的數據是0和1，咱們須要將他轉成男和女。

 

---

 

6 class style

class:

•  第一種，class後直接跟一個變量，這個變量必須爲一個對象

     <div :class='hot'>

      hot:{

          red:ture

      }

• 對象語法 <div :class="{active:bool}"> active是class名，bool爲變量值bool意思是若是bool值爲true的話，就把key當作類名做用到當前的節點上，能夠接受多個
• 數組語法：把類放到數組中，數組中存在的就把類做用到當前的dom上，可使用三目   

style:

     <div v-bind:style="{ color: 'red', fontSize: 10+'px' }"></div>

     <div :style="[red,fs]">好睏好睏好睏，我想睡覺睡覺</div>

 

---

 

7 條件渲染

•  v-if和v-else 中間不能有第三者。
• template：當咱們想要顯示和隱藏多個dom節點的時候使用，把一個 <template> 元素當作包裝元素，並在上面使用 v-if。最終的渲染結果不會包含 <template> 元素
• v-else-if 能夠支持多選一

     <div v-if="type === 'A'">

          A

     </div>

     <div v-else-if="type === 'B'">

          B

     </div>

     <div v-else-if="type === 'C'">

          C

     </div>

     <div v-else>

          Not A/B/C

     </div  >

• key：

       Vue 會盡量高效地渲染元素，一般會複用已有元素而不是從頭開始渲染。

       若是在兩個template裏面，v-if，v-else之間裏面的dom節點相同的話，vue.js只會渲染一次第一個template裏面的dom節點，複用，切換的時候也只會改變裏面的值，上一次輸入的數據會污染下一次的輸入。固然不必定是template裏面。

      <template v-if="loginType">

         <label>Username</label>

         <input placeholder="Enter your username">

      </template>

      <template v-else>

         <label>Email</label>

         <input placeholder="Enter your email address">

      </template>

      <button v-on:click='change'>點擊</button>

     只需添加一個具備惟一值的 key 屬性便可

     <template v-if="loginType === 'username'">

        <label>Username</label>

        <input placeholder="Enter your username" key="username-input">

     </template>

     <template v-else>

        <label>Email</label>

        <input placeholder="Enter your email address" key="email-input">

     </template>

     注意, <label> 元素仍然會被高效地複用，由於它們沒有添加 key 屬性。

• v-show

     v-show改變的只是dom節點的display而已，那個元素始終被渲染並保存在dom中，不支持template和v-else。而v-if會在切換的過程當中重建和銷燬dom節點。

     v-if是惰性的，若是在初始化這個dom節點以後，若是渲染的條件爲假，就什麼也不作，直到條件變爲真的時候，纔開始渲染。而v-show得話，無論初始的條件是什麼，元素老是會被渲染。

     所以，v-if 有更高的切換開銷，而 v-show 有更高的初始渲染開銷，所以，若是須要很是頻繁地切換，則使用 v-show 較好；若是在運行時條件不太可能改變，則使用 v-if 較好。

 

---

 

8 列表渲染

• 根據一組數組的選項列表進行渲染，items是源數據數組，item是數組中的每一個對象他的別名。index是索引，從0開始。

      v-for="(item , index) in items" ,能夠與tamplate一塊兒使用。

 

• 能夠遍歷對象，value是每一個對象的屬性值，key爲每一個對象的屬性名也就是key值。index爲每一個對象的索引。

     <template v-for='(value,key,index) of oo'>

 

• 整數迭代

     <p v-for='n in 10'>{{n}}</p>

 

• v-for 和 v-if

     v-for的優先級比v-if高，也就是說先把全部數據先遍歷出來，遍歷完了以後，再調用v-if，判斷它是否被顯示。

 

• key

     <div v-for="item in items" :key="item.id"> key不能重複，這個key的做用就是當你改變數據的時候，vue可以快速的定位到你操做的哪位元素。

 

• 數組更新檢測的變化

   

    變異方法：push() pop() shift() unshift() splice() sort() reverse()

    全部的push，pop等方法都被vue進行重寫了，這是由於vue沒法檢測到數組裏面某一個對象的值發生了變化，目前js只能檢測到對象裏面的屬性變化，沒有辦法檢測這個對象發生了變化。當用vue重寫後，調用push方法，會多作一些操做，觸發視圖的更新。那麼vue是如何來進行數組方法的重寫，Array.prototype.push=function(){}，在這個函數裏面來重寫數據，觸發視圖的更新。

   

    重塑數組：filter(), concat(), slice()

    這些不會改變原始數組，但老是返回一個新數組。當使用非變異方法時，能夠用新數組替換舊數組。

 

• 顯示過濾和排序

若是你想要進行數據篩選以後再進行顯示的話，使用計算屬性。

computed:{

  AAA(){

  return this.items.filter(function(item,index){

  console.log(index);

  return item.age>=18

  })

 }

}

 

---

 

9 事件處理器

• 監聽事件：

能夠用 v-on 指令監聽 DOM 事件來觸發一些 JavaScript 代碼。

<button v-on:click="counter += 1">增長 1</button>

 

• 方法事件處理器

event對象：默認放在回調函數中的第一個參數

   1：當v-on跟的函數表達式沒有參數的時候，就把event對象放入到回調函數的第一參數

   2：當回調函數跟了參數的時候，就要手動的傳$event，<button v-on:click="al(2,$event)">註冊</button>

在react中是不能在函數表達式中傳遞任何的參數，除非是箭頭函數。

v-on:click="al"若是al函數沒有參數，不須要寫括號，若是al函數有參數，須要寫括號。

 

• 事件修飾符

      stop

      prevent

capture：把事件執行從冒泡階段切換到捕獲階段

self：當current.targrt===target，就是你點擊的元素就是綁定的那個事件的元素。觸發事件的那個dom節點就是你綁定事件的dom節點。只當事件在該元素自己（好比不是子元素）觸發時觸發回調。

once：只執行一次，當執行下一次的時候，就remove掉。

     注意：使用修飾符時，順序很重要；相應的代碼會以一樣的順序產生。所以，用 @click.prevent.self 會阻止全部的點擊，而 @click.self.prevent 只會阻止元素上的點擊。

 

• 鍵值修飾符

      .tab .enter .delete .esc .space .up .down .left .right

@keyup 原生的事件名

<input type="text" @keyup.enter='show'>

哪個鍵按下的時候，才執行對應的函數呢。

e.keyCode按鍵值

 

• 修飾鍵

     .ctrl .alt .shift .meta

 

• 滑鼠按鍵修飾符

     .left .right .middle

 

• 爲何要在html中監聽事件

     掃一眼 HTML 模板便能輕鬆定位在 JavaScript 代碼裏對應的方法。

     由於你無須在 JavaScript 裏手動綁定事件，僅僅只須要在你的ViewModel裏面寫函數，不須要調用綁定事件這些方法，讓你的ViewModel顯得很純粹。

     當一個 ViewModel 被銷燬時，全部的事件處理器都會自動被刪除。你無須擔憂如何本身清理它們。

 

---

 

10 表單控件綁定

v-model

• 文本

     <input v-model="message" placeholder="edit me">

     <p>Message is: {{ message }}</p>

     當input的value發生變化的時候，v-model指令就會把當前input的value，經過v-model後面的變量把他從新賦值給data。

 

• 多行文本

 

• 複選框

   當單個複選框的時候，用v-model綁定一個變量的時候，返回的是這個checked的屬性值，只有true或者false。<input type="checkbox" v-model="checked" checked/>

   多個複選框的時候，v-model必須等於同一個值，表示他們是一塊兒的多選，這個值必須爲一個數組，若是勾選上某一個checkbox，就會將這個checkbox的value放到數組裏去。

   數據的（回顯？？）：讓複選框默認被勾上，直接在數組裏面加上對應的value。

 

• 單選框

   v-model等於一個變量，這個變量的值非數組

 

• 單選列表

  <select v-model="selected">

  <option value="">請選擇</option>

  <option value="CD">成都</option>

  <option value="LS">樂山</option>

  <option value="YA">雅安</option>

  </select> 

  selected是綁定在select上的，若是想讓下面的option選中誰，就讓selected等於option裏面的innerHtml,可是通常不用innerhtml,因此就添加value。

  <select v-model="selected">

  <option value="">請選擇</option>

  <option value="CD">成都</option>

  <option value="LS">樂山</option>

  <option value="YA">雅安</option>

  </select>

  <span>Selected: {{ selected }}</span>

  注意：若是option下面已經有value的話，就不會匹配innerhtml了。

  select 的 v-model要綁定 select這個dom上，當option有value的時候，這個變量就匹配的是value，否者就是option的innerHTML

 

• 修飾符

     .lazy <input v-model.lazy="msg" >

     在默認狀況下，v-model 在 input 事件中同步輸入框的值與數據 (除了 上述IME 部分)，但你能夠添加一個修飾符 lazy ，從而轉變爲在 change 事件中同步,好比在作表單驗證的時候，當這個表單失去焦點的時候，才提示。

     .number

     若是想自動將用戶的輸入值轉爲 Number 類型（若是原值的轉換結果爲 NaN 則返回原值），能夠添加一個修飾符 number 給 v-model     來處理輸入值：

     .trim

     若是要自動過濾用戶輸入的首尾空格，能夠添加 trim 修飾符到 v-model 上過濾輸入

 

---

 

11 組件

 

• 什麼是組件

 

     自定義的html元素，擴展html（由於對於前端來講，一切都是呈現）。「封裝」了可重用的代碼 。

 

• 全局註冊

 

     Vue.component('my',{

     template:`<div>今每天氣很美</div>`

     })

     my：爲組件名，組件是特殊的vue構造函數，在根實例配置對象中絕大部分配置項均可以在組件中同樣使用，例如計算屬性，data等，僅僅只是有一些配置項須要作特殊處理。

     template：模板

 

• 局部註冊

 

     var myCom={

       template:`<div>熱熱熱</div>`

     }

     components:{

       'my-com':myCom

     }

     何時使用局部組件，何時使用全局組件：在你這個組件要在多個頁面引入的時候，就是用全局組件，不然就是子組件。實際工做中通常使用局部組件，而後在實例或者組件中經過components來進行引用。

 

• dom模板問題

 

     table裏面會將組件踢出去，它只認得tr，td，thead這些標籤

     瀏覽器在加載的時候，會先解析你的dom節點，而後就把你的組件踢出去了，這時候你的vue.js尚未執行。

     <tr is="my-cn"></tr>

     弄個假的tr，經過is這個屬性告訴table這個tr是my-cn組件，瀏覽器解析這個dom節點的時候就不會把組件踢出去，當vue進行解析的時候，再將tr替換成vue組件

 

• data 必須爲函數

 

     若是data不是個函數，就會報錯，由於組件在dom節點中是會被複用的，若是data爲一個對象的話，多個組件引用的就是同一個對象裏面的數據，同一個地址，點擊其中一個組件的時候，會影響到其餘對象。因此寫一個data函數，爲每一個組件返回全新的 data 對象，vue會幫咱們進行對象的拷貝，而不是複用地址。

 

• 組件傳遞數據

 

     react中傳遞數據方式有兩種，第一種是props，第二種是children，就是將組件裏的innerhtml傳遞過去，接收的是全部的innerhtml，不太智能。

     在 Vue 中，父子組件的關係能夠總結爲 props down, events up。父組件經過 props 向下傳遞數據給子組件，子組件經過 events 給父組件發送消息

 

     1 使用props傳遞數據

     在子組件中props配置項中對傳遞的這個屬性進行聲明，

     var myCom={

  template:`<div>熱熱熱{{count}}</div>`,

  props:['count']  //在子組件中我指望以count這個屬性名來獲取一些數據

     }

注意:若是你的屬性是兩個單詞進行拼接的，那麼在你進行props聲明的時候，駝峯，可是在使用的時候，是小寫加-。

Vue.component('child', {

props: ['myMessage'],

template: '<span>{{ myMessage }}</span>'

})

<child my-message="hello!"></child>

 

• 單向數據流

 

     爲何：若是修改了子組件裏面的數據，進而修改了父組件的數據，這個數據又被這個父組件下的不少子組件使用，其餘子組件的數據也會被修改，這時候就讓這個數據流顯得很混亂。

     可是爲何咱們想要修改prop中的數據呢，由於咱們想要把這個數據當作是本身的來使用。

 

• prop驗證

 

保證組件的健壯性。

props:{

  countApp:Number

}

var myCom1 = {

      template:`<div>勇敢一些！讓你走的更遠！{{myCount}}</div>`,

      /*props:['myCount']*/

      props:{ //驗證屬性的基本類型

          /*myCount:[Number,String]*/

          myCount:{

              type:Number,

              validator(value){

                  if(value>10){

                      return true

                  }

              }

              //default:2

              //required:true //這個屬性必傳

          }

      }

 };

validator：對傳進來的數據進行具體的驗證

 

• 非props屬性（有問題）

 

     能夠將數據直接傳入子組件，不須要在子組件的props中聲明

 

• 自定義事件

 

     在父組件中綁定一個自定義的事件，自定義事件的值就是父組件中的一個函數，傳遞這個自定義事件到子組件中，而後這個自定義事件就做爲一個橋樑把父組件和子組件中的函數聯繫起來，在子組件中經過emit來觸發在父組件中綁定的這個事件，也就是觸發這個函數。

 

• sync修飾符

 

      在子組件中修改父組件傳遞過來的一個數據，同時同步到父組件。

 

• 使用自定義事件的表單輸入組件

 

     自定義事件能夠用來建立自定義的表單輸入組件，使用 v-model 來進行數據雙向綁定。

     <my-com color='pink' v-model='msg'></my-com> 這是下面示例的語法糖

     <my-com color='pink' v-bind:value='msg' @input='change'></my-com>

     因此說要讓父組件中的v-model生效的花，在子組件中須要接受一個value屬性，在輸入的時候觸發input事件

     var myCom={

  template:`<div>

  <input type='text' :class='[color]' :value='value' @input='change'/>

  </div>`,

  props:{

    color:{

      type:String,

      default:'red'

    },

    value:{

      type:String

    }

  },

  methods:{

     change(event){

        this.$emit('input',event.target.value)

     }

   }

 

  }

 

• slot:分發

 

     在父組件中有多個innerHTML，經過<slot>在子組件裏面獲得它，若是想要區分每一個slot的話，就在父組件中定義每一個innerhtml的slot的值，而後在子組件中經過name屬性，獲得有與這個name屬性相同的innerhtml。

     父：

     <span slot='2'>哈哈哈</span>

     <span slot='1'>呵呵呵</span>

     子：

     <slot name='2'></slot>

     <input type='text' :class='[color]' :value='val' @input='change'/>

     <slot name='1'></slot>

 

• 動態組件

 

     若是你這個項目頁面沒有太多，不須要引入路由，就使用動態組件

     <div id="app">

       <div>

          <component :is="curPage"></component>

       </div>

     </div>

     定義一個保留的component元素在根實例模板app裏面，經過is這個特性，跟着一個變量curPage，讓這個變量不停的切換組件，讓組件加載到component這裏來。就是說讓多個組件掛載到一個掛載點（一個根實例模板下面），進行動態的切換。

 

• keep-alive

 

     在vue中，當組件被切換出去的時候，默認會將他des消除，切換回來的時候，再new。不能讓組價進行復用。若是想要切換出去的組件仍然保留在內存中，就加一個keep-alive指令參數。

     <keep-alive>

        <component :is="curPage"></component>

     </keep-alive>

 

• 子組件索引

 

     ref:在子組件中經過ref爲子組件指定一個索引，在父組件中經過parent.$refs.profile獲得這個子組件中相應的dom節點？？

 

• 異步組件

 

     當沒有使用這個組件的時候，不會將這個組件下載下來，只有切換到這個組件以後，纔將這個組件下載下來

 

• 組件的關係：props down，events up

 

      props down：數據通常是由父組件經過屬性向子組件傳遞，子組件在props中聲明或者驗證傳過來的屬性。

      events up：父組件經過傳遞一個自定義的事件，這個自定義事件的值就是對應的函數，它做爲橋樑將子父組件聯繫起來，而後在子組件中經過$emit觸發這個事件，也就是這父組件中的那個函數。

 

---

 

12 過分效果

 

•  概念：元素從無到有，從有到無得一個過渡效果，所謂的過渡效果無非就是添加和刪除類

 

•  觸發的條件：條件渲染（v-if），條件展現（v-show），動態組件，根渲染， Vue 提供了 transition 的封裝組件，給條件變化組件添加enter， leave過渡，分爲enter，enter-active，enter-to

 

• 如何作動畫效果

         用transition組件將p節點包裹起來，定義一個name值，這個name值就是vue來動態添加刪除類的前綴。

   <transition name="fade">

   <p v-if="show">hello</p>

   </transition>

從無到有：

     . fade-enter：定義進入過渡的開始狀態，. fade-enter {  opacity: 0  }，下一步將要開始作動畫的時候，幹掉fade-enter。

     . fade-enter-active ： 定義過渡的狀態，. fade-enter-active {  transition: opacity .5s  }， 在元素整個過渡過程當中做用。在元素被插入的時候生效。在 transition/animation 完成以後移除。 這個類能夠被用來定義過渡的過程時間，延遲和曲線函數。

     . fade-enter-to ：定義進入過渡的結束狀態，不須要定義，由於元素默認的狀態就是opacity : 1。

從有到無：

     . fade-leave：定義離開過渡的開始狀態，opacity : 1，不須要定義，由於元素默認的狀態就是opacity : 1。

     . fade-leave-active ：定義過渡的狀態，. fade-enter-active {  transition: opacity .5s  }， 在元素整個過渡過程當中做用，在離開過渡被觸發後當即生效，在 transition/animation 完成以後移除。 這個類能夠被用來定義過渡的過程時間，延遲和曲線函數

     . fade-leave-to：定義離開過渡的結束狀態，在離開過渡被觸發一幀後生效（於此同時fade-leave 被刪除），就是fade-leave被幹掉以後立刻觸發，在 transition/animation 完成以後移除。

 

• 何時使用css過渡（transition），何時使用css動畫（animation）

           只有兩幀的狀況下使用過渡，當有多幀而且想要設置中間狀態的時候設置中間狀態使用動畫。

• css動畫  
• 自定義過渡類名
• 自定義鉤子 

         在作動畫的時候乾的一些事情

• 初始化渲染

         能夠經過 appear 特性設置節點的在初始渲染的過渡

         isux.tencent.com/css3/ 動畫手冊

 

---

 

13 自定義指令

     想作dom操做的時候，就封裝指令。目前而言，基本用不到。

• 鉤子函數

     <input type="text" v-focus /> 

        Vue.directive('focus',{

  inserted(el){ //當第一次綁定的時候，還不是真實的dom節點

  el.focus()

  }

     })

     bind: 只調用一次，指令第一次綁定到元素時調用，用這個鉤子函數能夠定義一個在綁定時執行一次的初始化動做。這個時候這個dom仍是虛擬dom，還不是真正的dom節點。

     inserted: 被綁定元素插入父節點時調用（父節點存在便可調用，沒必要存在於 document 中）。

     update: 被綁定元素所在的模板更新時調用，而不論綁定值是否變化。經過比較更新先後的綁定值，能夠忽略沒必要要的模板更新（詳細的鉤子函數參數見下）。

     componentUpdated: 被綁定元素所在模板完成一次更新週期時調用。

     unbind: 只調用一次， 指令與元素解綁時調用。

 

---

 

14 路由

     幹嗎的：切換組件

     用的版本：vue2的路由

 

代碼：

  <script src="vue.js"></script>

  <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>

  </head>

  <body>

 

  <div id="app">

           <h1>Hello App!</h1>

  <p>

 

  <!-- 使用 router-link 切換組件 -->

 

  <!-- 經過傳入 `to` 屬性指定連接. -->

 

  <!-- <router-link> 默認會被渲染成一個 `<a>` 標籤 -->

  <router-link to="/foo">Go to Foo</router-link>

  <router-link to="/bar">Go to Bar</router-link>

  <router-link to="/user/wt">Go to User</router-link>

 

  </p>

  <!-- 路由出口 -->

 

  <!-- 路由匹配到的組件將渲染在這裏 -->

 

  <!--當路由匹配到某個組件，加載到這裏來。-->

  <router-view></router-view>

 

  </div>

 

  </body>

 

  <script>

 

 

  // 若是使用模塊化機制編程，導入Vue和VueRouter，要調用 Vue.use(VueRouter)

 

  // 定義（路由）組件。

 

 

  // 能夠從其餘文件 import 進來

  const Foo = { template: `<div>foo

  <router-view></router-view>

  <router-link to="/foo/foo1">Go to foo1</router-link>

  <router-link to="/foo/foo2">Go to foo2</router-link>

  </div>`

  }

  const Foo1 = { template: '<div>foo1</div>' }

  const Foo2 = { template: '<div>foo2</div>' }

 

 

 

  //除了使用 <router-link> 建立 a 標籤來定義導航連接，咱們還能夠藉助 router 的實例方法，經過編寫代碼來實現。

  //經過js來進行組件的切換，稱爲編程式導航

  //router:路由實例，下面建立的，經過this.$router拿到路由實例

  //push會生成歷史記錄，replace不會生成歷史記錄，

  //go

  const Bar = { template: `<div>bar

           <button @click="goUser">Gouser</button>

  </div>`,

  data(){

  return {

  username:'haha'

  }

  },

  methods:{

  goUser(){

  //js跳轉

// this.$router.push('/user/13') //路由實例

// this.$router.replace({path:"user/yangj2"})

  this.$router.push( {name:"user", params: { username:this.username},query: { plan: 'private' } })

  }

  }

  }

 

  //響應路由參數的變化:

  //提醒一下，當使用路由參數時，例如從 /user/foo 導航到 user/bar，原來的組件實例會被複用。

  //由於兩個路由都渲染同個組件，比起銷燬再建立，複用則顯得更加高效。

  //不過，這也意味着組件的生命週期鉤子不會再被調用。

  //怎麼辦呢，使用$watch，來監測$route對象

  //$route爲路由對象，當路由匹配到誰的時候，就會把當前路由匹配的全部的信息注入到這個路由對象中，並把這個對象賦到當前這個組件當中

  //to:切換過去新的路由對象 from：切換以前的路由對象

 

  //beforeRouteEnter，組件內部的鉤子，比create這些鉤子都要先調用，是路由鉤子

  //在beforeRouteEnter以前，是拿不到組件的實例對象的，不能再這個鉤子裏面去調用this，由於這個組件都尚未被實例化

  //不過，你能夠經過傳一個回調給 next來訪問組件實例。在導航被確認的時候執行回調，而且把組件實例做爲回調方法的參數。

 

  //beforeRouteUpdate;在當前路由改變，可是組件被複用的時候調用

  const User = { template: '<div>user---{{$route.params.username }}---{{msg}}</div>',

  data(){

  return {

  $route:'$route',

  msg:'個人愛在等待'

  }

  },

// created(){

// console.log('呵呵');

// },

  mounted(){

           console.log(this.$route);

  },

  beforeRouteEnter(to, from, next){

// console.log(22);

// next();

  setTimeout(function(){

  next((vm)=>{

  vm.msg="個人已回來！"

  })

  console.log(this.msg);

  },2000)

  },

  beforeRouteUpdate(to, from, next){//當組件被複用的時候

  console.log("fuyong");

  next();

  },

  watch:{

  $route (to,from){

// console.log(from,to);

  }

  }

 

  }

 

  // 定義路由

  // 每一個路由應該映射一個組件。 其中"component" 能夠是

  // 經過 Vue.extend() 建立的組件構造器，

  // 或者，只是一個組件配置對象。

 

  // 命名路由

 

  //重定向：若是沒有任何匹配的路由，重定向到某一個組件，跟在最後面

  const routes = [ //路由匹配規則

  { path: '/foo', component: Foo ,children:[

  {

  path:'foo1',

  component:Foo1

  },

  {

  path:'foo2',

  component:Foo2

  }

 

  ]},

  { path: '/bar', component: Bar },

  { path: '/user/:username',component:User,name: 'user'},

  { path:'/', redirect:'/foo'}

  ]

 

 

  // 建立 router 實例，而後傳 routes 配置

  // 你還能夠傳別的配置參數, 不過先這麼簡單着吧。

 

  //告訴路由器實例咱們的路由匹配規則是什麼

 

  //history：路由匹配模式 ，路徑切換

  const router = new VueRouter({

  routes // （縮寫）至關於 routes: routes

  })

 

 

  //由於vue沒有相似於react的should的鉤子，它並不能對接收的數據進行限制，

  //因此就增長了導航鉤子，vue-router 提供的導航鉤子主要用來攔截導航，讓它完成跳轉或取消。

 

  //router.beforeEach，每一次路由切換的時候，都會執行的全局鉤子

  //next，必定要調用他，1）若是所有鉤子都執行完了，則導航的狀態就是確認的。next(false)，當前切換的url會被重置到from路由對應的地址，next('/')跳轉到對應的地址上去

  //afterEach:通常不用，用戶都切換過來了，還弄啥呢

  router.beforeEach((to, from, next) => {

// console.log(to);

// if (true) { //登錄失效

// next();

// };

  next();

 

  })

 

 

  // 建立和掛載根實例。

  // 記得要經過 router 配置參數注入路由，

  // 從而讓整個應用都有路由功能

 

  //將路由實例傳給vue這個實例,告訴當前app你使用了路由

  const app = new Vue({

  el:'#app',

  router

  })

  // 如今，應用已經啓動了！

  </script>

</html>

 

---

 

15 安裝vue-cli

1）npm i -g vue-cli

2）vue init webpack test

3）npm i

4）npm run dev

---

16 vue-cli項目

bulid：不用管，是用來幫咱們啓服務地方，惟一要操做的地方是dev-server，由於要在這裏面進行數據的模擬。

config：一些配置文件

static：不可以經過npm安裝的包，像zepto，swiper這些庫，靜態資源文件，想經過標籤引入

src：全部項目存在的地方

assets：靜態資源存放的地方，可是能夠經過import導入。

main.js ：項目的啓動項，webpack的入口文件，el和template共存的話，就會把id爲app的組件所有替換成template包含的組件。

App.vue ：整個項目最外層的那個組件

stylus:css預編譯語言，scoped:當前的css只做用到當前的模板上面

router-link-active：經過router-link切換的切換鏈接，切換到哪個組件，會加上這個類

 

懶加載：建立異步組件，Vue.component，第二個參數爲函數。當打包構建應用時，Javascript 包會變得很是大，影響頁面加載。若是咱們能把不一樣路由對應的組件分割成不一樣的代碼塊，而後當路由被訪問的時候才加載對應組件，這樣就更加高效了。結合 Vue 的 異步組件 和 Webpack 的 code splitting feature, 輕鬆實現路由組件的懶加載。

咱們要作的就是把路由對應的組件定義成異步組件：

const User = r => require.ensure([], () => r(require('@/pages/User.vue')), 'User')

不讓組件同時加載進來，只有當用戶點擊切換的時候，纔到服務器裏面去讀，將這個組件下載下來。才用require.ensure分開打包。

enusre：代碼的分割，把組件放到了require.ensure裏面的時候，webpack就知道要分開打包，不會放到主bundl裏面，當路由匹配到這個組件的時候，再來下載這個異步組件。

第一個參數[ ] ，當去加載後面的User.vue組件的時候，這個參數是前置依賴的意思，就是你這個組件依賴於哪些組價。

第二個參數r是resolve的意思，當咱們加載require後面的組件的時候去調用resolve函數

第三個參數是分組的意思，取成同樣的，告訴webpack將這兩個組件打包在一塊兒

 

靜態資源文件，例如static文件裏面的reset文件，在index.html文件中用link標籤進行引入

 

asset裏面經過相對路徑來進行訪問，static經過絕對路徑進行訪問，靜態資源目錄在根目錄，由於可以直接訪問index.html頁面

 

當咱們使用模塊化導入vue-router或者其餘插件的時候，必須調用Vue.use(Router)，把這個導入的路由放在Vue.use裏面去，script標籤就不須要放到Vue.use裏面去，由於script標籤將這個router掛載到window對象上去，全局就能夠訪問。可是組件化這塊，它是一個獨立的做用域，在他的內部是不會把他的變量暴露到全局上去，因此動態調用Vue.use(Router)

 

npm run build 打包

 

vue.js的插件 不少

 

---

vuex

 

倉庫：用來存儲數據，改變數據的地方，在全部的頁面中，都導入這個倉庫，若是想要修改倉庫的數據的話，就執行特定的函數，讓倉庫執行修改。

 

vuex：狀態管理，就是一個倉庫

 

狀態管理：

state：數據

view：視圖，從狀態中拿數據

action：在視圖中觸發一個函數，函數中修改狀態

 

安裝vuex，cnpm i --save vuex    

有1,2的版本，安裝的是2版本

 

state：在倉庫裏面具體存儲數據的地方，谷堆，state，一個對象包含了全部的數據，一個倉庫就只有一個state，一個谷堆

經過在實例中傳遞store 選項，提供了一種機制將狀態從根組件『注入』到每個子組件中。若是想要在組價中獲取state之中的狀態的話，經過this.$store.state.count獲取

 

mapState：當一個組件須要獲取多個狀態時候，將這些狀態都聲明爲計算屬性會有些重複和冗餘。爲了解決這個問題，咱們可使用 mapState 輔助函數幫助咱們生成計算屬性，讓你少按幾回鍵，若是計算屬性與state屬性同樣的時候可使用這個參數，能夠在數組裏傳入字符串，表示把this.$store.state.count映射到this.count這個計算屬性

數組語法：這個語法很差的是萬一有這個組件自身的計算屬性的話，就很差操做了

computed:mapState([

       'count',

       'count2'

  ])  

對象展開語法：對象擴展運算符的，把對象的 key value 展開成用,隔開的一個一個的鍵值對，爲了與局部就是組件內部的計算屬性混合使用，須要使用一個工具將多個對象合併在一塊兒，採用對象的展開運算符

  ...mapState([

      'count',

      'count2'

  ])

mapState函數返回的是一個對象

 

getters：是state的擴展，有時候咱們須要從store的state中派生一些狀態，例如對列表進行過濾，Vuex 容許咱們在store中定義 getters （能夠認爲是store的計算屬性），getter接受state做爲第一個參數。

getters:{

  old(state){

  return state.users && state.users.filter(function(item){

  return item.age>=20;

  })

  }

  }

filter函數：filter()方法中行參是一個回調函數.這個回調函數就是一個規則,返回一個布爾值.filter()方法會對數組中每個元素使用這個回調函數.注意,這裏說的是每個元素.而且將返回值爲true的元素裝入一個新數組返回

mapGetters：mapGetters 輔助函數僅僅是將 store 中的 getters 映射到局部計算屬性中。

 

 

Mutations： 改變state的地方，更改 Vuex 的 store 中的狀態的惟一方法是提交 mutation。Vuex 中的 mutations 很是相似於事件：每一個 mutation 都有一個字符串的 事件類型 (type) 和 一個 回調函數 (handler)。這個回調函數就是咱們實際進行狀態更改的地方，而且它會接受 state 做爲第一個參數。不能直接調用hander, 這個選項就像註冊事件，觸發一個 increment的mutation，你須要以相應的type調用 store.commit(‘[type]’)。必須爲同步函數，沒有異步操做，由於vue.js寫了一個工具，來一步一步監聽咱們的數據

mutations:{

  increment(state,num){

  state.count+=num;

  }

  }

methods:{

  add(){

  this.$store.commit('increment',2);

  }

  }

 

mapMutations：語法糖，這種方法沒法傳參數

mutations:{

     increment(state){

       state.count++;

     }

  }

methods:{

     ...mapMutations({

         add:'increment'

      })

  }

若是mutation爲一個變量的話，那樣若是mutation中的key，也就是自定義的type類型發生改變，那麼不少地方都須要改。因此推薦使用常量代替mutation的type（類型）用不用常量取決於你 —— 在須要多人協做的大型項目中，這會頗有幫助。但若是你不喜歡，你徹底能夠不這樣作。

es6是容許對象的key是一個變量的，可是要用方括號把他給括起來

 

Action：專門用來作異步操做，當異步操做結束後，再提交mutation，相似於mutation，action 提交 mutation，不是直接修改state，action能夠包含任意異步操做。

Action 函數接受一個與 store 實例具備相同方法和屬性的 context 對象，所以你能夠調用 context.commit 提交一個 mutation，或者經過 context.state 和 context.getters 來獲取 state 和 getters。

數據放在dev.server.js裏面，而且要放在app實例以後以前，由於webpack-dev-middleware這樣的中間件，幫咱們自動配置了history api cback，前段發過來的任何請求，都返回一個index.html。

increment({commit,state,getters}){

    $.get('/api/list', function(data) {

         console.log(data);

         commit('MOREUSERS',data.list)

      });

  }

Action 經過 store.dispatch 方法觸發：

getuser(){

  this.$store.dispatch('increment')

  }

mapActions：

  ...mapActions({

     getuser:'increment'

  })

---

 

注意：若是組件名爲駝峯命名的話，好比myCom，在html裏面引入的話，要是用my-com。對於自定義標籤名，Vue.js 不強制要求遵循 W3C 規則 (小寫，而且包含一個短槓)，儘管遵循這個規則比較好。局部註冊的對象名不能加-。之後局部註冊的時候就使用駝峯myCom，在components裏面定義組件名的時候就使用my-com，在html中引入的時候就使用my-com。

 

注意：

 

    * {{}}裏面只能用來顯示數據的

    * vue.js將當前data裏面的全部屬性都掛載到了vue實例上去了

    * 組件是特殊的vue實例，只有組件才能夠被銷燬

    * 帶$的符號通常是vue.js內部的方法，通常不使用

    * h5的新的api classList

 

vue最強大的功能是計算屬性和組件

es6遍歷器 fa？ keys?

 

新姿式：

1 語法糖：它意指那些沒有給計算機語言添加新功能，而只是對人類來講更「甜蜜」的語法。語法糖每每給程序員提供了更實用的編碼方式，有益於更好的編碼風格，更易讀。不過其並無給語言添加什麼新東西。

 

 

 

重點                                                                                                                                                                                                                                              

何時用到計算屬性：模板中出現太多的邏輯，使用了過多的表達式，這樣會讓代碼變得難以維護的時候使用。同時想要監聽某些數據，當這些數據發生變化的時候會影響到其餘的數據的時候使用。

計算屬性：

 

1.

• 在配置對象中定義computed：{計算屬性名：function(){ return 計算好的數據}}

2.特色：

• 1.會監聽在這個計算屬性中所依賴的任何數據，
• 2.計算屬性會被緩存（當依賴的數據沒有變化，屢次使用的時候不會執行計算屬性函數），
• 3.當依賴的數據發生變化的時候，計算屬性的值會被從新計算並賦值。
• 4.get和set還能夠監聽計算屬性自身的變化

4.getter和setter

• getter通常是獲取計算屬性的值
• setter當計算屬性發生變化的時候，同時也會執行set，來修改本來依賴的數據

 

計算屬性 VS 方法調用：計算屬性會被緩存（當依賴的數據沒有變化，屢次使用的時候不會執行計算屬性函數），函數的調用會在使用的地方屢次執行函數，形成資源的浪費。

計算屬性 VS Watch： Watch：只能一次監聽一個數據變化（代碼的冗餘）。當你想在數據變化作異步操做時，使用它。watch的優勢是能夠設置中間狀態。

 

 

 

<!DOCTYPE html>

<html>

       <head>

                 <meta charset="UTF-8">

                 <title></title>

                 <script src="https://unpkg.com/vue"></script>

       </head>

       <body>

                 <div id="app">

                          {{message}}

                          <span v-bind:title="message">指令是vue中有的而react沒有</span>

                          <p v-if="bool">這裏是vue的條件判斷，與react不一樣的是react是在render的return以前使用if else進行判斷或者直接在return裏面使用三目運算符進行判斷</p>

                          <ul>

                                    <li v-for="t in tobos">{{t.text}}</li>

                                    <todo-item></todo-item>

                          </ul>

                          <button v-on:click="change">這裏演示vue的事件綁定</button>

                          <input type="text" v-model="val" />

                          <div v-html="span"></div>

                 </div>

       </body>

       <script>

                 //v-html可以將html字符串轉化爲html，可是對於這條指令要謹慎使用，咱們通常使用{{}}引入變量，在{{}}中只能使用加減乘除已經三目運算符等簡單的JavaScript語句與react相似，使用v-bind來使屬性值改變

                 //指令的參數在指令後以冒號指明，好比v-bind:title="message"的參數是title，v-on:click="change"的產生是click

                 //指令的修飾符是以半角句號 . 指明的特殊後綴，好比v-on:click.prevent="change"的.prevent就是修飾符，表示觸發本事件的時候會調用event.preventDefault()

                 Vue.component("todo-item",{

                          template:"<li>組件的使用就是像使用dom節點標籤同樣</li>"

                 })

                 var app=new Vue({

                          el:"#app",

                          data:{

                                    message:"今天開始學vue",

                                    bool:false,

                                    span:"<span style='color:red'>雙花括號只能將數據轉化爲純文本而不是html,所以咱們通常使用v-html：'變量'來轉化html字符串</span>",

                                    tobos:[{

                                             text:"這是爲了試驗vue中的遍歷"

                                    },{

                                             text:"vue中的遍歷與react中的遍歷不一樣,react通常使用map()方法返回一個數組,而vue直接使用v-for指令進行遍歷"

                                    },{

                                             text:"v-for='遍歷到的每一項  in 數組名'"

                                    }],

                                    val:"使用v-model實現的input中數據的雙向綁定"

                          },

                          methods:{

                                    change(){

                                             alert("綁定的函數配置在methods對象下面");

                                             this.bool=true

                                    }

                          },

                          beforeCreate(){

                                    //在將data掛載到實例以及初始化事件以前調用

                                    console.log("在將data掛載到實例以及初始化事件以前調用");

                          },

                          created(){

                                    //在實例建立好以後調用

                                    console.log("在實例建立好以後調用")

                          },

                          beforeMount(){

                                    //判斷實例中是否配置el和template後調用

                                    console.log("判斷實例中是否配置el和template後調用") 

                          },

                          mounted(){

                                    //使用vue.js編譯代碼,成功插入dom後調用

                                    console.log("使用vue.js編譯代碼,成功插入dom後調用")

                          },

                          beforeUpdate(){

                                    //數據發生改變，虛擬dom尚未從新渲染以前調用

                                    console.log("數據發生改變，可是虛擬Dom還沒從新以前調用")

                          },

                          updated(){

                                    //數據發生改變，虛擬dom從新渲染以後調用

                                    console.log("數據發生改變，虛擬dom從新渲染以後調用")

                                    console.log(this.message)

                          },

                          //在生命週期鉤子函數中咱們是可以拿到當前data中的數據的

                          beforeDestroy(){

                                    //在調用$destory()後調用

                                    console.log("在調用$destory()後調用")

                          },

                          destroyed(){

                                    console.log("從真實dom中移除")

                          },

                          //通常不銷燬實例，組件是特殊的實例，被銷燬的通常是組件

                 })

       </script>

</html>