(一) vue的生命周期

https://segmentfault.com/a/1190000008010666

(1) beforeCreate

• 在實例初始化之后缎讼，數(shù)據(jù)觀測(data observer) 和 event/watcher 事件配置之前被調(diào)用澎语。組件屬性未被初始化，即實例中的data萍膛，el為undefined
• beforeCreate在官方文檔描述中說吭服，在做一些數(shù)據(jù)監(jiān)視和事件初始化，這里有一個容易讓人走偏的地方蝗罗，就是事件初始化艇棕，其實就是為vue對象添加一些屬性，就是methods中的一些函數(shù)全部作為vue對象的屬性存在串塑，Vue會講所有的data數(shù)據(jù)和methods中的函數(shù)添加到創(chuàng)建的vue對象上面沼琉。

(2) created

• 實例已經(jīng)創(chuàng)建完成之后被調(diào)用。在這一步桩匪，實例已完成以下的配置：數(shù)據(jù)觀測(data observer)刺桃，屬性和方法的運算， watch/event 事件回調(diào)吸祟。然而瑟慈，掛載階段還沒開始，$el 屬性目前不可見屋匕。
• created 這個方法表示葛碧，vue對象已經(jīng)創(chuàng)建成功，這里要搞清楚vue對象并不是我們所說的虛擬dom过吻，vue對象就是一個js對象进泼，他內(nèi)部只是對數(shù)據(jù)進行操作，通過對數(shù)據(jù)的操作進而影響到虛擬dom的構(gòu)建纤虽，所以在這個方法中我們可以做一些數(shù)據(jù)初始化工作乳绕，最常見的就是發(fā)送ajax請求來對已經(jīng)構(gòu)建完畢的vue對象的靜態(tài)屬性進行一些初始化。

(3) beforeMount

• beforeMount：模板編譯/掛載之前逼纸，在掛載開始之前被調(diào)用洋措。進行模板編譯，但是杰刽，模板內(nèi)容還未插入頁面DOM中菠发。
• 這個過程就是根據(jù)編譯以后產(chǎn)生的虛擬dom結(jié)構(gòu)來構(gòu)造一個真實的dom結(jié)構(gòu)，再說一遍贺嫂，這兩個dom有很大的區(qū)別滓鸠，前者只表示數(shù)據(jù)結(jié)構(gòu)，后者可以直接添加到html文檔結(jié)構(gòu)中來渲染一個效果第喳。在這個期間糜俗，我們就可以操作真實的dom對象了，包括我們?yōu)槟骋粋€特定的dom節(jié)點綁定事件，標簽屬性悠抹，內(nèi)容的操作等寞射，例如使用select2來修飾select，但是并不推薦在這里進行一些事件綁定或者dom操作锌钮，因為在這期間，Vue還要做一件非常重要的事情就是通過Vue自己的方式來標識每一個真實的dom節(jié)點引矩，我們在vue里一般都是通過$els或者$refs來操作對應(yīng)的dom元素梁丘，但是這期間正是標注所有元素的過程，很有可能會出一些意想不到的錯誤旺韭。

(4) mounted

• mounted：模板編譯/掛載之后氛谜，el 被新創(chuàng)建的 vm.$el 替換，并掛載到實例上去之后調(diào)用該鉤子区端。如果 root 實例掛載了一個文檔內(nèi)元素值漫，當 mounted 被調(diào)用時 vm.$el 也在文檔內(nèi)。( 將生成好的的模板掛載在DOM樹上织盼，并且杨何，組件屬性this.$el被賦值。)
• mounted：見名知意沥邻，掛載危虱，表示真實dom已經(jīng)構(gòu)造完畢，我們可以append到父容器當中來構(gòu)造頁面了唐全，在這里我們就可以完成一些對于真實dom的操作埃跷，不論是直接訪問dom的屬性內(nèi)容或者事件的綁定，都可以在這里放心大膽的做了邮利，一般情況下我們不需要直接操作dom弥雹，Vue也不推薦這么做，但是這里你需要知道的事如果你有這種需求延届，完全可以在這里完成剪勿，掛載的過程就是將生成的真實DOM對象append到掛載點下面，就是appendChild的過程方庭，這個時候的虛擬dom結(jié)構(gòu)跟生成出來的real dom結(jié)構(gòu)一模一樣窗宦，我們以后要操作的就是這個虛擬dom結(jié)構(gòu)，就是前面根據(jù)模版生成出來的dom數(shù)據(jù)結(jié)構(gòu)二鳄。

(5) beforeUpdate

• beforeUpdate: 組件更新之前赴涵，
• beforeUpdate：這個方法在整個生命周期之中也只被調(diào)用一次，在做什么呢订讼，想一想上面所做的事情髓窜，上面是根據(jù)模版構(gòu)造出來一個真實的dom對象，到現(xiàn)在他并沒有跟我們的vue實例對象扯上關(guān)系，怎么通過我們的vue實例來影響到真實的dom對象呢寄纵，怎么把我們的數(shù)據(jù)綁定的真實dom當中了鳖敷，以后我們只需要操作數(shù)據(jù)就可以影響到dom結(jié)構(gòu)的渲染呢？在這個方法里程拭，Vue同樣依據(jù)前面的規(guī)則根據(jù)vue實例提供的數(shù)據(jù)在模版中的位置來重新生成一個虛擬dom數(shù)據(jù)結(jié)構(gòu)定踱，沒錯，你沒看錯恃鞋，我們要生成兩個虛擬dom崖媚，前一個dom只是dom結(jié)構(gòu)，并沒有綁定我們vue的屬性數(shù)據(jù)恤浪，這一個dom是綁定了我們vue實例數(shù)據(jù)的dom結(jié)構(gòu)畅哑，在這個dom生成的過程中，vue根據(jù)自己的語法規(guī)則水由，對比如指令荠呐，表達式之類的東西進行替換，生成一個新的虛擬dom結(jié)構(gòu)砂客，接下來我們要做什么泥张，就是進行比較兩個虛擬dom之間存在的差異。

(5) updated

• updated: 組件更新之后鞠值，
• update：這個方法在我們整個生命周期之內(nèi)會反復調(diào)用圾结，你會發(fā)現(xiàn)，每一次對vue對象的變更都會觸發(fā)update方法齿诉，他做了什么呢筝野，他就是在反復的生成一個virtual dom，生成的新dom不斷跟之前的dom結(jié)構(gòu)進行比對粤剧。

(6) activated

• keep-alive 組件激活時調(diào)用歇竟。
• 使用場景：比如切換時，保持input框獲得焦點
• activated是激活的意思
• 該鉤子在服務(wù)器端渲染期間不被調(diào)用抵恋。

   <input type="text" v-model="showInputNotDirective" ref="input2">

   activated() {
      this.$refs.input2.focus()
    }

(7) deactivated

• keep-alive 組件停用時調(diào)用焕议。
• 該鉤子在服務(wù)器端渲染期間不被調(diào)用。

(6) beforeDestroy

• beforeDestroy: 組件/實例銷毀前被調(diào)用弧关，在這一步盅安，實例仍然完全可用。( 可以做一個確認停止事件的確認框世囊，銷毀組件 )

(7) destoryed

• destoryed: 組件/實例銷毀完畢别瞭。這時，組件上的watcher株憾，子組件和事件監(jiān)聽都會被銷毀蝙寨。

實用的鉤子：

Created：vue實例被生成后的一個生命周期鉤子函數(shù)晒衩。(頁面初始化數(shù)據(jù)加載一般寫這里);

beforeCreate：給個loading界面 created撤銷loading;

beforeDestory：你確認刪除XX嗎？

mounted ： 在這發(fā)起后端請求墙歪，拿回數(shù)據(jù)听系，配合路由鉤子做一些事情

destoryed：當前組件已被刪除，清空相關(guān)內(nèi)容

圖解

(二) v-if 和 v-show

結(jié)論：如果需要頻繁切換使用 v-show 較好虹菲，如果在運行時條件不大可能改變則使用 v-if較好靠胜。

• v-if的初始化較快，但切換代價高毕源；

• v-show初始化慢浪漠，但切換成本低。

• v-if 是真實的條件渲染脑豹，因為它會確保條件塊在切換當中適當?shù)劁N毀與重建條件塊內(nèi)的事件監(jiān)聽器和子組件。
  v-if 也是惰性的：如果在初始渲染時條件為假衡查，則什么也不做——在條件第一次變?yōu)檎鏁r才開始局部編譯（編譯會被緩存起來）瘩欺。

• v-show 條件性顯示或隱藏,
  v-show 的元素會始終渲染并保持在 DOM 中。v-show 是簡單的切換元素的 CSS屬性 display
  v-show 不支持 template

(三) better-scroll實現(xiàn)下拉刷新拌牲，上拉加載

https://juejin.im/post/59b777015188257e764c716f

下拉刷新 :

pullDownRefresh 配置項俱饿，監(jiān)聽 pullingDown 事件，刷新數(shù)據(jù)塌忽。并在刷新數(shù)據(jù)完成之后拍埠，調(diào)用 finishPullDown() 方法，回彈到頂部邊界

(1) pullDownRefresh ( 選項 )

• threshold: 50, // 當下拉到超過頂部 50px 時土居，觸發(fā) ( pullingDown ) 事件
• stop: 20 // 刷新數(shù)據(jù)的過程中枣购，回彈停留在距離頂部還有 20px 的位置

類型：Boolean | Object
默認值：false
作用：這個配置用于做下拉刷新功能，默認為 false擦耀。
當設(shè)置為 true 或者是一個 Object 的時候棉圈，可以開啟下拉刷新，
可以配置頂部下拉的距離（threshold） 來決定刷新時機
以及回彈停留的距離（stop）

(2) pullingDown ( 事件 )

參數(shù)：無
( 觸發(fā)時機 )：在一次下拉刷新的動作后眷蜓，這個時機一般用來去后端請求數(shù)據(jù)分瘾。

(3) finishPullDown() ( 方法 )

參數(shù)：無
返回值：無
( 作用 )：當下拉刷新數(shù)據(jù)加載完畢后，需要調(diào)用此方法告訴 better-scroll 數(shù)據(jù)已加載吁系。

options.pullDownRefresh = {
  threshold: 50, // 當下拉到超過頂部 50px 時德召，觸發(fā) pullingDown 事件
  stop: 20 // 刷新數(shù)據(jù)的過程中，回彈停留在距離頂部還有 20px 的位置
}

this.scroll = new BScroll(this.$refs.wrapper, options)

this.scroll.on('pullingDown', () => {
  // 刷新數(shù)據(jù)的過程中汽纤，回彈停留在距離頂部還有20px的位置
  RefreshData()
    .then((newData) => {
      this.data = newData
      // 在刷新數(shù)據(jù)完成之后上岗，調(diào)用 finishPullDown 方法，回彈到頂部
      this.scroll.finishPullDown()
  })
})

上拉加載

(1) pullUpLoad ( 選項 )

• threshold: -20 // 在上拉到超過底部 20px 時蕴坪，觸發(fā) ( pullingUp ) 事件

類型：Boolean | Object
默認值：false
作用：這個配置用于做上拉加載功能液茎，默認為 false。當設(shè)置為 true 或者是一個 Object 的時候，可以開啟上拉加載捆等，可以配置離底部距離閾值（threshold）來決定開始加載的時機滞造。

(2) pullingDown ( 事件 )

參數(shù)：無
( 觸發(fā)時機 )：在一次上拉加載的動作后，這個時機一般用來去后端請求數(shù)據(jù)栋烤。

<template>
  <div class="rank" ref="rank">
    <div class="scrollWrapper" ref="scrollWrapper">
      <ul class="ul">
        <li v-for="item in getData" class="li">
          <div class="dataItem">
            <div class="left">
              ![](item.share_url)
            </div>
            <div class="right">{{item.abs}}</div>
          </div>
        </li>
      </ul>
    </div>
    <Loading v-if="showTime" class="Loading"></Loading>
  </div>
</template>

<script type="text/ecmascript-6">
  import BScroll from 'better-scroll'
  import Loading from 'base/loading/loading.vue'
  import png from './1.png'

  export default {
    data() {
      return {
        getData: [
          {
            share_url: png,
            abs: 'data自己的數(shù)據(jù)'
          }
        ],
        showTime: false
      }
    },
    created() {
      this._initScroll()
    },
    methods: {
      _initScroll() {
        this.$http.get('http://image.baidu.com/channel/listjson?pn=15&rn=3&tag1=%E7%BE%8E%E5%A5%B3&tag2=%E5%85%A8%E9%83%A8&ie=utf8')
          .then((response) => {
            this.getData = response.data.data.concat(this.getData)
            this.$nextTick(() => {
              if (!this.scroll) {
                this.scroll = new BScroll(this.$refs.scrollWrapper, {
                  pullDownRefresh: {
                    threshold: 50, // 當下拉到超過頂部 50px 時谒养，觸發(fā) pullingDown 事件
                    stop: 20 // 刷新數(shù)據(jù)的過程中，回彈停留在距離頂部還有 20px 的位置
                  },
                  pullUpLoad: {
                    threshold: -20 // 在上拉到超過底部 20px 時明郭，觸發(fā) pullingUp 事件
                  }
                })
                this.scroll.on('pullingDown', () => {
                  // 刷新數(shù)據(jù)的過程中买窟，回彈停留在距離頂部還有20px的位置
                  // 在刷新數(shù)據(jù)完成之后，調(diào)用 finishPullDown 方法薯定，回彈到頂部
                  this.showTime = true
                  setTimeout(() => {
                    this._initScroll()
                  }, 2000)
                  this.scroll.finishPullDown()
                  this.showTime = false
                  this.scroll.refresh()
                })
                this.scroll.on('pullingUp', () => {
                  // 請求數(shù)據(jù)
                })
              } else {
                this.scroll.refresh()
              }
            })
          })
      }
    },
    components: {
      Loading
    }
  }
</script>

(四) Vue.set 和 this.$set

   selectProducted: function(loop){      // loop是從dom中傳過來的數(shù)據(jù)
                if(typeof loop.checked == "undefined"){

                    // Vue.set(loop,'checked',true);   

                                         //向loop變量里面注冊了checked屬性始绍，值是true；（vue全局注冊）话侄；

                    this.$set(loop,'checked',true);  

                                        //向loop變量里面注冊checked屬性亏推，值是true;（vue局部注冊）

                }else{
                    loop.checked = !loop.checked;
                }
                this.calculateTotalPrice();
            },

--------------------------------------------------------------

<li v-for="(loop,index) in list">
  <div class="cart-item-check">
      <a href="javascipt:;" 
           class="item-check-btn " 
           v-bind:class="{'check':loop.checked}" 
           @click="selectProducted(loop)>
      </a>
  </div>      
</li> 

                        

(五) v-pre 和 v-once 和 ( v-on:click.once="" )

• v-pre 原樣輸出
• v-once 執(zhí)行一次
• v-on:click.once="" (點擊)事件只執(zhí)行一次
  http://www.reibang.com/p/d0a4cfd1256c

v-pre


<div class="right" v-pre>{{item.abs}}</div>
輸出結(jié)果： {{item.abs}}   

---------------------------------------------

v-once


 <div v-on:click="add" class="add">+</div>
    <div v-once>{{number}}</div>     // 只執(zhí)行一次，輸出1
    <div>{{number}}</div>  // 一直累加

     add() {
        this.number += 1
      },
-----------------------------------------------

v-on:click.once=""


 <div v-on:click.once="add" class="add">+</div>

(六) font-awesome字體圖標

• 安裝

npm install font-awesome --save

• main.js 中引入

在main.js中

import 'font-awesome/css/font-awesome.css'

• 使用

<i class="fa fa-battery-full" aria-hidden="true"></i>

.fa-battery-full
     font-size:100px    // 改變大小
     color:red   // 改變顏色