vuejs學習筆記：制作pokemon記錄器（一周目）

melody_lql 發(fā)布于2019-08-21 10:55 / 1939人閱讀

摘要：主顯示區(qū)我們在中先引用另外兩個組件并且修改路由配置組件姓名屬性性別種類身高體重捕獲成功請?zhí)钊胪暾`信息通過方法派發(fā)一個事件，用來保存新捕獲的精靈對于需添加并且設(shè)置名字與種類未填寫時無法提交。

花了兩周，看了許久的文檔和案例，還是要實踐一下，于是做了這個demo，設(shè)計就這樣看吧，我的設(shè)計水平真心不好T^T，一周目的demo是靜態(tài)的，二周目再搭建數(shù)據(jù)層。

項目倉庫：https://github.com/gknpezgssb...

項目簡介

鑒于最近的pokemon大熱，這次的demo也選擇了pokemon主題的（其實我是想選守望屁股來著的）。

主體

項目結(jié)構(gòu)：

Demo：

主顯示區(qū)域（這里由vue－router控制）可進行三個界面的切換；

功能區(qū)域（由logo按鈕，搜索欄，pokemon列表，精靈捕獲記錄四個部分組成）

各部分功能

點擊捕獲按鈕，主界面切換，可以記錄pokemon信息，點擊捕獲成功后列表會自動更新（原諒科幻迷的我 (/≥▽≤/)）

可以在搜索欄中用你給精靈起的名字尋找你的pokemon

點擊具體精靈會顯示他的信息

一周目制作 腳手架

vue-cli是一款腳手架工具，使用他能幫你自動生成模版，免去繁雜的配置工作，這里我選用了webpack的模版。

首先安裝vue-cli：

npm install -g vue-cli

之后進入項目目錄，安裝依賴的包：

vue init webpack vue-time-tracker
cd vue-time-tracker
npm install

此時，執(zhí)行 npm run dev，在地址欄輸入localhost:8080，如果成功看到下圖就說明你已經(jīng)搭好框架了

main.js 與 App.vue 配置

首先將 index.html 改寫成



  
    
    yourpokemon

安裝vue-router

npm install vue-router --save

在main.js加入如下代碼：

import Vue from "vue"  
import App from "./App"  
import Home from "./components/Home"
import VueRouter from "vue-router"
Vue.use(VueRouter)
const router = new VueRouter()
router.map({
  "/home": {
    component: Home
  }
})
router.redirect({
  "*": "/home"
})

router.start(App, "#app")

這里暫時先引用Home組件。

我們引用了vue與vue-router，并且通過map配置了路由，這樣在任何標簽（不限于a）上使用v-link都能實現(xiàn)路由變化。

這樣App.vue中的內(nèi)容會替換掉到index里的div，這里左部的主題區(qū)域用vue-router來控制，右邊的功能區(qū)域自定義組件asidebar。

接下來我們在App.vue中添加

import Asidebar from "./components/Asidebar.vue"
export default {
  components: {
    "asidebar": Asidebar
  },
  data () {
    let monstersData = [
      {
        name: "艾薩克·阿西莫夫",
        type: "thunder",
        species: "皮卡丘",
        height: "0.4m",
        weight: "6.0kg ",
        sex: "male"
      },
      {
        name: "亞瑟·克拉克",
        type: "grass",
        species: "妙蛙種子",
        height: "0.7m",
        weight: "6.9kg ",
        sex: "female"
      }
    ]
    return {
      monsters: monstersData  
    }
  },
  events: {
  }
}

這里引用組件Asidebar，偽造兩組數(shù)據(jù)，通過v-bind進行父子組件通信，詳見使用props傳遞數(shù)據(jù)。

最后往App.vue添加樣式

*{
  margin: 0;
  padding: 0;
  box-sizing:border-box;
}
#pokemon{
  width: 100vw;
  height: 100vh;
  background-image: url(./assets/bg.jpg);
  background-position: center center;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  justify-content: center;
  -ms-align-items: center;
  align-items: center;
}
.gb-main{
  width: 500px;
  border: 20px solid  #444;
  float: left;
  height: 100%;
}
.game-boy{
  box-shadow: 0 0 15px #333;
  width: 800px;
  height: 450px;
  background-color: #fff;
  border: 25px solid  #fc0;
  border-radius: 18px 18px 13px 13px; 
}

倒騰 Sidebar.vue

首先添加html：

這里設(shè)置了v-link使

logo按鈕能訪問home頁面

li標簽?zāi)茉L問detail頁面

button按鈕能訪問new頁面

可以看到搜索欄綁定了v-model，通過他結(jié)合li上的search函數(shù)即可實現(xiàn)列表的搜索

在li上的click事件，綁定了show函數(shù)，他實現(xiàn)了一個事件派發(fā)，傳遞到App.vue后再由其進行廣播。js代碼如下：

export default {
  data () {
    return {search: ""}
  },
  props: ["items"],
  filters: {
    search (name) {
      return name.filter(item => item.name.indexOf(this.search) > -1)
    }
  },
  methods: {
    show (item) {
      let index = this.items.indexOf(item)
      this.$dispatch("findMonster", index)
    }
  }
    }

css代碼如下：

.gb-aside{
    position: relative;
    float: right;
    width: 250px;
    background-color: #FC0;
    height: 100%;
    padding-left: 25px;
}
.gb-list{
    list-style: none;
    background-color: #fff;
    width: 100%;
    margin-top: 20px;
    margin-bottom: 20px;
    height: 200px;
    overflow-y: scroll;
    overflow-x:hidden; 
}
.monster{
    cursor: pointer;
    width: 100%;
    height: 40px;
    border-bottom: 1px solid  #dadada;
    position: relative;
    padding-left: 43px;
    position: relative;
}
.m-name{
    width: 150px;
    line-height: 40px;
    font-size: 12px;
    color: #666;
    white-space: nowrap;
    overflow: hidden;
    -ms-text-overflow: ellipsis;
    text-overflow: ellipsis;
}
.m-name span{
    font-size: 14px;
    color: #333;
}
.m-img.grass{
    background-image: url(../assets/grass.png);
}
.m-img.thunder{
    background-image: url(../assets/thunder.png);
}
.m-img.water{
    background-image: url(../assets/water.png);
}
.m-img.fire{
    background-image: url(../assets/fire.png);
}
.m-img.normal{
    background-image: url(../assets/normal.png);
}
.m-img.chonoryoku{
    background-image: url(../assets/chonoryoku.png);
}
.m-img.wrestle{
    background-image: url(../assets/wrestle.png);
}
.m-img{
    background-position: center center;
    -webkit-background-size: 23px 23px;
    background-size: 23px 23px;
    background-repeat: no-repeat;
    width: 30px;
    height: 40px;
    position: absolute;
    left: 5px;
    top: 0;
}
.m-img img{
    width: 25px;
    height: 25px;
}
.gb-logo{
    height: 60px;
    background-image: url(../assets/logo.png);
    background-repeat: no-repeat;
    background-position: center top;
    -webkit-background-size: auto 20px;
    background-size: auto 40px;
    cursor: pointer;
}
.gb-search{
    width: 100%;
    display: block;
    border: 0px;
    height: 40px;
    padding-left: 1em;
    font-size: 18px;
    color: #333;
    /*margin-top: 60px;*/
}
.gb-catch{
    background-color: #fff;
    cursor: pointer;
    position: absolute;
    bottom: 10px;
    left: 25px;
    right: 0;
    margin: 0px auto;
    border: 0;
    width: 150px;
    height: 50px;
    border-radius: 25px;
    padding-left: 70px;
    font-size: 18px;
    line-height: 50px;
    color: #666;
    text-align: left;
}
.gb-catch::before{
    background-image: url(../assets/ball.png);
    background-position: center center;
    background-repeat: no-repeat;
    -webkit-background-size:auto 40px ;
    background-size:auto 40px ;
    content:"";
    position: absolute;
    left: 3px;
    top: 0;
    width: 50px;
    height: 50px;
    animation-name: catch-pokemon;
    animation-duration:2s;
    animation-timing-function:linear;
    animation-iteration-count:infinite;
    animation-direction:normal;
}
@keyframes catch-pokemon {
    from { 
        transform:rotate(0deg);
    }
    to {  
        transform:rotate(360deg);
    }
}

我門還需對App.vue添加事件

events: {
    findMonster (index) {
      let monster = this.monsters[index]
      this.$broadcast("showMonster", monster)
    }
  }

這里接受到事件派發(fā)的App.vue又進行了一次事件廣播實現(xiàn)了子組件的通信，當然還有更好的方式這里純粹是為了使用dispatch和broadcast.(￣▽￣")

關(guān)于這塊詳見vue api broadcast和dispatch。

主顯示區(qū)

我們在main.js中先引用另外兩個組件

import New from "./components/NewMonster"
import Detail from "./components/Detail"

//并且修改路由配置

router.map({
  "/home": {
    component: Home
  },
  "/new": {
    component: New
  },
  "/detail": {
    component: Detail
  }
})

NewMonster 組件

通過save方法派發(fā)一個事件，用來保存新捕獲的精靈；

對于App需添加events

events: {
    catch (monster) {
      this.monsters.push(monster)
    },
    findMonster (index) {
      let monster = this.monsters[index]
      this.$broadcast("showMonster", monster)
    }
  }

并且設(shè)置名字與種類未填寫時無法提交。

Detail 組件

App.vue廣播的時間被Detail收到從而實現(xiàn)右側(cè)列表點擊左側(cè)內(nèi)容切換的效果。

Home 組件

這是一個純粹靜態(tài)的組件，代碼也很簡短：

總結(jié)

這只是一個很粗糙的試手Demo，有很多代碼需要優(yōu)化，會在二周目進行，二周目也會搭建真實的數(shù)據(jù)層；

demo真的沒有什么實際的用處╮（╯＿╰）╭ ，但是vue卻是實用且精致的典范

GPU云服務(wù)器云服務(wù)器學習筆記學習筆記一基礎(chǔ)學習筆記深度學習筆記

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/86426.html

發(fā)表評論

登陸后可評論

0條評論

melody_lql

男|高級講師

我要關(guān)注我要私信

TA的文章

java單詞集

閱讀 3656·2021-10-12 10:11
如何遠程連接虛擬主機-怎么才能用遠程桌面控制連接到虛擬主機上？

閱讀 1020·2021-09-22 15:42
瞅瞅Facebook是怎么保證CSS代碼質(zhì)量的

閱讀 3472·2019-08-30 13:06
原型模式故事鏈(4)--JS執(zhí)行上下文、變量提升、函數(shù)聲明

閱讀 912·2019-08-29 17:05
在html<title></title>標簽添加圖標，網(wǎng)頁title左邊顯示

閱讀 1657·2019-08-29 12:21
WFeB全球免費圖書館 World Free eBook

閱讀 2386·2019-08-29 11:31
敏捷項目的不確定性管理

閱讀 1141·2019-08-23 18:37
vue配置font-awesome5

閱讀 1263·2019-08-23 14:58

国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

vuejs學習筆記：制作pokemon記錄器（一周目）

{{item.species}}：{{item.name}}

{{monster.name}}

{{monster.species}}

{{monster.height}}

{{monster.weight}}

{{monster.sex}}

{{msg}}

相關(guān)文章

**[vuejs短文]使用vue-transition制作小小輪播圖**

OpenDigg前端開源項目周報1219

OpenDigg前端開源項目周報1219

OpenDigg前端開源項目周報1219

發(fā)表評論

0條評論

melody_lql

男|高級講師

TA的文章

java單詞集

如何遠程連接虛擬主機-怎么才能用遠程桌面控制連接到虛擬主機上？

瞅瞅Facebook是怎么保證CSS代碼質(zhì)量的

原型模式故事鏈(4)--JS執(zhí)行上下文、變量提升、函數(shù)聲明

在html<title></title>標簽添加圖標，網(wǎng)頁title左邊顯示

WFeB全球免費圖書館 World Free eBook

敏捷項目的不確定性管理

vue配置font-awesome5

最新活動

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

vuejs學習筆記：制作pokemon記錄器（一周目）

{{item.species}}：{{item.name}}

{{monster.name}}

{{monster.species}}

{{monster.height}}

{{monster.weight}}

{{monster.sex}}

{{msg}}

相關(guān)文章

發(fā)表評論

0條評論

男|高級講師

TA的文章

最新活動

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！