Vue 单文件组件 2-优快云博客

{
  "code": 200,
  "data": {
    "data": [
      {
        "book_id": 1372,
        "title": "我有一座冒险屋",
        "cover": "https://tsj.youdubook.com/cover/book_cover_1372.jpg",
        "score": "7.1",
        "score_people_number": 2650,
        "word_number": 3077381,
        "word_number_name": "307.74万字",
        "author_nickname": "我会修空调",
        "tag": [
          "腹黑",
          "都市异能",
          "好看",
          "轻松",
          "无女主",
          "战斗",
          "生存",
          "热血",
          "都市",
          "金手指",
          "第一人称",
          "悬疑",
          "侦探推理"
        ],
        "info": "【本作品简体实体书由次元书馆出版】陈歌继承了失踪父母留下的冒险屋，无奈生意萧条，直到整理冒险屋时意外发现的手机改变了这一切。只要完成手机每日布置的不同难度的任务，冒险屋就能得到修缮甚至扩建！于是陈歌开始在各大禁地里探险取材，将其中场景元素纳入到自己的冒险屋中。随着前来参观的游客们各种惊声尖叫，冒险屋一举成名！然而虽然任务带来的好处越来越多，但其中隐患也慢慢显现，甚至父母失踪的线索似乎也藏其中……书友一群819098233；二群724779368；三群946284995",
        "chapter_number": 1241,
        "source_name": "起点",
        "process_name": "完结",
        "second_type_name": "悬疑",
        "third_type_name": "",
        "author_id": 1148,
        "last_chapter_time": "2020-11-22 21:03:06",
        "first_subscribe": "--",
        "score_data": {
          "score_id": 1553422,
          "score": 10,
          "content": "另类的灵异向搞笑爽文！主角大力出奇迹，追着恶鬼四处跑，开一代灵异爽文之先河~从他引领起的风尚来看就知道这本书有多牛了，男频女频无数搞笑流灵异文流水般浮现，却都不及此开山祖师！",
          "image": [],
          "like_number": 0,
          "is_like": false,
          "reply_number": 0,
          "coll_number": 0,
          "is_coll": false,
          "create_time": "2025-01-16 14:03:57",
          "is_self": false,
          "user_id": 19418,
          "user": {
            "user_id": 19418,
            "nickname": "阿俊发发发",
            "avatar": "https://tsj.youdubook.com/default/user/default_avatar.png",
            "user_exp_level_name": "LV.2",
            "user_exp_level": 2,
            "follow_status": 0
          }
        }
      }

请求静态数据

在sidebar组件中，通过fetch请求本地静态json文件内容，然后渲染页面。

示例如下：

<template>
    <div>
        <ul>
            <li v-for="data in datalist" :key="data.book_id">
                {{data.title}}
                </li>
        </ul>
    </div>
</template>
<script>
export default {
  data () {
    return {
      datalist: []
    }
  },
  mounted () {
    fetch('./ebook.json')
      .then(res => res.json())
      .then(res => {
        // console.log(res)
        this.datalist = res.data.data
      })
  }
}
</script>

效果如下：

Axios

下载axios

Npm / cnpm

npm install axios

注意：如果使用此命令出现依赖不兼容问题，可更换命令为

npm install axios -S --legacy-peer-deps

改为axios

把上述fetch请求改为axios发起请求。

示例如下：

<script>
import axios from 'axios'
export default {
  data () {
    return {
      datalist: []
    }
  },
  mounted () {
    // fetch('./ebook.json')
    //   .then(res => res.json())
    //   .then(res => {
    //     // console.log(res)
    //     this.datalist = res.data.data
    //   })
    axios.get('./ebook.json').then(res => {
      this.datalist = res.data.data.data
    })
  }
}
</script>

指令

自定义指令，处理项目开发中遇到的问题。

创建指令

创建自定义指令，对元素设定格式；示例如下：

<script>
// ES6 导出规范 -babel(ES6 ==> ES5)
import navbar from './mycomponents/NavBar'
import sidebar from './mycomponents/SideBar'
import Vue from 'vue'

Vue.directive('hello', {
  inserted (el, binding) {
    el.style.border = '1px solid black'
  }
})
...
</script>

使用指令

当盒子使用指令时，自动对其增加边框样式。

示例如下：

<div v-hello>这是指令内容</div>

过滤器

注册并使用过滤器

显示小说标签，并对标签进行过滤器处理（标签格式为数组格式，处理为字符串）。

示例如下：

<template>
    <div>
        <ul>
            <li v-for="data in datalist" :key="data.book_id">
                <div><img :src="data.cover" width="100px" alt=""></div>
                <div>{{data.title}}</div>
                <div>标签：{{data.tag | tagName}}</div>
                </li>
        </ul>
    </div>
</template>
<script>
import axios from 'axios'
import Vue from 'vue'

Vue.filter('tagName', (path) => {
  return path.join(' ')
})
......
</script>