zoukankan      html  css  js  c++  java
  • Vue

    路由:vue-router

    1)name使用

    路由配置
    import Main from './views/Main'
    routes: [
        {
            path: '/main',
            name: 'main',
            component: Main
        }
    ]
    
    视图使用
    <router-link :to="{name: 'main'}">主页</router-link>
    
    2)router-link与系统a标签的区别
    router-link:会被vue渲染成a标签,但是点击这样的a标签不能发生页面的转跳,只会出现组件的替换
    a:也可以完成同样的效果,但是会发生页面的转跳
    
    3)路由重定向
    routes: [
    	{
            path: '/',
            name: 'home',
            component: Home
        },
        {
            path: '/home',
            redirect: '/', // 重定向
        }
    ]
    
    4)路由传参-1
    路由:router.js
    {
        // path如果是通过to直接访问,路由必须完全对应
        // :id代表可以完成任意内容匹配,用变量id保存 
        // 请求/course/detail/1 和 /course/detail/abc,id变量分别存的1和abc
        // path: '/course/detail/1',  // 死的
        path: '/course/detail/:id',  // 活的
        name: 'course-detail',
        component: CourseDetail
    }
    
    转跳页面:Course.vue
    <template>
        <div class="course">
            <h1>课程</h1>
            <hr>
    
            <ul>
                <li v-for="course in courses" :key="course.title">
                    <router-link :to="'/course/detail/' + course.id">{{ course.title }}</router-link>
                </li>
            </ul>
    
        </div>
    </template>
    
    <script>
        let course_list = [
            {
                id: 1,
                title: '水浒传'
            },
            {
                id: 2,
                title: '西游记'
            },
            {
                id: 3,
                title: '金瓶Mei
    '
            },
        ];
        export default {
            name: "Course",
            data () {
                return {
                    courses: []
                }
            },
            // 组件创建成功去获取数据
            created () {
                this.courses = course_list
            },
    
    
        }
    </script>
    
    <style scoped>
        li a {
            display: block;
        }
        li, li a {
            border: 1px solid pink;
            background-color: rgba(123, 21, 56, 0.3);
            margin-top: 10px;
            line-height: 80px;
            cursor: pointer;
        }
    </style>
    
    渲染页面:CourseDetail.vue
    <template>
        <div class="course-detail">
            <h1>课程详情</h1>
            <hr>
            <h2>{{ ctx }}</h2>
        </div>
    </template>
    
    <script>
        let course_detail_list = [
            '数据有误', '水浒传', '西游记', '金瓶Mei'
        ];
    
        export default {
            name: "CourseDetail",
            data () {
                return {
                    ctx: ''
                }
            },
            created () {
                console.log('详情页面被渲染了');
                // this.$route:负责路由的数据
                // this.$router:负责路由的路径
                // this.$route.params可以拿到链接中 :变量 变量中的数据
                let index = this.$route.params.id;
                if (index < 0 || index >= course_detail_list.length) index = 0;
                this.ctx = course_detail_list[index]
            }
        }
    </script>
    
    <style scoped>
    
    </style>
    
    4)路由传参-2
    路由:router.js
    {
        path: '/course/detail',
        name: 'course-detail',
        component: CourseDetail
    }
    
    转跳页面:Course.vue
    <router-link :to="'/course/detail?id=' + course.id">{{ course.title }}</router-link>
    
    渲染页面:CourseDetail.vue
    created () {
        let index = this.$route.query.id;
        if (index < 0 || index >= course_detail_list.length) index = 0;
        this.ctx = course_detail_list[index]
    }
    
    5)路由传参-3
    路由:router.js
    {
        path: '/course/detail',
        name: 'course-detail',
        component: CourseDetail
    }
    
    转跳页面:Course.vue
    methods: {
        转跳的方法 (参数) {
            this.$router.push({
                name: 'course-detail',
                params 或者 query: {
                    参数们
                },
                : {
                    参数们
                }
            })
        }
    }
    
    渲染页面:CourseDetail.vue
    created () {
        let 参数的数据 = this.$route.query.参数的key 或者 this.$route.params.参数的key
    }
    
    6)go
    this.$router.go(-1)  //返回历史记录的前一页
    

    仓库:vuex

    仓库配置:store.js
    import Vue from 'vue'
    import Vuex from 'vuex'
    
    Vue.use(Vuex);
    
    export default new Vuex.Store({
        // 全局可以访问的变量 - 获取值
        // 组件内:this.$store.state.title
        state: {
            title: '主页'
        },
        // 全局可以访问的方法 - 修改值
        // 组件内:this.$store.commit('updateTitle', '新值')
        mutations: {
            updateTitle (state, newValue) {
                state.title = newValue
            }
        },
        actions: {}
    })
    

    前后台交互:axios

    安装
    >: cd 项目目录
    >: cnpm install axios --save
    
    配置:main.js
    import Axios from 'axios'
    Vue.prototype.$axios = Axios;
    
    跨域问题(同源策略):Access-Control-Allow-Origin => CORS
    前提:前台向后跳请求数据
    1)服务器不一致 - ip
    2)应用不一致 - 端口
    3)协议不一致 - http <-> https
    
    django解决跨域
    '''
    1)安装django-cors-headers模块
    
    2)在settings.py中配置
    # 注册app
    INSTALLED_APPS = [
    	...
    	'corsheaders'
    ]
    3)添加中间件
    MIDDLEWARE = [
    	...
    	'corsheaders.middleware.CorsMiddleware'
    ]
    4)允许跨域源
    CORS_ORIGIN_ALLOW_ALL = True
    '''
    
    axios请求方式

    get

    this.$axios({
        url: 'http://localhost:8000/test/data/',
        method: 'get',
        params: {
            usr: 'zero',
            pwd: '000'
        }
    }).then((response) => {
        console.log(response.data)
    }).error((error) => {
        console.log(error)
    });
    
    
    this.$axios.get('http://localhost:8000/test/data/', {
        params: {
            usr: 'zero',
            pwd: '000'
        }
    }).then((response) => {
        console.log(response.data)
    }).error((error) => {
        console.log(error)
    });
    

    post

    this.$axios({
        url: 'http://localhost:8000/test/data/',
        method: 'post',
        data: {
            username: 'owen',
            password: '123'
        }
    }).then((response) => {
        console.log(response.data)
    }).error((error) => {
        console.log(error)
    });
    
    
    this.$axios.post('http://localhost:8000/test/data/', {
        username: 'owen',
        password: '123',
        headers: {
            'Content-Type': 'urlencoded'
        }
    }).then((response) => {
        console.log(response.data)
    }).error((error) => {
        console.log(error)
    });
    
    安装
    >: cd 项目目录
    >: cnpm install vue-cookie --save
    
    配置:main.js
    import cookie from 'vue-cookie'
    Vue.prototype.$cookie = cookie;
    
    使用:在任何方法中
    // token是后台返回的
    
    // 设置cookie
    // this.$cookie.set(key, value, time)
    this.$cookie.set('token', token, 1);
    
    // 取出cookie
    // this.$cookie.get(key)
    console.log(this.$cookie.get('token'));
    
    // 删除cookie
    // this.$cookie.delete(key)
    this.$cookie.delete('token');
    
  • 相关阅读:
    Python入门-函数进阶
    Python入门-初始函数
    Leetcode300. Longest Increasing Subsequence最长上升子序列
    Leetcode139. Word Break单词拆分
    Leetcode279. Perfect Squares完全平方数
    Leetcode319. Bulb Switcher灯泡开关
    Leetcode322. Coin Change零钱兑换
    二叉树三种遍历两种方法(递归和迭代)
    Leetcode145. Binary Tree Postorder Traversal二叉树的后序遍历
    Leetcode515. Find Largest Value in Each Tree Row在每个树行中找最大值
  • 原文地址:https://www.cnblogs.com/luowenConnor/p/11391595.html
Copyright © 2011-2022 走看看