组件和路由

组件及组件之间的通信：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>component1</title>
        <script src="js/vuejs-2.5.16.js"></script>
    </head>
    <body>
        <div id="app">
            <h2>num: {{num}}</h2>
            <counter :count="num" @inc="increment" @dec="decrement"></counter>
            <my-list :items="lessons" />
        </div>
        <script>
            <!-- 父子通信组件-->
            const counter = {
                template: `<<button @click="plus">你点了我 {{ count }} 次，我记住了.</button>>`,
                props: ['count'],
                methods: {
                    plus() {
                        this.$emit("inc");
                    },
                    reduce() {
                        this.$emit("dec");
                    }
                }
            };
            <!-- 父向子通信 props：定义需要从父组件中接收的属性- items：是要接收的属性名称- type：限定父组件传递来的必须是数组- default：默认值- required：是否必须-->
            const myList = {
                template: '\
                    <ul>\
                        <li v-for="item in items" :key="item.id">{{item.id}} : {{item.name}}</li>\
                    </ul>\
                    ',
                props: {
                    items: {
                        type: Array,
                        default: [],
                        required: true
                    }
                }
            };

            new Vue({
                el: "#app",
                data: {
                    lessons: [{
                            id: 1,
                            name: 'java'
                        },
                        {
                            id: 2,
                            name: 'php'
                        },
                        {
                            id: 3,
                            name: 'ios'
                        },
                    ],
                    num: 0,
                },
                components: {
                    counter: counter,
                    myList, //当key value值是一样的话,可以只写一个.
                },
                methods: { // 父组件中定义操作num的方法
                    increment() {
                        this.num++;
                    },
                    decrement() {
                        this.num--;
                    }
                }
            });
        </script>
    </body>
</html>

 

路由

login.js

const loginForm = {
    template:'\
    <div>\
    <h2>登录页</h2> \
    用户名：<input type="text"><br/>\
    密码：<input type="password"><br/>\
    </div>\
    '
}

register.js

const registerForm = {
    template:'\
    <div>\
    <h2>注册页</h2> \
    用&ensp;户&ensp;名：<input type="text"><br/>\
    密&emsp;&emsp;码：<input type="password"><br/>\
    确认密码：<input type="password"><br/>\
    </div>\
    '
}

主页

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>router</title>
        <script src="js/vuejs-2.5.16.js"></script>
        <script src="js/user/login.js"></script>
        <script src="js/user/register.js"></script>
        <script src="js/vue-router.js"></script>
   </head>
    <body>
        <div id="app">
            <!--router-link来指定跳转的路径-->
                <span><router-link to="/login">登录</router-link></span>
                <span><router-link to="/register">注册</router-link></span>
            <hr/>
            <div>
                    <!--<loginForm></loginForm>-->
                    <!--
                        疑问：为什么不采用上面的写法？
                        由于html是大小写不敏感的，如果采用上面的写法，则被认为是<loginform></loginform>
                        所以，如果是驼峰形式的组件，需要把驼峰转化为“-”的形式
                     -->
                    <!-- <login-form></login-form>
                    <register-form></register-form> -->
                        <div>
                            <!--vue-router的锚点-->
                            <router-view></router-view>
                        </div>
            </div>
        </div>
        <script>
            
            const router = new VueRouter({
                routes:[ // 编写路由规则
                    {
                        path:"/login", // 请求路径，以“/”开头
                        component:loginForm // 组件名称
                    },
                    {
                        path:"/register",
                        component:registerForm
                    }
                ]
            });
            
            var vm = new Vue({
                    el: "#app",
                    
                    router // 引用上面定义的router对象
                })
        </script>
    </body>
</html>

 

posted @ 2020-04-09 12:48  *乐途*  阅读(93)  评论(0)    收藏  举报