需要打开浏览器 cors 插件

    1. <body> 
    2.   <style>
    3.         * {
    4.             margin: 0;
    5.             padding: 0;
    6.             box-sizing: border-box;
    7.         }
    8.         body{
    9.             background-color: #d2d2d2;
    10.         }
    11.         ul {
    12.             list-style: none;
    13.             display: flex;
    14.             flex-wrap: wrap;
    15.             width: 1300px;
    16.             margin: 0 auto;
    17.         }
    18.         ul li {
    19.             width: 250px;
    20.             margin: 0 10px 10px 0;
    21.             background-color: #fff;
    22.             border-radius: 10px;
    23.         }
    24.         ul li img{
    25.             width: 250px;
    26.             border-top-left-radius: 10px;
    27.             border-top-right-radius: 10px;
    28.         }
    29.         .imggg{
    30.             width: 100%;
    31.         }
    32.         .txt{
    33.             padding: 10px;
    34.         }
    35.         .txt span{
    36.             font-size: 14px;
    37.             color: #666;
    38.         }
    39.         .txt p{
    40.             width: 170px;
    41.             white-space: nowrap;
    42.             overflow: hidden;
    43.             text-overflow: ellipsis;
    44.             margin-bottom: 10px;
    45.         }
    46.     </style>
    47.     <div id='myApp'>
    48.         <ul>
    49.             <li is="my-com" v-for="item in arr" :key="item.room_id" :child-obj="item"></li>
    50.         </ul>
    51.     </div>
    52.     <!-- 组件模板 -->
    53.     <template id='myTem'>
    54.         <li>
    55.             <div class="imggg">
    56.                 <img :src="childObj.room_src" alt="">
    57.             </div>
    58.             <div class="txt">
    59.                 <p>{{childObj.room_name}}</p>
    60.                 <span>{{childObj.nickname}}</span>
    61.                 <h3>{{name}}</h3>
    62.             </div>
    63.         </li>
    64.     </template>
    66. <script src='https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js'></script>
    67. <script>
    68.     Vue.component('myCom', {
    69.         template: '#myTem',
    70.         data(){
    71.             return{}
    72.             // 问: 为什么组件中的data必须是一个函数
    73.             // 在创建或注册模板的时候传入一个 data 属性作为用来绑定的数据。但是在组件中，data必须是一个函数，因为每一个 vue 组件都是一个 vue 实例，通过 new Vue() 实例化，引用同一个对象，如果 data 直接是一个对象的话，那么一旦修改其中一个组件的数据，其他组件相同数据就会被改变，而 data 是函数的话，每个 vue 组件的 data 都因为函数有了自己的作用域，互不干扰。
    74.         },
    75.         props: ["childObj"],
    76.     })
    77.     new Vue({
    78.         el: '#myApp',
    79.         data: {
    80.             arr: []
    81.         },
    82.         created() {
    83.             fetch("http://open.douyucdn.cn/api/RoomApi/live?page=1").then(res => {
    84.                 return res.json();
    85.             }).then(data1 => {
    86.                 this.arr = data1.data
    87.                 console.log(this.arr);
    88.             })
    89.         }
    90.     })
    91. </script>
    92. </body>