vue3.0 CLI - 2.2 - 组件 home.vue 的初步改造

我的 github 地址 - vue3.0Study- 阶段学习成果都会建立分支。

helloworld.vue 都挪到 about 路由当中。

<template><div class="about"><HelloWorld msg="vue 官方相关资料的链接"/></div></template>
<script>
import HelloWorld from '@/components/HelloWorld.vue'
export default { name: 'about', components: { HelloWorld } }
</script>

下面我们开始整理玩转 home.vue，后台数据使用 https://www.apiopen.top/journalismApi

先贴出 script 代码：

export default {
 name: 'home',
 data: function (){
 return {
  navs: {},
  tts:[]
 }
 },
 created: function (){
 fetch('https://www.apiopen.top/journalismApi')
 .then(v=>v.json())
 .then(v=>{
  console.log(v.data);
  this.tts = v.data.toutiao;
  this.navs = v.data;
 });
 }
}

home.vue 组件有了两个属性：navs 和 tts 属性。在 template 中使用如下代码：

<template>
 <div class="home">
 <div class="nav">
  <div v-for="(value, key, index) in navs" :key="index">
  {{key}}
  </div>
 </div>
 <ul>
  <li v-for="(tt,index) in tts" :key="index">
  {{tt.title}}
  </li>
 </ul>
 </div>
</template>

这个改造过程比较简单，就不多介绍。也建立一个 git 分支上传。

总结

以上所述是小编给大家介绍的vue3.0 CLI - 2.2 - 组件 home.vue 的初步改造，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

赞 (0)

相关推荐

  • vue3.0 CLI - 2.6 - 组件的复用入门教程

    我的 github 地址 - vue3.0Study- 阶段学习成果都会建立分支. ========================== 定义一个基础组件 这个基础组件,是导航条中 可以复用 的基础组件 单个导航. 基础组件[导航组件]基础的功能是能够显示文字,单击的交互方式.明确任务目标之后,进行开发. 在 component 目录下新建 Base 目录,Base 下新建文件 TopNav.vue.加入如下代码: <template> <div class="topnav&q

  • vue3.0 CLI - 2.3 - 组件 home.vue 中学习指令和绑定

    vue3.0 CLI - 2.3 - 组件 home.vue 中学习指令和绑定

    我的 github 地址 - vue3.0Study- 阶段学习成果都会建立分支. 首先美化一下界面 - 相关的界面代码不粘贴,可从我的 github 分支中看到.下面最终的实现效果图: 改造下 data 中的 navs 属性 ( navs 数组每个元素都是 包含 active 和 data 属性的对象 ): created: function () { fetch('https://www.apiopen.top/journalismApi') .then(v => v.json()) .th

  • vue3.0 CLI - 2.1 - component 组件入门教程

    我的 github 地址 - vue3.0Study - 阶段学习成果都会建立分支. 进入 src 文件夹,这是实际都工程文件夹,其他文件夹以及文件以后在了解. 3个文件夹  assets - 各类静态资源文件夹 - 比如 图片, css 文件等.  components - 组件文件夹, 组件是 vue 等 MVC 框架等核心概念,自行了解含义. view - 视图文件夹. 5个文件  app.vue.main.js - 主视图.配合 main.js 成为 vue 程序的主入口.router.

  • vue3.0 CLI - 2.4 - 新组件 Forms.vue 中学习表单

    我的 github 地址 - vue3.0Study- 阶段学习成果都会建立分支. 新组件 - 新路由 Forms.vue ( 下面仅介绍如何创立, 不进行介绍 ) : <template><div class="form"> <input v-model="message" placeholder="edit me"> <p>Message is: {{ message }}</p>

  • vue3.0 CLI - 2.5 - 了解组件的三维

    我的 github 地址 - vue3.0Study - 阶段学习成果都会建立分支. 问答 1.vue 组件有什么? 为什么要加上 vue,因为不同的 MVC 框架,东西不一样,不过基本的功能都有. 组件有 data.computed.watch.methods 以及生命周期钩子等.对于入门者来说,先搞清楚这些是什么东西. data 属性经过前面几篇文章的学习,对其已有初步的了解. computed 是计算属性,前面也有了解. methods 组件方法,其实是专门定义函数的一个对象,这些函数最终

  • vue3.0 CLI - 2.2 - 组件 home.vue 的初步改造

    我的 github 地址 - vue3.0Study- 阶段学习成果都会建立分支. helloworld.vue 都挪到 about 路由当中. <template><div class="about"><HelloWorld msg="vue 官方相关资料的链接"/></div></template> <script> import HelloWorld from '@/components/

  • vue3.0 CLI - 3.2 路由的初级使用教程

    我的 github 地址 -vue3.0Study- 阶段学习成果都会建立分支. ========================== 动态路由 在路由某部分里加入[ : ],就成为动态路由如:/user/:id/,那么路由导航,并不是  /user/id/ 而是 /user/666/. 显然这个 id 能被获取,在组件中使用.通过 this.$route.params 获取. this 是当前组件,$route 是路由对象,params 是一个对象字面量 { id:666 }. $route

  • vue3.0 CLI - 1 - npm 安装与初始化的入门教程

    node 开发环境请先自行准备 npm install -g @vue/cli 安装完成之后命令行则存在 vue 命令 vue -V 查看本地 vue 版本 vue -h 输出帮助 vue create <project-name> 进入工程文件夹,创建项目. 如:cd studyVue ( 进入工程文件夹 ) vue create config ( 创建 config 项目 ) 选择 default 配置项,下面没什么可介绍的,自行尝试. 下面介绍选择 manually select fea

  • vue3.0手动封装分页组件的方法

    vue3.0手动封装分页组件的方法

    本文实例为大家分享了vue3.0手动封装分页组件的具体代码,供大家参考,具体内容如下 1.父组件引入 src/views/goods/components/goods-comment.vue <!-- page表示初始化分页时,默认显示第几页 --> <XtxPagination @change-page='changePage' :pagesize='reqParams.pageSize' :total='total' :page='1' /> //调接口 import {fin

  • 基于Vue3.0开发轻量级手机端弹框组件V3Popup的场景分析

    基于Vue3.0开发轻量级手机端弹框组件V3Popup的场景分析

    之前有分享一个vue2.x移动端弹框组件,今天给大家带来的是Vue3实现自定义弹框组件. V3Popup 基于vue3.x实现的移动端弹出框组件,集合msg.alert.dialog.modal.actionSheet.toast等多种效果.支持20+种自定义参数配置,旨在通过极简的布局.精简的调用方式解决多样化的弹框场景. v3popup 在开发之初参考借鉴了Vant3.ElementPlus等组件化思想.并且功能效果和之前vue2.0保持一致. ◆ 快速引入 在main.js中全局引入v3p

随机推荐