Vue目录结构

• template中必须有一个根节点
• script中的data用来存放业务数据
• {{msg}}花括号用来展示data中的数据
• v-for循环数据

 

<template>
  <div id="app">
    {{msg}}
    <br>
    {{obj.name}}
    <br>
    <ul>
      <li v-for="item in list">
        {{item}}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'app',
  data () {
    return {
      msg: 'Hello Vue',
      obj:{
        name:'cys'
      },
      list:['1','2','3']
    }
  }
}
</script>

<style lang="scss">

</style>