VUE.js快速入门（vue网络应用①）

Vue结合网络数据开发应用

axios：功能强大的网路请求库，异步请求

引入：

axios.post(address,key:value&key2:value).then(function(resopnse){},function(err){})

then方法会在请求成功或者失败的时候触发

通过回调函数形参知道相应内容

axios中回调的this已经发生改变，无法访问到外部，直接使用this不是一个，需要临时存储。

Vue中路由（VueRouter）

按照一定请求规则显示组件，

引入：

<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <!-- 路由组件 -->
        <router-view></router-view>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
    <script>
        //使用const定义常量
        const login={
            template:`<h1>login</h1>`
        };
        const register={
            template:`<h1>register</h1>`
        };
        //创建路由对象,绑定常量模板
        const router=new VueRouter({
            routes:[
                {path:"/login",component:login},
                {path:"/register",component:register}
            ]
        });
        const app=new Vue({
            el:"#app",
            data:{

            },
            methods:{},
            //vue实例和router产生关系
            router:router
        })

    </script>

</body>
</html>

路由绑定不同的组件，这里注册的不是组件，注册的是路由，路由绑定组件，组件是不易变得使用const定义。

router-link用来切换路由，tag标签能切换类型

        <router-link to="/login">登录</router-link>
        <router-link to="/register">注册</router-link>

默认路由就是写在路由组件

{path:"/",component:login},

//重定向
{path:"/",redirect:"/login"},

路由中参数的传递传统方式

通过？传递参数

<router-link to="/login?id=1&name=22">登录</router-link>

接受：

  const login={
            template:`<h1>login</h1>`,
            created(){
                console.log(this.$route.query.id);
            },
        };

使用restful方式获取id，name

　　　　<router-link to="/register/11/liming">注册</router-link>

           {path:"/",redirect:"/login"},
                {path:"/login",component:login},
                {path:"/register/:id/:name",component:register}

        const register={
            template:`<h1>register{{this.$route.params.id}}{{this.$route.params.name}}</h1>`
        };

路由的嵌套

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <router-link to="/product">商品管理</router-link>
        <router-view></router-view>
    </div>
    <template id="product">
        <div>
            <h1>商品管理</h1>
            <router-link to="/product/add">商品添加</router-link>
            <router-link to="/product/remove">商品删除</router-link>
            <router-view></router-view>
        </div>
    </template>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
    <script>
        const product={
            template:`#product`
        };
        const productAdd={
            template:`<h1>商品添加</h1>`
        };
        const productRemove={
            template:`<h1>商品删除</h1>`
        };
        //自定义路由
        const route=new VueRouter({
            routes:[
                {
                    path:'/product',
                    component:product,
                    children:[
                        {path:"add",component:productAdd},
                        {path:"remove",component:productRemove}
                    ]
                },

            ]
        });
        const vm=new Vue({
            el:"#app",
            router:route
        });
    </script>
</body>
</html>

posted @ 2020-05-31 12:06 蔡老板2019 阅读(127) 评论(0) 编辑收藏举报

刷新页面返回顶部

蔡老板

VUE.js快速入门（vue网络应用①）

公告