美文网首页
2018-09-26 axios

2018-09-26 axios

作者: 如履薄冰Zz | 来源:发表于2018-09-26 20:13 被阅读0次

下载
npm install axios
安装服务器
npm install http-server -g
例子

<div id="app">
            <router-link to="home">首页</router-link>
            <router-link to="user">用户页</router-link>
            <router-view></router-view>
        </div>
        <script src="js/vue.js"></script>
        <script src="js/vue-router.js"></script>
        <script src="js/axios.js"></script>
        <script>
            var Home={
                template:`
                  <h1>首页</h1>
                `
            }
            var User={
                template:`
                <div>
                  <h1>用户页</h1>
                  <table border=1 cellspacing=0>
                     <thead>
                       <tr>
                         <th>编号</th>
                         <th>品名</th>
                         <th>单价</th>
                         <th>数量</th>
                         <th>小计</th>
                       </tr>
                     </thead>
                     <tbody>
                       <tr v-for="value in list">
                         <td>{{value.num}}</td>
                         <td>{{value.pname}}</td>
                         <td>{{value.price}}</td>
                         <td>{{value.count}}</td>
                         <td>{{value.sub}}</td>
                       </tr>
                     </tbody>
                  </table>
                </div>
                `,
                data:function(){
                    return{
                        list:null
                    }
                },
                mounted:function(){
                    var self=this;
                    axios({
                        method:"get",
                        url:"1.json"
                    }).then(function(resp){
                        console.log(resp.data);
                    }).catch(function(err){
                        console.log(err)
                    })
                }
            }
            const routes=[
              {path:"/",component:Home},
              {path:"/home",component:Home},
              {path:"/user",component:User}
            ]
            const router=new VueRouter({
                routes:routes
            })
            new Vue({
                el:"#app",
                router:router
            })
        </script>

相关文章

网友评论

      本文标题:2018-09-26 axios

      本文链接:https://www.haomeiwen.com/subject/sdbjoftx.html