Vue组件化开发小demo练习

最新推荐文章于 2024-04-30 11:47:00 发布

gxgalaxy

最新推荐文章于 2024-04-30 11:47:00 发布

阅读量980

点赞数

分类专栏： Vue

本文链接：https://blog.csdn.net/gxgalaxy/article/details/105103732

版权

Vue 专栏收录该内容

14 篇文章 1 订阅

订阅专栏

vue组件化知识详解：地址
使用vue组件化开发完成以下电影展示页面
在这里插入图片描述
ajax请求地址：地址
目录结构：

其中movieService.js为ajax请求获取数据
MovieContainer.js该组件仅用于获取电影数据
MovieItem.js 该组件用于展示一条电影
MovieList.js 该组件用于展示多个电影
index.js 该组件负责新创建一个Vue实例

html文件：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <link rel="stylesheet" href="./src/assets/index.css">
  <script src="./vue/vue.js"></script>
  <script src="./src/index.js" type="module"></script>
  <div id="app"></div>

</head>
<body>
  
</body>
</html>

css文件：

.pager {
    text-align: center;
    margin-bottom: 100px;
}

.pager .pager-item {
    display: inline-block;
    padding: 5px 7px;
    border: 1px solid #ccc;
    margin: 8px;
    cursor: pointer;
    color: rgb(96, 96, 224);
}

.pager .pager-item.disabled {
    color: #ccc;
    cursor: not-allowed;
}

.pager .pager-item.active {
    color: #f40;
    border: none;
    cursor: auto;
}

.data-container {
    width: 1000px;
    margin: 30px auto;
}

.data-container .data{
    overflow: hidden;
    border-bottom: 1px dashed #ccc;
    padding: 30px 0;
}

.data-container .poster{
    width: 150px;
    height: 200px;
    float: left;
    margin-right: 20px;
}

.data-container .poster img{
    width: 100%;
    height: 100%;
}

.data-container .words{
    overflow: hidden;
    line-height: 1.5;
}

.data-container .words .title{
    margin: 0;
    margin-bottom: 10px;
}

.data-container .words .attach{
    color: #888;
    font-size: 14px;
    line-height: 1.5;
    margin-bottom: 10px;
}

.data-container .words .attach span{
    margin-right: 20px;
}

.data-container .words .desc{
    color: #666;
}

movieService.js

export default {
  async getMovies(page, limit) {
    var url = `http://yuanjin.tech:5005/api/movie?page=${page}&limit=${limit}`;
    var datas = await fetch(url).then(resp => resp.json());
    return datas;
  },
  async getMovie(id) {
    var url = `http://yuanjin.tech:5005/api/movie/${id}`;
    var datas = await fetch(url).then(resp =>
      resp.json()
    );
    return datas;
  }
};

index.js

// 入口模式
// 负责新创建一个Vue实例
import App from "./App.js"
new Vue({
      el: "#app",
      components:{
        App
      },
      template:`<App/>`

});

最初版本App.js

import MovieItem from "./components/MovieItem.js"
var template = `
    <div class = "data-container">
      <MovieItem :movie = "movie"/>
    </div>
`;
export default{
  data() {
    return {
      movie:{
        poster:"https://img.alicdn.com/bao/uploaded/i4/TB1sK93RVXXXXcIXXXXXXXXXXXX_.jpg_300x300.jpg",
        name:"湄公河行动",
        ename:"meigonghe"

      }
    }
  },
  components:{
      MovieItem
  },
  template
}

首先我们先完成展示一条影片的展示
MovieItem.js

//一条电影
var template = `
        <div class="data">
        <div class="poster">
            <img :src="movie.poster" alt="">
        </div> 
        <div class="words">
            <h2 class="title">{{movie.name}}</h2> 
            <div class="attach">
            <span>英文名：{{movie.ename}}</span> 
            <span>类型：{{movie.type}}</span> 
            <br> 
            <span>上映地区：{{movie.area}}</span> 
            <span>上映时间：{{movie.upDate}}</span> 
            <span>时长：{{movie.time}}</span>
            </div> 
            <div class="desc">
                {{movie.intro}}
            </div>
        </div>
        </div>
`;
export default{
    props:["movie"],
    template
}

在这里插入图片描述
接下来可以完成多个电影的展示。这个过程中会用到单个电影展示，因此可以通过import导入MovieItem.js组件

MovieItem.js

//显示多个电影
// 作用不断的渲染MovieItem组件
import MovieItem from "./MovieItem.js"
var template = `
    <div class = "data-container">
        <MovieItem :movie = "item"  v-for = "item in movies" :key = "item._id"/>
    </div>
`;
export default{
  props: ["movies"],  //电影数组
  components:{
    MovieItem
  },
  template
}

在这里插入图片描述
完成了多个电影的展示后，这个时候我们还需要一个组件（容器组件）用于获取数据。

MovieContainer.js

//该组件仅用于获取电影数据
import MovieList from "./MovieList.js";
import movieService from "../service/movieService.js"
var template = `
    <MovieList :movies = "movies"/>
`;
export default {
  components:{
    MovieList
  },
  //用来获取数据即数据就是属于他的因此有data
  data() {
    return {
      movies:[]  //默认空数组
    }
  },
  async created() {
    //获取电影数据
    var resp = await movieService.getMovies(1,10)
    this.movies = resp.data  //获取到data赋值给自己的数据，数据变了就会重新刷新渲染
  },
  template
}

最后我们直接在App组件中使用MovieContainer组件就可以了
最终的App.js

import MovieContainer from "./components/MovieContainer.js"
var template = `
      <MovieContainer/>
`;
export default{
  components:{
    MovieContainer
  },
  template
}

最后我们就完成了多个电影页面显示，效果如图
在这里插入图片描述

gxgalaxy

关注

0
点赞
踩
12

收藏

觉得还不错? 一键收藏
0
评论
Vue组件化开发小demo练习

vue组件化知识详解：地址使用vue组件化开发完成以下电影展示页面ajax请求地址：地址目录结构：其中movieService.js为ajax请求获取数据MovieContainer.js该组件仅用于获取电影数据MovieItem.js 该组件用于展示一条电影MovieList.js 该组件用于展示多个电影index.js 该组件负责新创建一个Vue实例html文件：&lt...
复制链接

扫一扫

专栏目录