亚洲成av人无码综合在线观看,肉色丝袜足j视频国产,吃瓜视频最全观看

Vue移動項目總結

一、vue-cli創建項目并配置vue路由
http://www.lxweimin.com/p/a4eb7d58b6ba
二、全局組件Footer(底部)

組件Footer
底部高亮(根據點擊光標發生改變)

<template>
    <div>
        <footer v-if="$store.state.showFooter">
      <router-link :class="{active: '/movie/list'===$route.path}" @click.native="change('/movie/list')" class="fdc ai-center" to="/movie/list">
      <!-- 簡單敘述 native 的功能 由于router-link 是vue自帶的而不是原生 因此加上的點擊事件沒有用 但是當加上native的時候就相當于變成了原生 -->
        <i class="iconfont icon-dianying f20"></i>
        <p class="f10 orangr  mg-t-5 pd-b-3">電影</p>
      </router-link>
      <router-link :class="{active: '/comner'===$route.path}" @click.native="change('/comner')" class="fdc ai-center" to="/comner">
        <i class="iconfont icon-yingyuana f20"></i>
        <p class="f10 gray mg-t-5 pd-b-3">影院</p>
      </router-link>
      <router-link :class="{active: '/pintuan'===$route.path}" @click.native="change('/pintuan')" class="fdc ai-center" to="/pintuan">
        <i class="iconfont icon-pintuandingdan f20"></i>
        <p class="f10 gray mg-t-5 pd-b-3">9.9拼團</p>
      </router-link>
      <router-link :class="{active: '/my'===$route.path}" @click.native="change('/my')" class="fdc ai-center" to="/my">
        <i class="iconfont icon-wode f20"></i>
        <p class="f10 gray mg-t-5 pd-b-3">我的</p>
      </router-link>
    </footer>
    </div>
</template>

<script>
/* 需求：點擊哪個亮哪個
  思路：設置一個樣式，根據點擊把樣式賦給那個標簽 
  :class="{樣式名: 判斷}" 動態樣式  當判斷為true時把類賦給標簽
  在vue標簽里面本身就有點擊功能的標簽里添加點擊事件需要在點擊事件后面加上native
*/
export default {
  data() {
    return {
      // a:0,
    }
  },
  created() {
    // this.isa();
  },
  methods:{
    change(path){
      this.$router.replace(path);
      // 這種方法可以解決光標錯位的bug
    },
  }
}
</script>

<style lang="less" scoped>
.active{
  .iconfont{
    color: orange;
  }
  p{
    color: orange;
  }
}
</style>

這里面的知識點有動態class-vuex-native轉變為原生-$route.path獲取當前路由路徑
1.vuex知識點可以看： http://www.lxweimin.com/p/1610131bf096
2.動態class ： http://www.lxweimin.com/p/fd30bdac305c
3.native：使用vue的標簽的時候有些標簽是有自帶的事件的，倘若要自定義事件則需要用到native。
三、組件劃分
App為所有vue組件的根，全局組件可以在這個里面引入
router-view 路由視圖重要，因為路由視圖我們才能看到路由組件里的東西，否者就是空白詳情請看http://www.lxweimin.com/p/89cb6a570eed
下面我們以movie頁面為例介紹，其他頁面大同小異
一般父組件就只有一個router-view其他的內容都放在子路由或者小組件里面

組件的分層管理

movie路由視圖

1.這個組件里，index屬于最大的組件也是在路由里面定義了的，我們稱為路由組件，任何children里的為子路由組件，像這個頁面我們在index里放了一個router-view，

<template>
    <div>
        <router-view></router-view>
    </div>
</template>
<script>
export default {
}
</script>
<style>
</style>

2.然后這個頁面顯示我們給了子路由list，并且路由里默認顯示的也設置為list

{
        path:'/movie',
        component:() =>import('@/views/movie'),
        meta: {
            title: '電影',
            showFooter: true
        },
        // redirect 重定向 默認顯示的組件,
        redirect:'/movie/list',
        children:[
            {
                path: 'list',
                meta:{
                    title:'電影列表',
                    showFooter:true
                },
                component: () => import('@/views/movie/children/list'),
            },
    ]
}

3.list里面的內容都是由組件填充的

<template>
    <div>
        <Lb/>
        <mt-navbar class="page-part" v-model="selected">
      <mt-tab-item id="1">正在熱映</mt-tab-item>
      <mt-tab-item id="2">即將上映</mt-tab-item>
    </mt-navbar>

    <!-- tab-container -->
    <mt-tab-container v-model="selected">
      <mt-tab-container-item id="1">
        <New/>
      </mt-tab-container-item>
      <mt-tab-container-item id="2">
        <Futer/>
      </mt-tab-container-item>
    </mt-tab-container>
    </div>
</template>

<script>
import Lb from './components/Lb'
import New from './components/New'
import Futer from './components/Futer'
export default {
    data() {
        return {
            selected:'1'
        }
    },
    components:{
        Lb,
        New,
        Futer
    }
}
</script>

這里我們用了ui庫 mint-ui 使用方法可以看官網https://mint-ui.github.io/docs/#/zh-cn2
然后Lb組件是負責輪播圖，ui組件負責正在熱映導航部分，而里面的內容我們又分成兩個組件來做Futer,New,由視圖可見這兩個幾乎一樣只是內容不一樣

<template>
  <div>
    <ul>
        <template v-for="item in filmList"> 
            <Item :item="item" :key="item" ></Item>
        </template>
        <div class="mg-b-70"></div>
    </ul>
  </div>
</template>

<script>
import Item from './Item'
export default {
    data() {
        return {
            // 正在播放的type為1
            type:1,
            // 當前頁數
            pageNum:1,
            filmList:[]
        }
    },
    components:{
        Item
    },
    created(){
        this.getFilmList();
    },
    methods:{
        async getFilmList(){
            const url = '/film/getList';
            const res = await this.$http.get(url,{
                type:this.type,
                pageNum:this.pageNum
            })
            this.filmList = res.films;
        }
    }
};
</script>

根據不同的組件獲取不同的數據
由于靜態是相同的，我又分出一個組件item來裝共同部分

<template>
    <li>
        <div class="bd-t-gray">
        <div @click="togoxq" class="list fsb mg-t-20">
          <div class="mg-l-15">
            <img :src="item.poster" alt>
          </div>
          <div class="fg1 fsb mg-l-15 h100 fg1">
            <div class="lh-26">
              <div>
                <span class="f14">{{item.name}}</span>
                <span class="type mg-l-5 f12">{{up(item.item)}}</span>
              </div>
              <div>
                <span class="f12">觀眾評分</span>
                <span class="mg-l-5 red">{{item.grade}}</span>
              </div>
              <div class="text ofh w100pc h-26">
                <span class="f12">主演</span>
                <span class="mg-l-5 f12">{{toString(item.actors)}}</span>
                <!-- {{toString(item.actors)}} -->
              </div>
              <div>
                <span class="f12">{{item.nation}}|{{item.runtime}}分鐘</span>
              </div>
            </div>
          </div>
          <div class="fdcc">
          <router-link class="btn" to tag="button">購票</router-link>
          </div>
        </div>
      </div>
    </li>
</template>

<script>
export default {
    props:['item'],
    data(){
        return{

        }
    },
    methods:{
    // JSON數據單獨處理,JSON的parse方法用來把JSON數據轉成js數據
    // 單獨取出JSON里的name
    up(item){
      const a = JSON.parse(item)
      let b = a.name;
      return b;
    },
    // 拼接多個字符串
    toString(actors){
      const a = JSON.parse(actors);
      let str = '';
      for(let i=0;i<a.length;i++){
        let b = a[i].name + ' '
        str += b;
      }
      return str;
    },
    togoxq(){
      this.$router.push({path:'./xiangqing',query:{filmId:this.item.filmId}})
    }
    }
}
</script>

這里獲取數據的方式對比后臺界面又發生了改變
這是由于我們對獲取后臺數據的方法進行了封裝
詳細可以看http://www.lxweimin.com/p/d51a161958e5
由于后臺數據里有JSON格式的數據詳情可以看https://www.liaoxuefeng.com/wiki/001434446689867b27157e896e74d51a89c25cc8b43bdb3000/001434499490767fe5a0e31e17e44b69dcd1196f7ec6fc6000
我們常用的就是把js轉為JSON，或把JSON轉為js
這里把JSON轉為js格式，用到了parse()
當我們點擊movie里的電影時跳轉到電影詳情頁面，電影詳情頁面我們用子路由組件xiangqing來顯示，這個時候涉及到動態傳參，可看下面鏈接http://www.lxweimin.com/p/89cb6a570eed

item組件里，我們用點擊事件跳轉到詳情頁面并通過$router.push傳參
togoxq(){
      this.$router.push({path:'./xiangqing',query:{filmId:this.item.filmId}})
    }

對應的我們在詳情頁面接受參數
this.filmId = this.$route.query.filmId;
得到參數然后通過后臺接后獲取對應的數據然后再渲染頁面

四、小總結

vue項目里，我們需要分析頁面的組成然后分組件實現，做到高復用，細用
共同部分用組件來做，實現高復用
單個復雜的我們提出來用單個組件做，實現細用

五、項目知識點總結

src的組成部分(除main.js、App.vue)

http://www.lxweimin.com/p/87f040e3f87b
assets放我們的less、css、img、font文件
components 放全局組件
子路由大部分擁有的情況下使用比如導航欄
filter 放過濾器文件
當數據出現需要另外處理的時候，可以把處理函數寫到過濾器文件里實現高復用
{{需處理數據 | 過濾函數}}
router 當路由配置文件
單頁應用APS最主要的部分，不可或缺
store 放vuex文件
實現跨組件通信，多個組件共用一個數據，并都可以改，比如都需要判斷是否登錄的時候就可以用到
utils 放我們封裝的方法
對經常用并且代碼繁多的函數方法進行封裝，使得使用更簡便
rem 移動端適配http://www.lxweimin.com/p/91ac1690be89
插槽 slot
http://www.lxweimin.com/p/e6472b18f4c2

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美国产综合欧美视频

Vue移動項目

Vue移動項目

Vue移動項目總結

推薦閱讀更多精彩內容

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美 国产 综合 欧美 视频

Vue移動項目

Vue移動項目總結

推薦閱讀更多精彩內容

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美国产综合欧美视频