zoukankan      html  css  js  c++  java
  • 纯小白入手 vue3.0 CLI

    vue3.0 CLI 真小白一步一步入手全教程系列:https://www.cnblogs.com/ndos/category/1295752.html

    我的 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 分支上传。

  • 相关阅读:
    第十二周作业
    第九周作业
    第八周作业
    第七周作业
    第六周作业
    参考博文地址
    第五周作业
    用例设计思路
    测试方法的四大金刚
    网络模型及访问过程
  • 原文地址:https://www.cnblogs.com/ndos/p/9615067.html
Copyright © 2011-2022 走看看