Vue应用小计

第一次使用Vue，不知道怎么用，只知道做出来界面挺好看的，开发也方便。

到vue官网看了一下，文字叙述实在太多，很多都没有用过，也没什么概念，看完了里面的视频，本来想着就用uni-app做来着，但是查了查，uni-app是挺强大的，但我只是做一个项目实践作业，没必要用uni-app，但是要解决前端界面组件问题，找到了element ui，是饿了么做的，风格统一。

跟着视频（B站上管理系统开发），用脚手架搭了一个前端项目，

项目目录大概是这样子，views文件夹放了一些父组件界面（我的理解就是一个完整的界面），components里面放的是组件（多个界面都会用到的），

下面的代码介绍了一个子组件（Card）给父组件（News）传值，父组件获得之后，查询数据库，给另一个子组件（Newslist）赋值

News.vue，里面加了注释（太累了）

<template>
  <div>
   
    <div style="margin-top: 20px;"></div>
    <el-row justify="center" type="flex" class="row-bg">
      <el-col :span='21'>
        <NewsList :items="items"></NewsList>
      </el-col>
      <el-col :span='3'>
        <Card :cards="cards" @funm="typeMsg"></Card>
      </el-col>
    </el-row>
    <el-backtop style="background-color: #000000;"></el-backtop>
  </div>
</template>

<script>
import NewsList from '../components/NewsList.vue'
import Card from '../components/Card.vue'
import qs from 'qs'
export default {
  name: 'News',
  components: {
    NavManu,
    Search,
    NewsList,
    Card
  },
  data () {
    return {
      // 获取新闻列表的参数
      listNum: 20,
      items: [],
      cards: []
    }
  },
  
  methods: {
    //@funm="typeMsg",对应的就是这个函数，访问后台数据库，
    //给<NewsList :items="items"></NewsList>的items赋值，那这个参数data是哪里来的呢
    //没错，这是子组件给本父组件传的值
    async typeMsg (data) {
      const txt = data
      const data2 = { ntid: txt, listNum: this.listNum }
      this.$message.success('正在加载')
      const res = await this.$http.post('newsinfo/typeList', qs.stringify(data2))
      if (res.data) {
        this.items = res.data
      } else {
        this.$message.error('未得到该分类信息')
      }
    },
    //这里是给上面<Card :cards="cards" @funm="typeMsg"></Card>中的cards赋值
    async getType () {
      const res2 = await this.$http.get('newstype/findAll')
      this.cards = res2.data
    },

  },
  
//下面这两个是，列表界面跳转到详情界面，不刷新列表界面（keepAlive也可以做到，但是没法有效删除缓存，不行）
  activated () {
    if (!this.$route.meta.isUseCache) {
      this.$forceUpdate()
      this.getType()
      console.log('News activated 执行了')
    }
  },
  
  beforeRouteLeave (to, from, next) {
    if (to.name === 'Details') {
      to.meta.isUseCache = false
      // console.log('123')
      next()
    } else {
      from.meta.isUseCache = false
      next()
    }
  }

}
</script>

<style>
</style>

下面是子组件Card，类似导航栏，点击之后会给父界面传值

Card.vue

<template>
  <div>
    <el-card class="box-card" shadow="never">
    //这里就是判断当前点击的是哪个，动态的添加样式
      <div v-for="(item,index) in cards" :key="index" class="text item" v-bind:style="index==current?'color: #21CE55;font-weight:1000':''" >
        <a @click='goDetails(item.ntid,index)' title="点击查看该分类新闻">
        {
   
   { item.ntname}}
        </a>
         <hr style="background-color: #EBEEF5;height:1px;border:none;width: 100%;"/>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  name: 'Card',
  props: {
    //这个数据是从父组件传过来的，这边只是定义一下
    cards: Array
  },
  data () {
    return {
      //这个是控制当前那个显示颜色，
      current: '12'
    }
  },
  methods: {
    // 函数，这里是给父组件传值ntid，
//funm为那个在上面那个<Card :cards="cards" @funm="typeMsg"></Card>
    goDetails (ntid, index) {
        //点击之后，把index传过来，就有css样式了
      this.current = index
      // console.log(ntid)
      this.$emit('funm', ntid)
    }
  }
}

</script>

<style>
css样式
</style>

上面有说道News的页面缓存，在router下index.js是这样做的

{ path: '/News', name: 'News', component: News, meta: { isUseCache: false, keepAlive: true } },

没有直接用keepAlive，应为keepAlive有个问题，无法移除缓存，如果直接使用this.$destory(),出现问题就是这个界面再打开之后不能就缓存了，找了很久，上面这个方法还可以接受。

先说到这吧，本来就想赚积分的，当时写的时候也没加注释，写着写着就想把走过的坑都说一下，太累了

上面的实现方法借鉴了多位博主的经验，时间久远，就不列举了

猜你喜欢