Vue 2 上手（二）

一个页面中可以创建多个vue实例，而vue实例所带的信息只作用于自己挂载 的区域

一、监听器

监听某个数据是否发生变化，如果变化是否要处理

watch

watch: {
                message: function (newVal, oldVal) {
                    console.log(newVal, oldVal)
                }
            },

二、axios

axios与ajax的区别

        技术实现方式不同

        axios提供了请求拦截和响应拦截

                拦截：请求头需要写太多token信息

                响应：针对状态码进行同意判断处理：404，403，500，200

1、axions的使用

        1）引入axios.js

<script src="../static/js/axios.min.js"></script>

         2）确定请求方式

 顺序为 axios.get().then().catch()

         首先确定是get/post

        然后使用then做方法

        发生错误使用catch

1、GET方式请求

//GET的请求格式
            //发送axios请求
            axios.get(
                “url地址”, 
                {//传输data
                    params: {
                        acc: this.userInfo.username,
                        pwd: this.userInfo.password
                    }
                }
            ).then(
                function (res) {
                    console.log(res);
                }
            ).catch(function (err) {
                console.log(err);
            });
        

2、POST方式请求

 axios.post(
                "URL地址",
                {
                    adminAccount: this.userInfo.username,
                    adminPwd: this.userInfo.password
                }
            ).then(
                function (res) {
                    if (res.data.code == 1) {
                        alert(res.data.msg)
                    } else {
                        alert(res.data.msg)
                    }
                }
            ).catch(
                function (error) {
                    alert(error);
                }
            );

2、CORS

跨越问题：

同源策略：发送请求中，前后端的ip/端口（域名）是同一个

解决：

        前端解决：vue代理转发、nginx

        后端解决：使用注解 @CrossOrigin

@CrossOrigin
    @RequestMapping("/login")
    @ResponseBody
    public ResponseDTO loginAdmin(String acc,String pwd){
        return adminService.loginAdmin(acc, pwd);
    }

三、子组件

遵循模块化开发

        优点：1、简化代码，逻辑结构清晰

                  2、组件重复利用

全局组件：

注册全局组件 ,参数：组件名，参数信息：模板template,data:数据,methods:方法

需要先声明后调用，并且需要声明在vue上

Vue.component("top-hello", {
            template://模板
                `<div>
                    
                </div>`,
            data() {
                return {
                    userInfo: {
                        username: '123',
                        password: '123'
                    }
                }
            },
            methods: {
                login() {
                    alert(this.userInfo.username + this.userInfo.password)
                }
            }
        })

局部组件： 

       //局部组件
        new Vue({
            el: '#app',
            data: {
                msg: "hello"
            },
            components: {
                topHello: {
                    template://模板
                        `<div>
                            <p>
                                账号:<input type="text" v-model="userInfo.username">
                            </p>
                            <p>
                                密码:<input type="password" v-model="userInfo.password">
                            </p>
                            <p>
                                <button @click="login">登录</button>
                            </p>
                        </div>`,
                    data() {
                        return {
                            userInfo: {
                                username: '123',
                                password: '123'
                            }
                        }
                    },
                    methods: {
                        login() {
                            alert(this.userInfo.username + this.userInfo.password)
                        }
                    }
                }
            }
        })