(三)最简单的vue教程,开发自己的电影网站:把网页的布局先画出来,创建要用到的组件

avatar

这一节来把页面的布局写出来

总共就五个类型的电影列表,所以我们做成下面这样

原谅我这画风。。

根据上面的布局,可以把组件分为

  1. 最上面的tabbar
  2. 下面的列表
  3. 列表中的每一项
  4. 最后还有一个详情页不要忘了

在components里新建四个vue文件

  • TabBar.vue
  • List.vue
  • Item.vue
  • Detail.vue

如果你用的是 webstore 创建vue页面的话,它会有个模板,我用的是vscode,没有模板,不过新建好了,大致长下面这样就可以了

<template>
  <div class="tabbar">

  </div>
</template>

<script>
export default {
  name: "tabbar",
  data() {
    return {}
  },
  mounted() {},
  methods: {}
};
</script>

<style scoped>
</style>

说明

  • name 组件的名字
  • data 组件数据,有变动的话,页面上展示的内容也同步变动
  • mounted 组件加载完成后调用的钩子(生命周期之一)
  • methods 组件里定义方法的地方

建好后先放这,下一节来介绍一下组件里的一些细节

目前还没有回答,快来帮帮TA吧!
添加一条评论 请尽量发布对他人有帮助的评论

登录后可发布评论

登录 | Github登录