1. 事件修饰符

修饰符: 作用用来和事件连用,用来决定事件触发条件或者是阻止事件的触发机制

# 1.常用的事件修饰符
    .stop
    .prevent
    .capture
    .self
    .once
    .passive

1.1 stop事件修饰符

用来阻止事件冒泡

<div id="app">
    <div class="aa" @click="divClick">
        <!--用来阻止事件冒泡-->
        <input type="button" value="按钮" @click.stop="btnClick">
    </div>
</div>
<!--引入vue-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    const app = new Vue({
        el: "#app",
        data: {},
        methods: {
            btnClick(){
                alert('button被点击了');
            },
            divClick(){
                alert('div被点击了');
            }
        }
    });
</script>

1.2 prevent 事件修饰符

用来阻止标签的默认行为

<!--用来阻止事件的默认行为-->
<a href="http://www.baidu.com/" @click.prevent="aClick">Vue3.0欢迎您的加入！</a>

1.3 self 事件修饰符

用来针对于当前标签的事件触发

===> 只触发自己标签的上特定动作的事件 只关心自己标签上触发的事件 不监听事件冒泡

<!--只触发标签自身的事件-->
<div class="aa" @click.self="divClick">
    <!--用来阻止事件冒泡-->
    <input type="button" value="按钮" @click.stop="btnClick">
    <input type="button" value="按钮1" @click="btnClick1">
</div>

1.4 once 事件修饰符

once 一次 作用: 就是让指定事件只触发一次

<!--
.prevent : 用来阻止事件的默认行为
.once    : 用来只执行一次特定的事件
-->
<a href="http://www.baidu.com/" @click.prevent.once="aClick">Vue3.0欢迎您的加入！</a>

2. 按键修饰符

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

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

2.1 enter 回车键

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

<input type="text" v-model="msg" @keyup.enter="keyups">

2.2 tab 键

用来捕获到tab键执行到当前标签时才会触发

<input type="text" @keyup.tab="keytabs">

3. Axios 基本使用

3.1 引言

Axios 是一个异步请求技术,核心作用就是用来在页面中发送异步请求,

并获取对应数据在页面中渲染 页面局部更新技术 Ajax

3.2 Axios 第一个程序

中文网站:https://www.kancloud.cn/yunye/axios/234845

安装: https://unpkg.com/axios/dist/axios.min.js

3.2.1 GET方式的请求

//发送GET方式请求
axios.get("http://localhost:8989/user/findAll?name=xiaohei").then(function(response){
    console.log(response.data);
}).catch(function(err){
    console.log(err);
});

3.2.2 POST方式请求

//发送POST方式请求
axios.post("http://localhost:8989/user/save",{
    username:"xiaohei",
    age:23,
    email:"xiaohei@123.com",
    phone:122202261855
}).then(function(response){
    console.log(response.data);
}).catch(function(err){
    console.log(err);
});

3.2.3 Axios并发请求

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

//1.创建一个查询所有请求
function findAll(){
    return axios.get("http://localhost:8989/user/findAll?name=xiaohei");
}

//2.创建一个保存的请求
function save(){
    return axios.post("http://localhost:8989/user/save",{
        username:"xiaohei",
        age:23,
        email:"xiaohei@123.com",
        phone:13260426185
    });
}

//3.并发执行
axios.all([findAll(),save()]).then(
    axios.spread(function(res1,res2){  //用来将一组函数的响应结果汇总处理
        console.log(res1.data);
        console.log(res2.data);
    })
);//用来发送一组并发请求

4. 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(){
     //5.生命周期中第五个函数,该函数是data中数据发生变化时执行 这个事件执行时仅仅是Vue实例中data数据变化页面显示的依然是原始数据
        console.log("beforeUpdate:"+this.msg);
        console.log("beforeUpdate:"+document.getElementById("sp").innerText);
     },
updated(){    
        //6.生命周期中第六个函数,该函数执行时data中数据发生变化,页面中数据也发生了变化  页面中数据已经和data中数据一致
        console.log("updated:"+this.msg);
        console.log("updated:"+document.getElementById("sp").innerText);
     }

3.销毁阶段
beforeDestory(){
        //7.生命周期第七个函数,该函数执行时,Vue中所有数据 methods componet 都没销毁
    },
destoryed(){ 
        //8.生命周期的第八个函数,该函数执行时,Vue实例彻底销毁
    }

Vue基础示例讲解持续中，关注我一下呦。