携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第15天，点击查看活动详情

🍁 作者：知识浅谈，CSDN签约讲师，CSDN博客专家，华为云云享专家，阿里云专家博主
📌 擅长领域：全栈工程师、爬虫、ACM算法
💒 公众号：知识浅谈
🔥 联系方式vx：zsqtcc

10. 按键修饰符

作用：用来与键盘中的案件事件绑定在一起用来修饰特定的按键事件修饰符

# 按键修饰符
    .enter
    .tab
    .delete {捕获“删除”和“退格”键}
    .esc
    .space
    .up
    .down
    .left
    .right

10.1 .enter .tab .delete 三个触发按键

用来在触发按键之后触发的事件

<div id="app">
    <input type="text" v-model="msg" @keyup.enter="keyups"/>   <!--这个加如.enter之后按回车抬起之后才会触发-->
    <input type="text" v-model="msg1" @keyup.tab="keytab"/>   <!--只有点击了tab键并且焦点跳到这个text文本框上的时候，才会触发的-->
    <input type="text" v-model="msg" @keyup.delete="keydelete"/>
    <!--按下空格键出发-->
    <input type="text" v-model="msg" @keyup.space="keyspace"/>
</div>
<!--引入vue 生产环境版本，优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
    const app = new Vue({
        el: "#app",
        data: {
            msg:"",
            msg1:"",
        },
        methods: {
            keyups(){
                alert("键盘抬起");
            },
            keytab(){
                // alert("tab键点击");
                console.log(this.msg1)
            },
            keydelete(){
              alert("点击了回车或者delete键");
            }
            keyspace(){
                alert("点击空格键触发");
            }
        }
    });
</script>

11. Axios的基本使用

异步请求：和原来的jquery以及ajax相似

11.1 引言

AXios是一个异步请求技术，核心作用就是用于在页面中发送异步请求，并获取对应的数据在页面中的渲染，页面局部更新技术

11.2 Axios的第一个程序

中文网站：www.kancloud.cn/yunye/axios…

安装：使用在线安装

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

11.2.1 GET方式的请求

axios.get("http://localhost:8080/user/findAll?name=test").then(function (response) {
    console.log(response.data);
}).catch(function (err) {
    console.log(err); /*当有异常的时候打印错误的对象*/
})

11.2.2 POST方式的请求

/*发送post请求*/
axios.post("http://localhost:8080/user/save",{
    username:"asdsad",
    age:23,
    email:"asd",
    phone:13245789,
}).then(function (response) {
    console.log(response.data);
}).catch(function (err) {
    console.log(err);
});

11.2.3axios并发请求

并发请求: 将多个请求在同一时刻发送到后端服务接口，最后在集中处理每个请求相应的结果

// 1.创建一个查询所有的请求
function findAll() {
    return axios.get("http://localhost:8080/user/findAll?name=test");
}
//创建一个保存的请求
function save() {
    return axios.post("http://localhost:8080/user/save",{
        username:"asdsad",
        age:23,
        email:"asd",
        phone:13245789,
    })
}
//3.并发执行//用来发送一组并发请求的
axios.all([findAll(),save()]).then(
    axios.spread(function(res1,res2) { //用来将一组函数的响应结果汇总处理
        console.log(res1.data);
        console.log(res2.data);
    })
);//

12 Vue生命周期

生命周期钩子 ===》生命周期函数

Vue 生命周期总结

1. 初始化阶段 beforeCreate(){ //1.生命周期中第一全函数，该函数在执行时Vue实例仅仅完成了自身事件的绑定和生命周期函数的初始化工作，Vue实例中还没有 Data el methods相关属性 console. log("beforecreate:"+this msg); }, created(){ //2.生命周期中第二个函数，该函数在执行时vue实例已经初始化了data属性和 methods中相关方法 console. log("created: +this msg); }, beforemount(){ //3.生命周期中第三个函数，该函数在执行时Vue将EL中指定作用范围作为模板编译 console. log("beforemount: " +document. getElementById("sp" ). innerText); }, mounted(){ //4.生命周期中第四个函数，该函数在执行过程中，已经将数据渲染到界面中并且已经更新页面 console. log("Mounted:"+document. getElementById("sp" ).innerText); }

2. 运行阶段beforeUpdate(){//生命周期的第五个函数，该函数是data中数据发生变化时执行，这个事件执行时，是vue实例中的data发生变化，页面显示的依然是原始数据 console.log("beforeupdate:"+this.msg); console.log("beforeupdate:"+document.getElementById("sp").innerText); }, updated(){//生命周期中第六个函数，该函数执行时候，data中的数据和页面中的数据都发生了变化。 console.log("updated:"+this.msg); console.log("updated:"+document.getElementById("sp").innerText); },

3. 销毁阶段 beforeDestroy() 销毁之前调用的钩子 destroyed() 销毁之后调用的钩子