vue從建立到完整的餓了麼（11）組件的使用（svg圖標及watch的簡單使用）

說明

1.上一章--city.vue的完善（v-if的使用及本地緩存的存儲與使用）
2.蒼渡大神的源碼地址--項目源碼地址
3.UI框架--Mint UI
4.數據接口地址--接口API
5.下一章--miste.vue

開始

1.建立
在src下的page文件夾下建立 miste 文件夾，在其中建立 miste.vue文件，代碼以下

2.路由
在src下的router文件下的routers.js添加miste.vue的路由

3.UI
先看一下UI圖

你們能夠分析一下，首先腳部的4個導航確定是在多個頁面都要用的，其次是頭部，可是我發現不一樣的頁面頭部是不同的，並且點擊事件也不同。因此，我們就先作腳部的四個導航。

4.建立頁面。
我們先把腳部的 搜索，訂單，個人 這幾個頁面建立，並添加路由。

5.建立組件
在src下新建文件夾components，全部的組件都寫在這裏。在components文件下新建文件夾foot，在這裏寫腳部的組件，代碼以下

6.引入組件
在miste.vue裏要是用foot.vue，首先要引入組件，與引入Mint ui組件同樣，在script裏第一行首先引入

import foot from '../../components/foot/foot'

其次，在components裏註冊組件

components:{
  //註冊組件
    foot
  },

這裏要注意，註冊組件是components，我之前一直寫的是component，得，都得改。

最後使用，直接在頁面的template里加上

<foot></foot>

頁面完整代碼以下

查看頁面效果

ok！引入腳部組件成功，下面就是寫foot.vue 的樣式

7.foot.vue樣式。
7.1tabbar
在Mint ui 中有一個tabbar組件，與我們需求類似，在foot.vue使用

<template>
  <div>
    <mt-tabbar v-model="$store.state.selected">
          <mt-tab-item id="miste">
            <img slot="icon">
            外賣 
          </mt-tab-item>
          <mt-tab-item id="order"> 
            <img slot="icon">
            訂單
          </mt-tab-item>
          <mt-tab-item id="search">
            <img slot="icon" src="">
            搜索
          </mt-tab-item>
          <mt-tab-item id="profile">
            <img slot="icon">
            個人
          </mt-tab-item>
    </mt-tabbar>
  </div>
</template>

這裏v-model綁定的$store.state.selected是當前選中mt-tab-item的id，因此我把ID改爲了要跳轉頁面的名字，在vuex中聲明變量selected，打開src下的store下的index.js修改以下

讓selected有一個值是讓組件有一個默認值。頁面以下

7.2 svg圖標
vue怎麼用svg--點擊這裏，很簡單，就三行代碼，我們直接用。
首先在iconfont下載我們須要用的svg素材，放到src/svg文件下

使用時直接用icon便可，name等於要引用的svg的文件名字

<icon name="miste"></icon>

由於是在Mintui 的tabbar組件裏使用，因此還要加上 slot="icon"，代碼修改以下

<template>
  <div>
    <mt-tabbar v-model="$store.state.selected">
          <mt-tab-item id="miste">
            <icon slot="icon" name="miste"></icon>
            外賣 
          </mt-tab-item>
          <mt-tab-item id="order"> 
            <icon slot="icon" name="order"></icon>
            訂單
          </mt-tab-item>
          <mt-tab-item id="search">
            <icon slot="icon" name="search"></icon>
            搜索
          </mt-tab-item>
          <mt-tab-item id="profile">
            <icon slot="icon" name="profile"></icon>
            個人
          </mt-tab-item>
    </mt-tabbar>
  </div>
</template>

頁面以下

使用成功！可是你們可能發現，svg圖標選中時不會自動變色，那我們就手動來改。首先建立一個class on爲選中狀態

.on{
    fill:#26a2ff;
}

注意，svg改變顏色不能用color而是要用fill。如今狀態寫好了，問題是何時給元素加上去？只能在點擊足部導航時添加，點擊導航目前只發生了一件事--selected變爲選中的元素的ID。那咱們就根據selected的值來添加class，能夠狠狠的點擊這裏來查看官方文檔。代碼修改以下

<template>
  <div>
    <mt-tabbar v-model="$store.state.selected">
          <mt-tab-item id="miste">
            <icon slot="icon" v-bind:class="[ $store.state.selected=='miste'? 'on' : '']" name="miste" ></icon>
            外賣 
          </mt-tab-item>
          <mt-tab-item id="order"> 
            <icon slot="icon" v-bind:class="[ $store.state.selected=='order'? 'on' : '']" name="order"></icon>
            訂單
          </mt-tab-item>
          <mt-tab-item id="search">
            <icon slot="icon" v-bind:class="[ $store.state.selected=='search'? 'on' : '']" name="search"></icon>
            搜索
          </mt-tab-item>
          <mt-tab-item id="profile">
            <icon v-bind:class="[ $store.state.selected=='profile'? 'on' : '']" slot="icon" name="profile"></icon>
            個人
          </mt-tab-item>
    </mt-tabbar>
  </div>
</template>

看看頁面

恩？尚未變色？ onclass咱們已經加上了，可是被他本身的fill屬性覆蓋了。那咱們就刪除，打開svg下的svg圖標，將fill屬性刪除

查看頁面

變色成功！

7.3路由跳轉
如今foot.vue點擊只會變色，並無切換頁面，我們foot.vue引進每一個要用的頁面裏，代碼以下

由於foot.vue只改變了vuex下的selected的值，因此咱們要根據selected的值來進行路由跳轉。在foot.vue的計算屬性裏修改以下

computed:{
  //計算屬性
    gopage:function(){
        return this.$store.state.selected
    }
  },

這樣gopage永遠返回最新的selected值。可是我們在哪裏調用gopage呢？在watch裏調用

watch:{
      gopage(newval,oldval){
          this.$router.push(newval);
      }
  }

watch能夠監聽state也能夠監聽計算屬性computed，當他們的值改變時，就會發生回調，接收兩個參數，第一個是改變後的新值，第二個是改變前的舊值。foot.vue總體代碼以下

<template>
  <div>
    <mt-tabbar v-model="$store.state.selected">
          <mt-tab-item id="miste">
            <icon slot="icon" v-bind:class="[ $store.state.selected=='miste'? 'on' : '']" name="miste" ></icon>
            外賣 
          </mt-tab-item>
          <mt-tab-item id="order"> 
            <icon slot="icon" v-bind:class="[ $store.state.selected=='order'? 'on' : '']" name="order"></icon>
            訂單
          </mt-tab-item>
          <mt-tab-item id="search">
            <icon slot="icon" v-bind:class="[ $store.state.selected=='search'? 'on' : '']" name="search"></icon>
            搜索
          </mt-tab-item>
          <mt-tab-item id="profile">
            <icon v-bind:class="[ $store.state.selected=='profile'? 'on' : '']" slot="icon" name="profile"></icon>
            個人
          </mt-tab-item>
    </mt-tabbar>
  </div>
</template>

<script>

export default {
  data () {
    return {
      
    }
  },
  components:{
  //註冊組件

  },
  mounted:function(){
  //生命週期
      
  },
  computed:{
  //計算屬性
    gopage:function(){
        return this.$store.state.selected
    }
  },
  methods:{
  //函數
      
  },
  watch:{
      gopage(newval,oldval){
          this.$router.push(newval);
      }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.on{
    fill:#26a2ff;
}
</style>

頁面試試

ok！foot組件寫完了。我們如今來寫miste.vue