Vue(二)

最新推荐文章于 2024-08-24 23:57:15 发布

小开心

最新推荐文章于 2024-08-24 23:57:15 发布

阅读量247

点赞数

分类专栏： Vue全家桶文章标签： vue ajax

本文链接：https://blog.csdn.net/qq_47142993/article/details/119424181

版权

Vue全家桶专栏收录该内容

2 篇文章 0 订阅

订阅专栏

Vue

8. 事件修饰符

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

# 1.常用的事件修饰符
	.stop    停止
	.prevent 阻止
	.self    独自
	.once    一次

8.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>

8.2 prevent 事件修饰符

用来阻止标签的默认行为

<!--用来阻止事件的默认行为-->
<a href="http://www.baizhibest.com/" @click.prevent="aClick">小唐科技</a>

8.3 self 事件修饰符

用来针对于当前标签的事件触发 ===========> 只触发自己标签的上特定动作的事件只关心自己标签上触发的事件不监听事件冒泡

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

8.4 once 事件修饰符

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

    <!--
    .prevent : 用来阻止事件的默认行为
    .once    : 用来只执行一次特定的事件
    -->
    <a href="http://www.baizhibest.com/" @click.prevent.once="aClick">百知教育</a>

9. 按键修饰符

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

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

9.1 enter 回车键

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

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

9.2 tab 键

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

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

10. Axios 基本使用

10.1 引言

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

10.2 Axios 第一个程序

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

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

10.2.1 GET方式的请求

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

10.2.2 POST方式请求

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

10.2.3 axios并发请求

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

function getUserAccount() {
  return axios.get('/user/12345');
}

function getUserPermissions() {
  return axios.get('/user/12345/permissions');
}

axios.all([getUserAccount(), getUserPermissions()])
  .then(axios.spread(function (acct, perms) {
    // 两个请求现在都执行完成
}));

10.2.4 拦截器

在请求或响应被 then 或 catch 处理前拦截它们。

// 添加请求拦截器
axios.interceptors.request.use(function (config) {
  // 在发送请求之前做些什么
  return config;
}, function (error) {
  // 对请求错误做些什么
  return Promise.reject(error);
});

// 添加响应拦截器
axios.interceptors.response.use(function (response) {
  // 对响应数据做点什么
  return response;
}, function (error) {
  // 对响应错误做点什么
  return Promise.reject(error);
});

完整代码演示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue系列课程</title>
</head>
<body>
    <div id="app">
        <h1>Axios的基本使用</h1>

    </div>
</body>
</html>
<script src="js/axios.min.js"></script>
<script>

    //发送axios的get方式请求
/*
    axios.get("http://localhost:8081/demo?id=21&name=xiaochen").then(function(res){
        console.log(res);
        console.log(res.data);
    }).catch(function (err) {
        alert('进入catch')
        console.log(err);
    });
*/

    //发送一个post方式请求
    // axios.post("http://localhost:8081/test",{id:21,name:"xiaochen"}).then(function(res){
    //     console.log(res);
    //     console.log(res.data);//响应结果
    // }).catch(function(err){
    //     console.log(err);
    // });

    //发送put方式请求
    // axios.put("http://localhost:8081/test1",{id:22,name:"小三"}).then(function(res){
    //     console.log(res);
    //     console.log(res.data);//响应结果
    // }).catch(function(err){
    //     console.log(err);
    // });




    //创建axios的配置对象
    var instance = axios.create({
        baseURL:"http://localhost:8081/",
        timeout: 5000,
    });


    //请求拦截器
    instance.interceptors.request.use(function (config) {
        if(config.url.indexOf("?")==-1){
            config.url+="?token=1234"
        }else{
            config.url +="&token=1234";
        }
        return config;
    });


    //响应拦截器
    instance.interceptors.response.use(function (response) {
        if(response.status==500){
            alert('服务器出现错误!');
        }
        return response;
    });


    //发送get方式请求
    instance.get("/demo?id=11&name=xiaochen").then(function(res){
        console.log(res.data);
    });

    //发送post方式请求
    instance.post("http://localhost:8081/test",{id:21,name:"xiaochen"}).then(function(res){
        console.log(res.data);
    });
</script>

总结(干货必看)

在这里插入图片描述

小开心

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue(二)

Vue8. 事件修饰符8.1 stop事件修饰符8.2 prevent 事件修饰符8.3 self 事件修饰符8.4 once 事件修饰符9. 按键修饰符9.1 enter 回车键9.2 tab 键10. Axios 基本使用10.1 引言10.2 Axios 第一个程序10.2.1 GET方式的请求10.2.2 POST方式请求10.2.3 axios并发请求10.2.4 拦截器完整代码演示8. 事件修饰符修饰符: 作用用来和事件连用,用来决定事件触发条件或者是阻止事件的触发机制# 1.常用的事
复制链接

扫一扫

专栏目录