vue学习第四天

一：路由跳转

this.$router.push(‘/course‘);
this.$router.push({name: course});
this.$router.go(-1);
this.$router.go(1);
<router-link to="/course">课程页</router-link>
<router-link :to="{name: ‘course‘}">课程页</router-link>

<template>
    <div class="nav">
        <ul>
            <li :class="{active: currentPage === ‘/‘}">
                <router-link to="/">主页</router-link>
            </li>
            <li :class="{active: currentPage === ‘/course‘}">
                <router-link to="/course">课程</router-link>
            </li>
            <li :class="{active: currentPage === ‘/course_detail‘}">
<!--                路由跳转-->
                <router-link :to="{name: ‘course_detail‘}">课程详情页</router-link>
            </li>
        </ul>
    </div>
</template>

<script>
    export default {
        name: "Nav"
    }
</script>

<style scoped>
    .nav {
        width: 100%;
        height: 60px;
        background-color: black;
    }

    .nav li {
        float: left;
        font: normal 20px/60px ‘微软雅黑‘;
        padding: 0 30px;
    }

    .nav li:hover {
        cursor: pointer;
        background-color: aquamarine;
    }

    .nav li.active {
        cursor: pointer;
        background-color: aquamarine;
    }
</style>

component组件层

<template>
    <div>
        <Nav></Nav>
        <button type="button" @click="goPage(‘/course‘)">跳转课程页面</button>
        <button type="button" @click="gocourse_detail(‘/course_detail‘)">跳转课程详情页面</button>
        <button type="button" @click="goPage(‘/‘)">跳转主页</button>
        <button type="button" @click="goBack">页面前进返回</button>
    </div>
</template>

<script>
    import Nav from "../components/Nav";

    let course_list = [
        {
            id: 1,
            name: ‘Python入门到入土‘
        },
        {
            id: 2,
            name: ‘前端放弃攻略‘
        },
        {
            id: 3,
            name: ‘你最棒，他最强‘
        },
        {
            id: 4,
            name: ‘基佬修炼法则‘
        },
    ];

    export default {
        name: "course",
        components: {
            Nav
        },
        data() {
            return {
                course_list
            }
        },
        methods: {
            goPage(path) {
                let current_path = this.$route.path;
                if (current_path != path) {
                    this.$router.push(path)

                }
            },
            goBack() {
                this.$router.go(-1);
                this.$router.go(1)
            },
             gocourse_detail(){
            // this.$router.push({name:‘course_detail‘})
                    this.$router.push({name: ‘course_detail‘});
        }
        },

    }
</script>

<style scoped>

</style>

View页面层一

<template>
    <div class="">
        <Nav></Nav>
        <button type="button" @click="goPage(‘/course‘)">跳转课程页面</button>
        <button type="button" @click="gocourse_detail(‘/course_detail‘)">跳转课程详情页面</button>
        <button type="button" @click="goPage(‘/‘)">跳转主页</button>
        <button type="button" @click="goBack">页面前进返回</button>
    </div>
</template>

<script>

    import Nav from "../components/Nav";

    export default {
        name: ‘home‘,
        components: {
            Nav,

        },
        methods: {
            goPage(path) {
                let current_path = this.$route.path;
                if (current_path != path) {
                    this.$router.push(path)  // 跳转到页面

                }
            },
            goBack() {
                this.$router.go(-1); // 返回上一页
                this.$router.go(-2);  // 返回上两页

                this.$router.go(1)  // 前进一页
            },
            gocourse_detail(){
                this.$router.push({name: ‘course_detail‘});  // 路由跳转
            }

        }
    }
</script>

View页面层二

二：路由传参

（1）方式一

<template>
    <div class="course-card">
        <h3 @click="goDetail">{{course.name}}</h3>
    </div>
</template>

<script>
    export default {
        name: "CourseCard",
        props: [‘course‘],
        methods:{
            goDetail(){
                this.$router.push({
                    name:‘course_detail‘,
                    query:{id:this.course.id},   // 页面刷新传参不会消失
                    params:{id:this.course.id}  //  页面刷新传参会消失
                })
            }
        }
    }
</script>

<style scoped>
    .course-card h3, .course-card a {
        width: 200px;
        height: 200px;
        border-radius: 50%;
        background-color: coral;
        font: normal 20px/200px ‘STSong‘;
        float: left;
        text-align: center;
        cursor: pointer;
        display: block;
    }
</style>

小组件一

<template>
    <div class="nav">
        <ul>
            <li :class="{active: currentPage === ‘/‘}">
                <router-link to="/">主页</router-link>
            </li>
            <li :class="{active: currentPage === ‘/course‘}">
                <router-link to="/course">课程</router-link>
            </li>
            <li :class="{active: currentPage === ‘/course_detail‘}">
<!--                路由跳转-->
                <router-link :to="{name: ‘course_detail‘}">课程详情页</router-link>
            </li>
        </ul>
    </div>
</template>

<script>
    export default {
        name: "Nav",
        data(){
            return{
                currentPage:‘‘
            }
        },
        created() {
            this.currentPage = this.$route.path
        }
    }
</script>

<style scoped>
    .nav {
        width: 100%;
        height: 60px;
        background-color: black;
    }

    .nav li {
        float: left;
        font: normal 20px/60px ‘微软雅黑‘;
        padding: 0 30px;
    }

    .nav li:hover {
        cursor: pointer;
        background-color: aquamarine;
    }

    .nav li.active {
        cursor: pointer;
        background-color: aquamarine;
    }
</style>

小组件二

<template>
    <div>
        <Nav></Nav>
        <button type="button" @click="goPage(‘/course‘)">跳转课程页面</button>
        <button type="button" @click="gocourse_detail(‘/course_detail‘)">跳转课程详情页面</button>
        <button type="button" @click="goPage(‘/‘)">跳转主页</button>
        <button type="button" @click="goBack">页面前进返回</button>
        <h2>课程页</h2>
        <hr>
        <div>
            <CourseCard v-for="course in course_list" :key="course.name" :course="course"></CourseCard>
        </div>
    </div>
</template>

<script>
    import Nav from "../components/Nav";
    import CourseCard from ‘@/components/CourseCard‘

    let course_list = [
        {
            id: 1,
            name: ‘Python入门到入土‘
        },
        {
            id: 2,
            name: ‘前端放弃攻略‘
        },
        {
            id: 3,
            name: ‘你最棒，他最强‘
        },
        {
            id: 4,
            name: ‘基佬修炼法则‘
        },
    ];

    export default {
        name: "course",
        components: {
            Nav,
            CourseCard
        },
        data() {
            return {
                course_list
            }
        },
        methods: {
            goPage(path) {
                let current_path = this.$route.path;
                if (current_path != path) {
                    this.$router.push(path)

                }
            },
            goBack() {
                this.$router.go(-1);
                this.$router.go(1)
            },
            gocourse_detail() {
                this.$router.push({name: ‘course_detail‘});
            }
        },

    }
</script>

<style scoped>

</style>

页面渲染一

<template>
    <div>
        <Nav></Nav>

        <button type="button" @click="goPage(‘/course‘)">跳转课程页面</button>

        <button type="button" @click="goPage(‘/‘)">跳转主页</button>
        <button type="button" @click="goBack">页面前进返回</button>
        <h2>课程详情页</h2>
        <hr>
        <p> {{course.name}} </p>
        <p> {{course.info}}</p>
        <p> {{course.price}}</p>
    </div>
</template>

<script>
    import Nav from "../components/Nav";

    let course_list = [
        {
            id: 1,
            name: ‘Python入门到入土‘,
            price: 6.66,
            info: ‘三分钟入门，一分钟入土！学了你不吃亏，不学你就废了！‘
        },
        {
            id: 2,
            name: ‘前端放弃攻略‘,
            price: 3.66,
            info: ‘学习前端，忘掉所有痛苦！‘
        },
        {
            id: 3,
            name: ‘你最棒，他最强‘,
            price: 5.22,
            info: ‘别做梦了！‘
        },
        {
            id: 4,
            name: ‘基佬修炼法则‘,
            price: 80000,
            info: ‘就是他，错不了！‘
        },
    ];

    export default {
        name: "Course-detail",
        components: {
            Nav
        },
        data() {
            return {
                course: {},
            }
        },
        methods: {
            goPage(path) {
                let current_path = this.$route.path;
                if (current_path != path) {
                    this.$router.push(path)
                }
            },
            goBack() {
                this.$router.go(-1);
                this.$router.go(1);
            }
        },
        created() {

            let id = this.$route.query.id;  // 接受传参值
            // let id = this.$route.query.id;      // 接受传参值
            for (let courses of course_list) {  // 便利所有的值
                if (id == courses.id) {

                    this.course = courses;

                    break
                }
            }
        }
    }
</script>

<style scoped>

</style>

页面渲染二

<template>
    <div class="">
        <Nav></Nav>
        <button type="button" @click="goPage(‘/course‘)">跳转课程页面</button>
        <button type="button" @click="gocourse_detail(‘/course_detail‘)">跳转课程详情页面</button>

        <button type="button" @click="goBack">页面前进返回</button>
        <h2>主页</h2>
        <hr>
    </div>
</template>

<script>

    import Nav from "../components/Nav";

    export default {
        name: ‘home‘,
        components: {
            Nav,

        },
        methods: {
            goPage(path) {
                let current_path = this.$route.path;
                if (current_path != path) {
                    this.$router.push(path)  // 跳转到页面

                }
            },
            goBack() {
                this.$router.go(-1); // 返回上一页
                this.$router.go(-2);  // 返回上两页

                this.$router.go(1)  // 前进一页
            },
            gocourse_detail() {
                this.$router.push({name: ‘course_detail‘});  // 路由跳转
            }

        }
    }
</script>

页面渲染三

PS：

（1）query：传参的时候刷新页面传参数据不会消失

（2）params：传参的时候刷新页面数据会消失

（2）方式二

<template>
    <div class="nav">
        <ul>
            <li :class="{active: currentPage === ‘/‘}">
                <router-link to="/">主页</router-link>
            </li>
            <li :class="{active: currentPage === ‘/course‘}">
                <router-link to="/course">课程</router-link>
            </li>
            <li :class="{active: currentPage === ‘/course_detail‘}">
<!--                路由跳转-->
                <router-link :to="{name: ‘course_detail‘}">课程详情页</router-link>
            </li>
        </ul>
    </div>
</template>

<script>
    export default {
        name: "Nav",
        data(){
            return{
                currentPage:‘‘
            }
        },
        created() {
            this.currentPage = this.$route.path
        }
    }
</script>

<style scoped>
    .nav {
        width: 100%;
        height: 60px;
        background-color: black;
    }

    .nav li {
        float: left;
        font: normal 20px/60px ‘微软雅黑‘;
        padding: 0 30px;
    }

    .nav li:hover {
        cursor: pointer;
        background-color: aquamarine;
    }

    .nav li.active {
        cursor: pointer;
        background-color: aquamarine;
    }
</style>

小组件一

<template>
    <div class="course-card">
        <h3 @click="goDetail">{{course.name}}</h3>
    </div>
</template>

<script>
    export default {
        name: "CourseCard",
        props: [‘course‘],
        methods:{
            goDetail(){
                this.$router.push(
                    this.$router.push(`/course_detail/${this.course.id}`)  // 通过传参id 需要使用``这个双引号可以添加变量
                )
            }
        }
    }
</script>

<style scoped>
    .course-card h3, .course-card a {
        width: 200px;
        height: 200px;
        border-radius: 50%;
        background-color: coral;
        font: normal 20px/200px ‘STSong‘;
        float: left;
        text-align: center;
        cursor: pointer;
        display: block;
    }
</style>

小组件二

<template>
    <div>
        <Nav></Nav>
        <button type="button" @click="goPage(‘/course‘)">跳转课程页面</button>
        <button type="button" @click="gocourse_detail(‘/course_detail‘)">跳转课程详情页面</button>
        <button type="button" @click="goPage(‘/‘)">跳转主页</button>
        <button type="button" @click="goBack">页面前进返回</button>
        <h2>课程页</h2>
        <hr>
        <div>
            <CourseCard v-for="course in course_list" :key="course.name" :course="course"></CourseCard>
        </div>
    </div>
</template>

<script>
    import Nav from "../components/Nav";
    import CourseCard from ‘@/components/CourseCard‘

    let course_list = [
        {
            id: 1,
            name: ‘Python入门到入土‘
        },
        {
            id: 2,
            name: ‘前端放弃攻略‘
        },
        {
            id: 3,
            name: ‘你最棒，他最强‘
        },
        {
            id: 4,
            name: ‘基佬修炼法则‘
        },
    ];

    export default {
        name: "course",
        components: {
            Nav,
            CourseCard
        },
        data() {
            return {
                course_list
            }
        },
        methods: {
            goPage(path) {
                let current_path = this.$route.path;
                if (current_path != path) {
                    this.$router.push(path)

                }
            },
            goBack() {
                this.$router.go(-1);
                this.$router.go(1)
            },
            gocourse_detail() {
                this.$router.push({name: ‘course_detail‘});
            }
        },

    }
</script>

<style scoped>

</style>

页面层一

<template>
    <div>
        <Nav></Nav>

        <button type="button" @click="goPage(‘/course‘)">跳转课程页面</button>

        <button type="button" @click="goPage(‘/‘)">跳转主页</button>
        <button type="button" @click="goBack">页面前进返回</button>
        <h2>课程详情页</h2>
        <hr>
        <p> {{course.name}} </p>
        <p> {{course.info}}</p>
        <p> {{course.price}}</p>
    </div>
</template>

<script>
    import Nav from "../components/Nav";

    let course_list = [
        {
            id: 1,
            name: ‘Python入门到入土‘,
            price: 6.66,
            info: ‘三分钟入门，一分钟入土！学了你不吃亏，不学你就废了！‘
        },
        {
            id: 2,
            name: ‘前端放弃攻略‘,
            price: 3.66,
            info: ‘学习前端，忘掉所有痛苦！‘
        },
        {
            id: 3,
            name: ‘你最棒，他最强‘,
            price: 5.22,
            info: ‘别做梦了！‘
        },
        {
            id: 4,
            name: ‘基佬修炼法则‘,
            price: 80000,
            info: ‘就是他，错不了！‘
        },
    ];

    export default {
        name: "Course-detail",
        components: {
            Nav
        },
        data() {
            return {
                course: {},
            }
        },
        methods: {
            goPage(path) {
                let current_path = this.$route.path;
                if (current_path != path) {
                    this.$router.push(path)
                }
            },
            goBack() {
                this.$router.go(-1);
                this.$router.go(1);
            }
        },
        created() {

            let id = this.$route.params.id;      // 接受传参值
            for (let courses of course_list) {  // 便利所有的值
                if (id == courses.id) {

                    this.course = courses;

                    break
                }
            }
        }
    }
</script>

<style scoped>

</style>

页面层二

<template>
    <div class="">
        <Nav></Nav>
        <button type="button" @click="goPage(‘/course‘)">跳转课程页面</button>
        <button type="button" @click="gocourse_detail(‘/course_detail‘)">跳转课程详情页面</button>

        <button type="button" @click="goBack">页面前进返回</button>
        <h2>主页</h2>
        <hr>
    </div>
</template>

<script>

    import Nav from "../components/Nav";

    export default {
        name: ‘home‘,
        components: {
            Nav,

        },
        methods: {
            goPage(path) {
                let current_path = this.$route.path;
                if (current_path != path) {
                    this.$router.push(path)  // 跳转到页面

                }
            },
            goBack() {
                this.$router.go(-1); // 返回上一页
                this.$router.go(-2);  // 返回上两页

                this.$router.go(1)  // 前进一页
            },
            gocourse_detail() {
                this.$router.push({name: ‘course_detail‘});  // 路由跳转
            }

        }
    }
</script>

页面层三

 {
      path: ‘/course_detail/:id‘,  // 类似于正则表达式
      name: ‘course_detail‘,
      component: course_detail
    },

路由层

PS：

（1）此种方式使用了正则表达式 通过匹配正则传递的参数 进行数据的筛选

三：VUE跨组件传参

（1）方式一：localstorage

    <template>
        <div class="course-card">
            <h3 @click="goDetail">{{course.name}}</h3>
        </div>
    </template>

    <script>
        export default {
            name: "CourseCard",
            props: [‘course‘],
            methods:{
                goDetail(){
                    this.$router.push(
                        {
                            name:‘course_detail‘,
                            query:{id:this.course.id}
                        }  // 通过传参id 需要使用``这个双引号可以添加变量
                    )
                }
            }
        }
    </script>

    <style scoped>
        .course-card h3, .course-card a {
            width: 200px;
            height: 200px;
            border-radius: 50%;
    background-color: coral;
            font: normal 20px/200px ‘STSong‘;
            float: left;
            text-align: center;
            cursor: pointer;
            display: block;
        }
    </style>

小组件一

<template>
    <div class="nav">
        <ul>
            <li :class="{active: currentPage === ‘/‘}">
                <router-link to="/">主页</router-link>
            </li>
            <li :class="{active: currentPage === ‘/course‘}">
                <router-link to="/course">课程</router-link>
            </li>
            <li :class="{active: currentPage === ‘/course_detail‘}">
<!--                路由跳转-->
                <router-link :to="{name: ‘course_detail‘}">课程详情页</router-link>
            </li>
        </ul>
    </div>
</template>

<script>
    export default {
        name: "Nav",
        data(){
            return{
                currentPage:‘‘
            }
        },
        created() {
            this.currentPage = this.$route.path
        }
    }
</script>

<style scoped>
    .nav {
        width: 100%;
        height: 60px;
        background-color: black;
    }

    .nav li {
        float: left;
        font: normal 20px/60px ‘微软雅黑‘;
        padding: 0 30px;
    }

    .nav li:hover {
        cursor: pointer;
        background-color: aquamarine;
    }

    .nav li.active {
        cursor: pointer;
        background-color: aquamarine;
    }
</style>

小组件二

<template>
    <div>
        <Nav></Nav>
        <button type="button" @click="goPage(‘/course‘)">跳转课程页面</button>
        <button type="button" @click="gocourse_detail(‘/course_detail‘)">跳转课程详情页面</button>
        <button type="button" @click="goPage(‘/‘)">跳转主页</button>
        <button type="button" @click="goBack">页面前进返回</button>
        <h2>{{cTitle}}</h2>
        <hr>
        <div>
            <CourseCard v-for="course in course_list" :key="course.name" :course="course"></CourseCard>
        </div>
    </div>
</template>

<script>
    import Nav from "../components/Nav";
    import CourseCard from ‘@/components/CourseCard‘

    let course_list = [
        {
            id: 1,
            name: ‘Python入门到入土‘
        },
        {
            id: 2,
            name: ‘前端放弃攻略‘
        },
        {
            id: 3,
            name: ‘你最棒，他最强‘
        },
        {
            id: 4,
            name: ‘基佬修炼法则‘
        },
    ];

    export default {
        name: "course",
        components: {
            Nav,
            CourseCard
        },
        data() {
            return {
                course_list,
                cTitle: ‘课程页‘
            }
        },
        methods: {
            goPage(path) {
                let current_path = this.$route.path;
                if (current_path != path) {
                    this.$router.push(path)

                }
            },
            goBack() {
                this.$router.go(-1);
                this.$router.go(1)
            },
            gocourse_detail() {
                this.$router.push({name: ‘course_detail‘});
            }
        },
        created() {
            localStorage.cTitle && (this.cTitle = localStorage.cTitle)
        }

    }
</script>

<style scoped>

</style>

页面层一

<template>
    <div>
        <Nav></Nav>

        <button type="button" @click="goPage(‘/course‘)">跳转课程页面</button>

        <button type="button" @click="goPage(‘/‘)">跳转主页</button>
        <button type="button" @click="goBack">页面前进返回</button>
        <h2>课程详情页</h2>
        <p>
            主页:<input type="text" v-model="hTitle">
            <!--            点击修改主页的名称会发生改名-->
            <button @click="changehTitle">修改主页</button>
        </p>
        <p>
            课程页:<input type="text" v-model="cTitle">
            <!--            点击修改课程页的名称会发生改名-->
            <button @click="changecTitle"> 修改课程页</button>
        </p>
        <hr>
        <p> {{course.name}} </p>
        <p> {{course.info}}</p>
        <p> {{course.price}}</p>
    </div>
</template>

<script>
    import Nav from "../components/Nav";

    let course_list = [
        {
            id: 1,
            name: ‘Python入门到入土‘,
            price: 6.66,
            info: ‘三分钟入门，一分钟入土！学了你不吃亏，不学你就废了！‘
        },
        {
            id: 2,
            name: ‘前端放弃攻略‘,
            price: 3.66,
            info: ‘学习前端，忘掉所有痛苦！‘
        },
        {
            id: 3,
            name: ‘你最棒，他最强‘,
            price: 5.22,
            info: ‘别做梦了！‘
        },
        {
            id: 4,
            name: ‘基佬修炼法则‘,
            price: 80000,
            info: ‘就是他，错不了！‘
        },
    ];

    export default {
        name: "Course-detail",
        components: {
            Nav
        },
        data() {
            return {
                course: {},
                hTitle: ‘‘,
                cTitle: ‘‘,
            }
        },
        methods: {
            goPage(path) {
                let current_path = this.$route.path;
                if (current_path != path) {
                    this.$router.push(path)
                }
            },
            goBack() {
                this.$router.go(-1);
                this.$router.go(1);
            },
            changehTitle() {
                this.hTitle && (localStorage.hTitle = this.hTitle);     // 只有this.hTitle为真（也就是输入的有值） 后面的才会成立

            },
            changecTitle() {
                this.cTitle && (localStorage.cTitle = this.cTitle)        // 只有this.cTitle为真（也就是输入的有值） 后面的才会成立
            },

        },
        created() {

            let id = this.$route.query.id;      // 接受传参值
            for (let courses of course_list) {  // 便利所有的值
                if (id == courses.id) {

                    this.course = courses;

                    break
                }
            }
        }
    }
</script>

<style scoped>

</style>

页面层二

<template>
    <div class="">
        <Nav></Nav>
        <button type="button" @click="goPage(‘/course‘)">跳转课程页面</button>
        <button type="button" @click="gocourse_detail(‘/course_detail‘)">跳转课程详情页面</button>

        <button type="button" @click="goBack">页面前进返回</button>
        <h2>{{hTitle}}</h2>
        <hr>
    </div>
</template>

<script>

    import Nav from "../components/Nav";

    export default {
        name: ‘home‘,
        components: {
            Nav,

        },
        data() {
            return {
                hTitle: ‘主页‘

            }
        },
        methods: {
            goPage(path) {
                let current_path = this.$route.path;
                if (current_path != path) {
                    this.$router.push(path)  // 跳转到页面

                }
            },
            goBack() {
                this.$router.go(-1); // 返回上一页
                this.$router.go(-2);  // 返回上两页

                this.$router.go(1)  // 前进一页
            },
            gocourse_detail() {
                this.$router.push({name: ‘course_detail‘});  // 路由跳转
            }

        },
        created() {
            localStorage.hTitle && (this.hTitle = localStorage.hTitle)  // 如果localStorage有值 则使用仓库的 没有值使用默认值
        }
    }
</script>

页面层三

PS:

　　（1）上述课程详情页 更改了主页与课程页面的名称 且刷新之后课程名称不会更改为原有的

　　（2）localstorage存储的是永久的数据

（2）方式二：VUE仓库（store.js）

（1）

<template>
    <div>
        <Nav></Nav>
        <button type="button" @click="goPage(‘/course‘)">跳转课程页面</button>
        <button type="button" @click="gocourse_detail(‘/course_detail‘)">跳转课程详情页面</button>
        <button type="button" @click="goPage(‘/‘)">跳转主页</button>
        <button type="button" @click="goBack">页面前进返回</button>
        <h2>{{cTitle}}</h2>
        <hr>
        <div>
            <CourseCard v-for="course in course_list" :key="course.name" :course="course"></CourseCard>
        </div>
    </div>
</template>

<script>
    import Nav from "../components/Nav";
    import CourseCard from ‘@/components/CourseCard‘

    let course_list = [
        {
            id: 1,
            name: ‘Python入门到入土‘
        },
        {
            id: 2,
            name: ‘前端放弃攻略‘
        },
        {
            id: 3,
            name: ‘你最棒，他最强‘
        },
        {
            id: 4,
            name: ‘基佬修炼法则‘
        },
    ];

    export default {
        name: "course",
        components: {
            Nav,
            CourseCard
        },
        data() {
            return {
                course_list,
                cTitle: ‘课程页‘
            }
        },
        methods: {
            goPage(path) {
                let current_path = this.$route.path;
                if (current_path != path) {
                    this.$router.push(path)

                }
            },
            goBack() {
                this.$router.go(-1);
                this.$router.go(1)
            },
            gocourse_detail() {
                this.$router.push({name: ‘course_detail‘});
            }
        },
        created() {

                this.cTitle = this.$store.state.cTitle  // 获取仓库数据
        }

    }
</script>

<style scoped>

</style>

课程页

<template>
    <div>
        <Nav></Nav>

        <button type="button" @click="goPage(‘/course‘)">跳转课程页面</button>

        <button type="button" @click="goPage(‘/‘)">跳转主页</button>
        <button type="button" @click="goBack">页面前进返回</button>
        <h2>课程详情页</h2>
        <p>
            主页:<input type="text" v-model="hTitle">
            <!--            点击修改主页的名称会发生改名-->
            <button @click="changehTitle">修改主页</button>
        </p>
        <p>
            课程页:<input type="text" v-model="cTitle">
            <!--            点击修改课程页的名称会发生改名-->
            <button @click="changecTitle"> 修改课程页</button>
        </p>
        <hr>
        <p> {{course.name}} </p>
        <p> {{course.info}}</p>
        <p> {{course.price}}</p>
    </div>
</template>

<script>
    import Nav from "../components/Nav";

    let course_list = [
        {
            id: 1,
            name: ‘Python入门到入土‘,
            price: 6.66,
            info: ‘三分钟入门，一分钟入土！学了你不吃亏，不学你就废了！‘
        },
        {
            id: 2,
            name: ‘前端放弃攻略‘,
            price: 3.66,
            info: ‘学习前端，忘掉所有痛苦！‘
        },
        {
            id: 3,
            name: ‘你最棒，他最强‘,
            price: 5.22,
            info: ‘别做梦了！‘
        },
        {
            id: 4,
            name: ‘基佬修炼法则‘,
            price: 80000,
            info: ‘就是他，错不了！‘
        },
    ];

    export default {
        name: "Course-detail",
        components: {
            Nav
        },
        data() {
            return {
                course: {},
                hTitle: ‘‘,
                cTitle: ‘‘,
            }
        },
        methods: {
            goPage(path) {
                let current_path = this.$route.path;
                if (current_path != path) {
                    this.$router.push(path)
                }
            },
            goBack() {
                this.$router.go(-1);
                this.$router.go(1);
            },
            changehTitle() {
                this.hTitle && (localStorage.hTitle = this.hTitle);     // 只有this.hTitle为真（也就是输入的有值） 后面的才会成立

            },
            changecTitle() {
                console.log(this.$store);  // 查看仓库数据存储在哪个目录下
                this.$store.state.cTitle = this.cTitle;  // 数据更改

            },

        },
        created() {

            let id = this.$route.query.id;      // 接受传参值
            for (let courses of course_list) {  // 便利所有的值
                if (id == courses.id) {

                    this.course = courses;

                    break
                }
            }
        }
    }
</script>

<style scoped>

</style>

课程详情页

import Vue from ‘vue‘
import Vuex from ‘vuex‘
import cookies from ‘vue-cookies‘

Vue.use(Vuex);
Vue.use(cookies);
export default new Vuex.Store({
  state: {
      cTitle:‘课程页‘
  },
  mutations: {

  },
  actions: {

  }
})

store.js

PS:

　　（1）如上述课程详情页从仓库获取数据更改了课程页的名称

　　（2）刷新更改名称之后的页面 页面名称又恢复之前的页面

　　（3）vue通过仓库存储的数据 不会临时有效刷新就没了

（2）仓库插件

export default new Vuex.Store({
    state: {
        title: ‘默认值‘
    },
    mutations: {
        // mutations 为 state 中的属性提供setter方法
        // setter方法名随意，但是参数列表固定两个：state, newValue
        setTitle(state, newValue) {
            state.title = newValue;
        }
    },
    actions: {}
})

store.js

任意组件给变量赋值
this.$store.state.title = ‘newTitle‘
this.$store.commit(‘setTitle‘, ‘newTitle‘)
任意组件获取变量的值
console.log(this.$store.state.title)

（3）方式三：cookie

（1）安装

cnpm install vue-cookies  // 安装cookie插件

（2）配置

// 第一种
import cookies from ‘vue-cookies‘      // 导入插件
Vue.use(cookies);                    // 加载插件
new Vue({
    // ...
    cookies,                        // 配置使用插件原型 $cookies
}).$mount(‘#app‘);

// 第二种
import cookies from ‘vue-cookies‘    // 导入插件
Vue.prototype.$cookies = cookies;    // 直接配置插件原型 $cookiesPS：推荐使用第二种

<template>
    <div class="tst-page">
        <Nav></Nav>
        <h2>测试页面</h2>
        <p>
            <input type="text" v-model="token">
            <button @click="setToken">设置token</button>
        </p>
        <p>
            <button @click="getToken">获取token</button>
        </p>
        <p>
            <button @click="delToken">删除token</button>
        </p>
    </div>
</template>

<script>
    import Nav from ‘@/components/Nav.vue‘

    export default {
        name: "TestPage",
        components: {
            Nav
        },
        data() {
            return {
                token: ‘‘
            }
        },
        methods: {
            setToken() {
                if (this.token) {
                    let token = this.token;
                    this.$cookies.set(‘token‘, token, ‘1d‘); // 设置token 第一个参数是key 第二个参数是值 第三个参数是token生存时间 默认一天
                    console.log(token);
                    this.token = ‘‘
                }
            },
            getToken() {
                this.$cookies.get(‘token‘)  // 获取token
            },
            delToken() {
                this.$cookies.remove(‘token‘)  // 删除token
            },
        }
    }
</script>

<style scoped>

</style>

页面层

PS：

　　（1）token：用来认证的字符串

　　（2）产生：后台产生

　　（3）存储：后台存储（session表 文件 缓存） 前台存储：cookie

　　（4）使用：服务器生成返回给前台 前台进行认证的时候携带cookie进行认证

　　（5） 前后台分离项目：后台生成token，返回给前台 => 前台自己存储，发送携带token请求 => 后台完成token校验 => 后台得到登陆用户

四：axios

（1）作用：前后台数据进行交互

（2）安装

cnpm install axios

（3）main.js

import axios from ‘axios‘

Vue.prototype.$axios = axios;

（3）

<template>
    <div class="tst-page">
        <Nav></Nav>
        <h2>测试页面</h2>
        <p>
            用户名称:
            <input type="text" v-model="username">
        </p>
        <p>
            用户密码:
            <input type="text" v-model="password">
        </p>
        <button type="button" @click="axiosAction">后台提交数据</button>

    </div>
</template>

<script>
    import Nav from ‘@/components/Nav.vue‘

    export default {
        name: "TestPage",
        components: {
            Nav
        },
        data() {
            return {
                username: ‘‘,
                password: ‘‘
            }
        },
        methods: {

            axiosAction() {
                // this.$axios({
                //     url: ‘http://127.0.0.1:8000/test/‘,  // 因为不在一个服务器必须写全路径
                //     method: ‘get‘,  // get请求
                //     params: {
                //         username: this.username,
                //         password: this.password,
                //     }
                // })
                this.$axios({
                        url: ‘http://127.0.0.1:8000/test/‘,  // 因为不在一个服务器必须写全路径
                        method: ‘post‘,  // get请求
                        params: {
                            username: this.username,
                            password: this.password,

                        }

                    },
                    this.username = ‘‘,
                    this.password = ‘‘
                )
                    .then(function (response) {  // 回调函数 成功
                        console.log(response)
                    }).catch(function (response) {
                    console.log(response)
                })
            },

        }

    }
</script>

<style scoped>

</style>

前段

五：域间同源问题

// 后台接收到前台的请求，可以接收前台数据与请求信息，发现请求的信息不是自身服务器发来的请求，拒绝响应数据，这种情况称之为 - 跨域问题（同源策略 CORS）

// 导致跨域情况有三种
// 1) 端口不一致
// 2) IP不一致
// 3) 协议不一致

// Django如何解决 - django-cors-headers模块
// 1) 安装：pip3 install django-cors-headers
// 2) 注册：
INSTALLED_APPS = [
    ...
    ‘corsheaders‘
]
// 3) 设置中间件：
MIDDLEWARE = [
    ...
    ‘corsheaders.middleware.CorsMiddleware‘
]
// 4) 设置跨域：
CORS_ORIGIN_ALLOW_ALL = True

六：element-ui插件

（1）安装：

>: cnpm i element-ui -S

（2）main.js配置

import ElementUI from ‘element-ui‘;
import ‘element-ui/lib/theme-chalk/index.css‘;
Vue.use(ElementUI);

原文地址：https://www.cnblogs.com/asdaa/p/11672552.html

时间： 2024-10-05 01:32:51

vue学习第四天的相关文章

Vue学习系列(四)——理解生命周期和钩子

前言 在上一篇中,我们对平时进行vue开发中遇到的常用指令进行归类说明讲解,大概已经学会了怎么去实现数据绑定,以及实现动态的实现数据展示功能,运用指令,可以更好更快的进行开发.而在这一篇中,我们将通过实例,探究vue的生命周期. 万物皆有灵,世间万物都拥有灵魂,小到山河湖海,花草树木,蚂蚁到人类,以及所有的动植物,大到地球星空和宇宙,都拥有灵魂,可以说他们都是有生命的,只是他们的生命形态是我们人类所不能理解的存在.在生产中,生命周期通俗来讲,就是从自然中来回到自然中去的全过程,也就是从采集材料设

vue学习(十四) 条件搜索框动态查询表中数据 数组的新方法

//html <div id="app"> <label> 名称搜索关键字: <input type="text" clasa="form-control" v-model="keywords"> </label> <table class="table table-bordeered table-hover table-striped"> <

vue学习指南：第十一篇(详细) - Vue的 路由 第一篇 ( router )

一.路由的配置 路由  vue-router 1. 什么是路由? 路由相当于一个配置对象 路由:就是我们通过不同的url访问不同的内容,通过angular.js 可以实现多视图的单页,现在流行的单页面开发模式. 2. 路由在web 有两种: 第一种 hash hash值前面带 # "  https:   //    user   :   pass   @ sub.example.com : 8080   /p/a/t/h  ?  query=string  #hash " 第二种是 h

Vue学习笔记入门篇——组件的使用

本文为转载,原文:Vue学习笔记入门篇--组件的使用 组件定义 组件 (Component) 是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码.在较高层面上,组件是自定义元素,Vue.js 的编译器为它添加特殊功能.在有些情况下,组件也可以是原生 HTML 元素的形式,以 is 特性扩展. 组件使用 注册 注册一个全局组件,你可以使用 Vue.component(tagName, options).组件在注册之后,便可以在父实例的模块中以自定义元素 的形式使用.

Vue学习笔记入门篇——组件的内容分发(slot)

本文为转载,原文:Vue学习笔记入门篇--组件的内容分发(slot) 介绍 为了让组件可以组合,我们需要一种方式来混合父组件的内容与子组件自己的模板.这个过程被称为 内容分发 (或 "transclusion" 如果你熟悉 Angular).Vue.js 实现了一个内容分发 API,使用特殊的 'slot' 元素作为原始内容的插槽. 编译作用域 在深入内容分发 API 之前,我们先明确内容在哪个作用域里编译.假定模板为: <child-component> {{ messa

Caliburn.Micro学习笔记(四)----IHandle&lt;T&gt;实现多语言功能

Caliburn.Micro学习笔记(四)----IHandle<T>实现多语言功能 说一下IHandle<T>实现多语言功能 因为Caliburn.Micro是基于MvvM的UI与codebehind分离, binding可以是双向的所以我们想动态的实现多语言切换很是方便今天我做一个小demo给大家提供一个思路 先看一下效果 点击英文  变成英文状态点chinese就会变成中文                          源码的下载地址在文章的最下边 多语言用的是资源文件建

代码管理工具 --- git的学习笔记四《重新整理git(1)》

1.创建版本库 mkdir  创建目录 cd  地址,到该地址下 pwd 显示当前目录 1.创建目录 $ mkdir startGit $ cd startGit $ pwd 显示当前目录 或者cd到桌面,然后再创建目录 2.初始化版本库 $ git init 初始化仓库 提示信息:Initialized empty Git repository in /Users/xingzai/Desktop/startGit/.git/ 建立一个空的git仓库在/Users/xingzai/Desktop

运维学习第四弹

运维学习第四弹之shell(bash): 一. hell可以翻译成壳,大多指能够对内部核心起到保护作用的一种装置或结构.在计算机科学中shell的实际意义为操作者提供的.能够通过系统调用或库调用使用整个计算机资源的访问接口. 它既是一种命令解析器又是一种程序设计语言.作为命令解析器,它可以解释和执行用户输入的命令,也可以自动地解释和执行预先编写好并保存在某个文本文件中的一系列的命令:作为程序设计语言,shell特别定义了各种变量和参数,并提供了许多在高级语言中才具有的控制结构,包括循环和条件分支

WebService学习总结(四)——调用第三方提供的webService服务

WebService学习总结(四)——调用第三方提供的webService服务 互联网上面有很多的免费webService服务,我们可以调用这些免费的WebService服务,将一些其他网站的内容信息集成到我们的Web应用中显示,下面就以获取天气预报数据和查询国内手机号码归属地为例进行说明. 气象中心的管理系统将收集的天气信息并将数据暴露出来(通过WebService Server), 而各大站点的应用就去调用它们得到天气信息并以不同的样式去展示(WebService Client).一. 调用