vue项目

<template>
  <div id="app">
     <h3>{{ msg }}</h3>
      <ul>
        <li v-for="(item,index) in menu ">{{item }}</li>
      </ul>
  </div>
</template>

<script>
  export default{            #固定格式
      name:‘App‘,
      data(){
          return{            #函数，必须有返回值
              ‘msg‘:‘hello,world‘,
              ‘menu‘:[3,11,23,55,66,77]
          }
      }
  }

</script>

<style>

</style>

<template>
  <div id="app">
     <h3>{{ msg }}</h3>
      <ul>
        <li v-for="(item,index) in menu ">{{item }}</li>
      </ul>
      <button @click="addHandle">添加菜单</button>
  </div>
</template>

<script>
  export default{
      name:‘App‘,
      data(){
          return{
              ‘msg‘:‘hello,world‘,
              ‘menu‘:[3,11,23,55,66,77]
          }
      },
      methods:{
          addHandle(){
              this.menu.push(‘99‘)
          }
      }
  }

</script>

<template>
  <div id="app">
    <Header></Header>   # 导入的，必须是闭合标签
     <h3>{{ msg }}</h3>
      <ul>
        <li v-for="(item,index) in menu ">{{item }}</li>
      </ul>
      <button @click="addHandle">添加菜单</button>
  </div>
</template>

<script>
  import Header from ‘./Header.vue‘   // import 放在外面，地址加引号
  export default{
      name:‘App‘,
      data(){
          return{
              ‘msg‘:‘hello,world‘,
              ‘menu‘:[3,11,23,55,66,77]
          }
      },
      methods:{
          addHandle(){
              this.menu.push(‘99‘)
          }
      },
     components:{
        Header   //相当于 Header:Header   !! 挂载子组件
     }

  }

</script>

<style>

</style>

<template>
  <img :src="imgSrc" alt="">      #绑定属性
</template>

<script>
  import imgSrc from ‘./assets/logo.png‘   // import 放在export default 外面，地址加引号
  export default{
      name:‘Header‘,

      data(){
          return{
            imgSrc:imgSrc
          }
      }
  }
</script>

<style>

</style>