【vue作业】vue实现海贼王网页介绍--动漫网站设计

1、引言

你是否有过相关设计结课作业,课程设计无处下手，网页要求的总数量太多？没有合适的模板？数据库，java，python，vue，html作业复杂工程量过大？毕设毫无头绪等等一系列问题。你想要解决的问题，在微信公众号“coding加油站”中全部会得到解决

2、作品介绍

vue实现海贼王网页采用vue技术来实现，符合所学知识体系，适用于常见的作业以及课程设计，需要获取更多的作品，请关注微信公众号：coding加油站，获取，如需更多资料，可在微信后台留言。欢迎大家来提问，交流学习。

2.1、作品简介方面 

vue实现海贼王网页采用常规方式来实现，符合绝大部分的要求。代码配置有相关文档讲解，如需从代码中学到知识点，那么这个作品将是你的不二之选

2.2、作品二次开发工具

此作品代码相对简单，基本使用课堂中所学知识点来完成，只需要修改相关的介绍文字，一些图片，就可以改为自己独一无二的代码，网页作品下载后可使用任意编辑软件（例如：DW、HBuilder、NotePAD 、Vscode 、Sublime 、Webstorm 所有编辑器均可使用），java，python等相关作业使用自己常使用的工具亦可完成相关二次开发。

2.3、作品技术介绍

vue作品技术方面：使用vue技术开发的网站，涉及常见的vue指令，如v-for，v-if，v-show，v-html等的使用，包含watch，计算属性等常见功能的开发，以及组件的使用，使用vue相关全家桶的使用，运用了v-router来作为路由，完全符合常见的网站开发技术。同时也会使用html5，以及css3等相关技术完成技术的布局，在本作品中，会使用常见的布局，常见的浮动布局，flex布局都会有使用到哦。

作品演示：

【coding加油站】vue网站设计---海贼王人物介绍

作品图片演示：

 

一些代码：

<style lang="less" scoped>
@import '../assets/less/hero/hero.less';
</style>

<template>
<div class="main">
  <top></top>
  <div class="hero">
    <div class="hero-img">
      <img :src="'../static/images/heros/'+$route.params.id+'.png'" :alt="$route.params.id">
    </div>
    <div class="hero-tro">
      <h1>{{hero[$route.params.id].fullName}}</h1>
      <h2>{{hero[$route.params.id].price}}</h2>
      <p class="hero-intro">
        {{hero[$route.params.id].troduction}}
      </p>
    </div>
  </div>
  <bottom></bottom>
</div>
</template>

<script>
import top from '../components/common/header'
import bottom from '../components/common/footer'
import hero from '../model/hero'

export default {
  name: 'hero',
  data() {
    return {
      hero
    }
  },
  components: {
    top,
    bottom
  }
}
</script>

<style lang="less" scoped>
@import '../assets/less/sky.less';
</style>

<template>
<div>
  <video class="background_video" loop muted></video>
  <div class="video_cover"></div>
  <div class="video_controls">
    <span class="play">
				<img src="../assets/images/flag/play.png">
			</span>
    <span class="pause">
				<img src="../assets/images/flag/pause.png">
			</span>
  </div>
  <section class="content">
    <a class="back" href="/">
				back to index
			</a>
  </section>
</div>
</template>

<script>
import SimplexNoise from '../assets/js/fv.js'
import piratesContent from '../components/piratesContent'

export default {
  data() {
    return {

    }
  },
  components: {
    piratesContent
  },
  mounted() {
    var bv = new Fideo();
    bv.init({
      // 视频区域
      videoEl: document.querySelector('.background_video'),

      // 容器区域
      container: document.querySelector('body'),

      // 是否适配屏幕
      resize: true,

      // 自动播放默认是 true
      // autoplay: false,

      isMobile: window.matchMedia('(max-width: 768px)').matches,
      playButton: document.querySelector('#play'),
      pauseButton: document.querySelector('#pause'),

      // 视频源，适配多格式
      src: [{
        src: 'static/images/flag/night.mp4',
        type: 'video/mp4'
      }],

      // 初始加载
      onLoad: function() {
        document.querySelector('.video_cover').style.display = 'none';
      }
    });
  }
}
</script>

 完整代码，关注微信公众号：coding加油站 获取