vue primary attempt

In order to keep up with the front of the trend of the background, the less have started to pay attention vue, the following machine code for App.vue changes made

• Data rendering ---- general key-value pairs, arrays, objects, and an array of objects

<template>
  <div id="app">
    <img>
    <h1>
      {{msg}}
    </h1>
    <br>
    <br>
    <ul>{{mycoach.name}}</ul>
    <ul>芳龄:{{mycoach.age}}</ul>
    <ul>擅长武技:</ul>
    <ul v-for="item in mycoach.expertin">
      <li>{{item}}</li>
    </ul>
    <br>
    <br>
    <br>
    <ul span="margin-left:200px">歌词:别来纠缠我</ul>
    <ul v-for="item in chrouslist">
      <Li> Item {} {} </ Li> 
    </ UL> 
  </ div> 
</ Template> 

<Script> 
Export default { 
    Data () 
    { 
        return   { 
            MSG: ' Welcome to the guy VUE ' , 
            mycoach: { 
                name : ' Chen Peichang ' , 
                Age: 22 , 
                expertin: [ ' Sanda ' , ' Muay Thai ' ] 
            }, 
            chrouslist: [ ' I do not want to say something to you ' ,'Now I was angry ' , ' you are completely submerged by your hypocrisy ' , ' become annoying color ' , ' ...... ' ] 
        } 
    } 

}
 </ Script>

Output:

Appendix: page css styles

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>