vue 简单模拟后台数据渲染页面

第一步

注：首先html,css已经写好！！！并且本例是以html 结尾的，使用vue获取本地文件。

1.添加vue.js

2.使用 axios 来获取数据：

3.html和css(vue实例)

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title></title>
    </head>
<body>
   <div id="app">
   <div class="student" style="width: 80%;margin: 0 auto;">
       <ul style="list-style: none; text-decoration: none;">
           <li v-for="person in persons" style="width: 100%; height: 30px; background: pink;border-bottom: 1px solid #ccc;">
               <a href="">
                   <div style="float: left;">
                       {{person.name}}
                   </div>
                   <div style="float: right;">
                       {{person.message}}
                   </div>
               </a>
           </li>
       </ul>
   </div>
   </div>
        <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
        <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
        <script type="text/javascript">
            var vm = new Vue({
                el:"#app",//实例
                data: {//数据M
                    persons:[],
                },
                created:function() {//挂载
                    var self = this;
                    self.initdata()
                },
                methods:{//定义函数
                    initdata:function() {
                        var url = "one.json";//定义引入地址
                        _this = this;//改变this指向
                        axios.get(url).then(function(result) {//获取数据
                            console.log(result.data);
                            _this.persons = result.data.persons;
                        })
                    }
                }
            })
        </script>
</body>
</html>

4.本地.json数据

{
   "persons":[
       {
           "name":"li","message":"知道了","time":"01:00","url":"images/student/girl.png"
       },
       {
           "name":"ja","message":"在吗","time":"02:00","url":"images/student/girl.png"
       },
       {
           "name":"he","message":"真的","time":"03:00","url":"images/student/girl.png"
       },
       {
           "name":"lu","message":"好的","time":"04:00","url":"images/student/girl.png"
       },
       {
           "name":"xiao","message":"加载","time":"05:00","url":"images/student/girl.png"
       }
   ]
}

注意：请开启服务或者用hbulider黏贴代码段！！！