第二课 本文件用于学习vue根组件的各个代码部分的含义

根组件App.vue
 
<template>
<!-- 本文件用于学习vue根组件的各个代码部分的含义 -->
<!-- 下面div包含的内容就是html代码 -->
<!-- vue的模板里面 所有的内容要被一个根节点如:div,包含起来  -->
  <!-- <div id="app"> -->
  <div>
      <!-- 相当于DOM绑定数据 -->
      <h2>{{msg}}</h2>

      <br>
      这是一个根组件

    <br>

    <h3>{{obj.name}}</h3>

    <br>
    <hr>

    <br />

    <ul>
      <li v-for="item in list">
          {{item}}
      </li>
    </ul>

    <br>
    <hr>

    <br />

    <ul>
      <li v-for="item in list1">
          {{item.title}}
      </li>
    </ul>


     <br>
      <hr>

      <br />

      <ul>
        <li v-for="item in list2">
            {{item.cate}}

            <ol>
              <li v-for="news in item.list">
                  {{news.title}}
              </li>
            </ol>

        </li>
      </ul>

  </div>
</template>

<script>
/*js代码*/
// export 未特别说明时,默认将组件apps暴露到外部
    export default {
      // 定义一个组件名,可以不定义
      name: 'apps',
      /*业务逻辑里面定义的数据*/
      data () {
        return {
          msg: '你好vue',
          obj:{
            name:"张三"
          },
          list:['111','222','333'],
          list1:[
            {'title':'11111'},
            {'title':'222'},
            {'title':'333333'},
            {'title':'44444'}
          ],
          list2:[
              {
                "cate":"国内新闻",
                "list":[

                   {'title':'国内新闻11111'},
                   {'title':'国内新闻2222'}
                ]
              },
              {
                "cate":"国际新闻",
                "list":[

                   {'title':'国际新闻11111'},
                   {'title':'国际新闻2222'}
                ]
              }
          ]

        }
      }
    }
</script>


<style lang="scss">
/*css代码*/
</style>
posted @ 2021-04-07 10:01  flytoyou  阅读(59)  评论(0)    收藏  举报