美文网首页
2018-09-26

2018-09-26

作者: 你昵称已被使用了 | 来源:发表于2018-09-26 20:22 被阅读11次

    一、 路由
    Vue.js 路由允许我们通过不同的 URL 访问不同的内容。
    通过 Vue.js 可以实现多视图的单页Web应用(single page web application,SPA)。
    Vue.js 路由需要载入 vue-router 库

    下载:
    用git 直接下载

        npm install vue
       npm install vue-router
    
    

    简单例子:
    HTML:

            <div id="app">
    <!--   1\. -->
              <router-link to='/index'>首页</router-link>
              <router-link to='/detail'>详情页</router-link>
    <!--     盛放导航对应内容-->
              <router-view></router-view>
         </div>
    
    

    js 部分:

          <script src="js/vue.js"></script>
    <script src="js/vue-router.js"></script>
    <script>
        // 2.创建组件
        var Index={
            template:`
            <h1>这是首页</h1>
            `
        }
        var Detail={
            template:`
            <h1>这是详情页</h1>
            `
        }
    
        //  3.配置路由
        const routes=[
            {path:'/',component:Index},
            {path:'/index',component:Index},
            {path:'/detail',component:Detail}
        ]
    
        // 4\. 创建一个路由实例
        const router=new VueRouter({
            routes:routes,
            linkActiveClass:"active"
        })
    
        //  5.把路由实例挂在到vue实例上
        new Vue({
            el:"#app",
            router:router
        })
    </script>
    
    

    效果图:

    二、 路由的嵌套

      HTML:
    
      <div id='app'>
           <router-link to='/home'>首页</router-link>
           <router-link to='/user'>用户页</router-link>
            <!--     盛放导航对应内容-->
         <router-view></router-view>
     </div>
    
    js 部分:
    
             <script src='js/vue.js'></script>
    <script src='js/vue-router.js'></script>
    <script>
        //2.创建组件
        var Home={
            template:`
              <h1>这是首页</h1>
            `
        }
    
        var User={
            template:`
             <div>
                <h1>这是用户页</h1>
                <ul>
                   <li>
                      <router-link to='/user/regist'>注册</router-link>
                   </li>
                    <li>
                      <router-link to='/user/login'>登录</router-link>
                   </li>
                </ul>
                <router-view></router-view>
            </div>
           `
        }
    
        var Regist={
            template:`
              <h3>这是注册页</h3>
            `
        }
         var Login={
            template:`
              <h3>这是登录页</h3>
            `
        }
    
        //3.配置路由
        const routes=[
            {path:'/',component:Home},
            {path:'/home',component:Home},
            {
                path:'/user',
                component:User,
                children:[
                    {path:'regist',component:Regist},
                    {path:'login',component:Login}
                ]
            }
        ]
    
        //4.创建路由实例
        const router=new VueRouter({
            routes:routes
        })
        //5.
       new Vue({
           el:'#app',
           router:router//注册路由
       })
    
    

    效果图:

    三、路由的传参

        html:
    
               <div id='app'>
                   <router-link to='/home'>首页</router-link>
                   <router-link to='/user'>用户页</router-link>
    
                   <router-view></router-view>
              </div>
    
      js部分:
    
              <script src='js/vue.js'></script>
    <script src='js/vue-router.js'></script>
    <script>
        //2.创建组件
        var Home={
            template:`
              <h1>这是首页</h1>
            `
        }
    
        var User={
            template:`
             <div>
                <h1>这是用户页</h1>
                <ul>
                   <li>
                      <router-link to='/user/regist?uname=jack&&upwd=123'>注册</router-link>
                   </li>
                    <li>
                      <router-link to='/user/login/rose/456'>登录</router-link>
                   </li>
                </ul>
                <router-view></router-view>
            </div>
           `
        }
    
        var Regist={
            template:`
             <div>
              <h3>这是注册页</h3>
              <a href='#'>{{$route.query}}</a>
              <ul>
                  <li>{{$route.query.uname}}</li>
                  <li>{{$route.query.upwd}}</li>
              </ul>
             </div>
            `
        }
         var Login={
            template:`
            <div>
              <h3>这是登录页</h3>
              <a href="">{{$route.params}}</a>
              <ul>
                  <li>{{$route.params.userName}}</li>
                  <li>{{$route.params.password}}</li>
              </ul>
            </div>
            `
        }
    
        //3.配置路由
        const routes=[
            {path:'/',component:Home},
            {path:'/home',component:Home},
            {
                path:'/user',
                component:User,
                children:[
                    {path:'regist',component:Regist},
                    {path:'login/:userName/:password',component:Login}
                ]
            }
        ]
    
        //4.创建路由实例
        const router=new VueRouter({
            routes:routes
        })
        //5.
       new Vue({
           el:'#app',
           router:router//注册路由
       })
    </script>
    
    效果图:
    
    

    四、vue中的axios

    vue中的ajax 插件
    下载axios:
    npm install axios

      安装http-server
     npm install http-server -g   
    
    

    使用http-server 开启一个服务器

    例子:
    html:

          <a href=""></a>
       <div class="app">
             <router-link to="/index">首页</router-link>
            <router-link to="/detail">详情页</router-link>
            <!--       盛放导航对应的内容-->
           <router-view></router-view>
       </div>
    
    js部分:
    
           <script src="js/vue.js"></script>
    <script src="js/vue-router.js"></script>
    <script src="js/axios.js"></script>
    <script>
        // 2\. 创建组件
        var Index={
            template:`
            <h1>这是首页</h1>
            `
        }
    
        var Detail={
            template:`
                <div>
                    <h1>我是详情页</h1>
                    <table border=1 cellspacing=0>
                        <thead>
                            <tr>
                                <td>编号</td>
                                <td>品名</td>
                                <td>单价</td>
                                <td>数量</td>
                                <td>小计</td>
                            </tr>
                        </thead>
                        <tbody>
                            <tr v-for="value in fruList">
                                <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{
                    fruList:null
                }
            },
            mounted:function(){
                var self=this;
                axios({
                    method:'get',
                    url:'fruit.json'
                }).then(function(resp){
                    console.log(resp.data)
                    self.fruList=resp.data
                }).catch(function(err){
                    console.log(err)
                })
            }
        }
        // 3.配置路由
        const routes=[
            {path:'/',component:Index},
            {path:'/index',component:Index},
            {path:'/detail',component:Detail}
        ]
        // 4.创建一个路由实例
    
            const router=new VueRouter({
                routes:routes,
                linkActiveClass:"active"
            })
        // 5\. 把路由实例挂在到vue实例上
        new Vue({
            el:'.app',
            router:router
        })
    </script>
    
    

    json部分:

      [
    
    {
        "num":1,
        "pname":"apple",
        "price":3,
        "count":4,
        "sub":12
    },
     {
        "num":2,
        "pname":"pear",
        "price":4,
        "count":5,
        "sub":20
    },
     {
        "num":3,
        "pname":"orange",
        "price":5,
        "count":6,
        "sub":30
    }
    

    相关文章

      网友评论

          本文标题:2018-09-26

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