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

1、引言

2、作品介绍

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布局都会有使用到哦。

作品演示：

作品图片演示：

一些代码：

<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>