vue基础下

最新推荐文章于 2022-11-10 15:15:00 发布
最新推荐文章于 2022-11-10 15:15:00 发布
阅读量66 收藏
点赞数
分类专栏： vue 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43991433/article/details/114001695
版权

Promise异步请求解决

异步编程解决方案

用resolve和reject两个参数处理成功和失败两种情况，并通过p.then获取处理结果；

var p=new 	Promise(funtion(reslive,reject){
//要加以判断
//成功函数调用 reslive()
//失败函数调用 reject()
})
p.then(funtion(res){
//正确结果
}，funtion(err){
//错误结果
})

2.发送多次ajax请求

函数（请求）
	.then(funtion(res){
		return 函数（‘请求’）
	}).then(funtion(res){
		得到数据，
	})

实例方法：

​ 1.then( funtion(){},funtion(){}):获取正确和错误的

​ 2.catch（funtion（）{}）：获取错误的：

​ 3.finally（ funtion（）{}）:不管失败还是成功都会执行；

对象方法：

​ 1.Promise.all( ):多次触发多个异步，得到所有结果；

Promise.all(实例1，实例2，实例3).then(funtion(result){
	//三个全部打印
	conslie.log(result)
})

​ 2.Promise.race( ):多次触发得到一次成功的结果

Promise.race(实例1，实例2，实例3).then(funtion(result){
//哪个执行得快打印哪个；
conslie.log(result)
})

fetch请求用法

fetch('请求路径').then(data=>{
return data.text();
}).then(res=>{
	console.log(res)
})

method:‘get’/‘post’/‘put’/‘delete’;

body:'请求参数’；

headers：{请求头}；

1.get请求：

1.fetch('/abc?id=3'.then(data=>{
	return data.text();
}).then(ret=>{
conslole.log(ret)
}));
2.fetch('/abc/123',{
	method:'get'
}).then(data=>{
	return data.text();
}).then(res=>{
	console.log(res)
})

2.delete请求

fetch('/abc/123',{
	method:'get'
}).then(data=>{
	return data.text();
}).then(res=>{
	console.log(res)
})

3.post请求

1.fetch('路径'，{
method：‘post',
body:'uname=lisi&age=21',
headers:{
'Content-Tepy':'application/x-www-form-urlencoded',
}
}).then(data=>{
return data.text()
}).then(ret=>{
console.log(ret)
})

2.fetch('路径'，{
method：‘post',
body:JSON.stringify({
	name:'ahha',
	age:20
})
headers:{
'Content-Tepy':'application/json',
}
}).then(data=>{
return data.text()
}).then(ret=>{
console.log(ret)
})

4.push

fetch('路径'，{
method：‘push',
body:JSON.stringify({
	name:'ahha',
	age:20
})
headers:{
'Content-Tepy':'application/json',
}
}).then(data=>{
return data.text()
}).then(ret=>{
console.log(ret)
})

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ZkWGSCRL-1614080839961)(C:\Users\22692\AppData\Roaming\Typora\typora-user-images\image-20210204191119649.png)]

axios请求用法

axios.get('路径').then(ret=>{
	console.log(ret.data)
})

1.get请求

axios.get(url,{
	param:{
	id:3
	}
}).then(res=>{
	console.log(res.data)
})

三种方式
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Ru37qH8j-1614080839969)(C:\Users\22692\AppData\Roaming\Typora\typora-user-images\image-20210204191558244.png)]
2.delete
在这里插入图片描述

3.post

在这里插入图片描述
全局配置
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-klgo5Vij-1614080840004)(C:\Users\22692\AppData\Roaming\Typora\typora-user-images\image-20210204191805333.png)]
1.axios.defalts.timeout=300 // 超时时间
2.axios.default.baseURL=‘默认地址’
3.axios.defatult.headers['mytokan;]=‘1qqsqewe’ //设置请求头

拦截器

1，请求拦截器：

axios.interceptors.request.use(funtion(config){
	return config;
},funtion(err){
	//处理错误信息
})

2.响应拦截器

axios.interceptors.response.use(funtion(res){
	//进行对数据进行处理
	return res;
},function(err){
//处理响应的错误信息
})

async/await 的基本用法

async function queryData(id) {
const ret = await axios.get('/data');
return ret;
}
queryData.then(ret=>{
console.log(ret)
})

多个·异步请求

async function queryData(id) {
const info = await axios.get('/async1');
const ret = await axios.get(‘async2?info=‘+info.data);
return ret;
}
queryData.then(ret=>{
console.log(ret)
})

错误的返回
在这里插入图片描述

路由

1.路由的概念

（1）后端路由：

​ UR请求地址与服务器资源之间的对应关系；

​ 根据不同用户url，返回不同的内容；

（2）前端路由：

​ 用户事件与事件处理函数之间对应关系；

​ 根据不同的用户事件，返回不同的内容；

2.路由的使用

（1）导入文件 Vue-router.js；

（2）创建路由实例；

router=new VueRouter({
	rotes:[
	{path:'路径',component:组件名},
	{path:'路径',component:组件名}
	]
})

（3）创建组件：

var 组件名={
	template：`<h1>组件模板</h1>`
}

（4）使用占位符

<router-view></router-view>

（5）在vm里面挂载router

 const vm = new Vue({
      el: '#app',
      router
    })

（6）如果想点击跳转

<router-link to="路径"></router-link>

路由嵌套

例如：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <title>Document</title>
  <script src="./lib/vue_2.5.22.js"></script>
  <script src="./lib/vue-router_3.0.2.js"></script>
</head>

<body>
  <div id="app">
    <router-link to="/user">User</router-link>
    <router-link to="/register">Register</router-link>
    <router-view></router-view>
  </div>

  <script>
    const User = {
      template: '<h1>User 组件</h1>'
    }

    const Register = {
      template: `<div>
        <h1>Register 组件</h1>
        </br> 
        <router-link to="/register/teb1">tep1</router-link>   
        <router-link to="/register/teb2">tep2</router-link>
        <router-view></router-view></div>`
    }
    const Teb1 = {
      template: '<h3>teb1 组件</h3>'
    }
    const Teb2 = {
      template: '<h3>teb2 组件</h3>'
    }
    const router = new VueRouter({
      routes: [
        // { path: '/', redirect: '/user' },
        { path: '/user', component: User },
        {
          path: '/register', component: Register, children: [
            { path: '/register/teb1', component: Teb1 },
            { path: '/register/teb2', component: Teb2 }
          ]
        }
      ]
    })

    const vm = new Vue({
      el: '#app',
      data: {},
      router
    })
  </script>
</body>

</html>

路由重定向

概念：简单来说就是一打开的默认展示页面；

{path：'/',redirect:'/user'}//就是打开时，将打开/路径的跳转到'/user'路径下的；

使用场景：

var router=new VueRouter({
	routes:[
		{path:'默认路径',redirct:'跳转路径'}
	]
})

动态路由参数匹配

1.$route.params.id获取

var router=new VueRouter({
	routes:[
		{path:'默认路径/:id',component:组件名}
	]
})

const 组件名={
	template：`<div>{{$route.params.id}}</div>`
}

2.props：true；props：[‘id’]

var router=new VueRouter({
	routes:[
		{path:'默认路径/:id',component:组件名,props:true}
	]
})

const 组件名={
props:['id']
	template：`<div>{{id}}</div>`
}

3.以对象形式传参，但是不能获取id

 var router=new VueRouter({    routes:[        {path:'默认路径/:id',component:组件名,props:{name:'cui',age:'21'}}    ]})

const 组件名={
props:['name','age']
	template：`<div>{{name}}{{age}}</div>`
}

4.通过函数形式传参:解决可以接收id的

 var router=new VueRouter({    routes:[        {path:'默认路径/:id',component:组件名,props:route=>({name:'cui',age:'21'})}    ]})

const 组件名={
props:['id',name','age']
	template：`<div>{{id}}{{name}}{{age}}</div>`
}

命名路由

 var router=new VueRouter({   
 routes:[       
 	{
 		path:'默认路径/:id',
 		name：'名字'，
 		component:组件名,
 		props:{name:'cui',age:'21'}}   
     ]})

在这里插入图片描述

声明式导航和编程式导航

在这里插入图片描述

跳转路径和后退

在这里插入图片描述

cuiZero0
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue基础知识-菜鸟入门
01-03
Vue.js 是一款非常流行的前端JavaScript框架，用于构建用户界面。...通过深入理解和熟练掌握这些Vue基础知识，开发者能够构建出功能丰富、性能优秀的Web应用。不断学习和实践，是提升Vue技能的关键。
Vue基础配置讲解
10-15
Vue的基础配置是每个开发者在开始项目时必须了解的关键步骤。本文将详细讲解如何在CentOS7环境下设置Vue开发环境。 首先，你需要安装Node.js和NPM（Node Package Manager），它们是Vue运行的基石。你可以从官方网站...
vue项目中对axios进行二次封装
qq_44539570的博客
07-25 3442
在进行vue项目开发的时候，对axios进行二次封装和对api接口进行模块化的管理
详解axios在vue中的简单配置与使用
11-30
一、axios 简介 axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端，它本身具有以下特征： 从浏览器中创建 XMLHttpRequest 从 node.js 发出 http 请求 支持 Promise API 拦截请求和响应 转换请求和响应数据 取消请求 自动转换JSON数据 客户端支持防止 CSRF/XSRF 二、引入方式： npm: $ npm install axios //淘宝源 $ cnpm install axios bower: $ bower install axios cdn: <script sr
vue中axios请求接口封装
qq_47666300的博客
12-13 1901
1.基本请求接口（默认是get请求，不写method） axios({ url:'http://123.456' }).then(res =>{ console.log(res) }) 2.post请求接口 axios({ url:'http://123.456', method:"post", }).then(res =>{ console.log(res)
axios封装
Jevons的博客
09-18 478
import axios from 'axios' import qs from 'qs' axios.defaults.timeout = 5000; //响应时间 axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8'; //配置请求头 axios.defa...
Vue学习：axios
H215919719的博客
11-10 1811
​ Axios 是一个基于网络请求库，作用于node.js和浏览器中。它是的(即同一套代码可以运行在浏览器和node.js中)。在服务端它使用原生 node.jshttp模块, 而在客户端 (浏览端) 则使用 XMLHttpRequests。
Vue基础培训PPT课件.ppt
03-01
Vue基础培训，Vue基础培训课件，Vue基础培训PPT
Vue基础1
01-07
基础属性 el： 表示new的vue实例所要控制的区域。 data ： 表示new的vue实例所要控制的区域。 methds: 定义vue实例中所有的可用方法。 基础标签 v-clock：解决网速慢引起的标签显示问题， 仅仅替换自己的站位符中的...
一、vue基础语法（轻松入门vue）
01-08
Vue基础语法一、HelloWord二、MVVM设计思想三、指令1. v-cloak2. v-text3. v-html4. v-show4. v-pre5. v-once6. v-model7. v-on事件修饰符按键修饰符自定义按键修饰符8. v-bindclass样式绑定style样式绑定9. v-if、v...
axios post，get 封装，支持数据类型
weixin_34195142的博客
09-28 96
import axios from 'axios' import store from '../vuex/store' import router from '../router/index' import { stringify } from 'qs' //qs模块 // axios 配置 axios.defaults.timeout = 5000; axios.defau...
axios的用法与功能实现
12-26 2265
axios是基于promise的用于浏览器和nodejs的HTTP客户端，本身有以下特征： 从浏览器中创建XMLHttpRequest； 从nodejs发出http请求 支持promiseAPI 拦截 请求和响应 转换请求和响应数据 取消请求 自动转换JSON数据 客户端支持防止CSRF/XSRF攻击 初始化一些常用的配置项 axios.defaults.baseURL = '...
vue-cli下axios实现跨域踩的坑
GoldenLegs的博客
08-07 396
按踩坑顺序叙述。本人对http了解太少，所以坑踩得较多。  1.开始进行跨域时，知道vue2.0官方推荐axios进行ajax请求，大致看一下https://www.npmjs.com/package/axios axios的用法，感觉挺好理解嘛，封装的挺好，用时发现，不对啊。跨域设置在哪？最后找到了它 proxyTable: { '/shopping':{//此处并非一定和url一致。...
vue -- axios（axios封装，baseURL的提取）
热门推荐
qq_43955202的博客
02-05 1万+
1.网络请求模块的选取 我们在开发中一定会碰到很多的网络请求，因为前后端交互数据，基本都是从后台请求过来的，那么我们如何去选择网络请求的方式呢？ vue中发送网络请求有许多的方式，那么在开发中，我们如何选择呢？ 1.选择传统的Ajax(基于XMLHttpRequest(XHR)) 缺点:1.配置和调用的方式非常混乱 2.手写xhr可能会人为出现错误。或者封装的不够全面。 3.所以开发中...
vue请求类的封装，基于jQuery版本和Axios，两个版本
一米阳光
09-30 2818
vue中基于jQuery请求类的封装：   /** * 该插件基于JQuery的基础封装的，使用的时请自配JQuery * 使用方法:在页面import该JS文件 * XXX.post({··parameter··}).then((response) =&gt;{ success }) */ import Vue from 'vue' import store from '.....
axios请求封装
zhyaiqq123的博客
11-08 1344
https://blog.csdn.net/OBKoro1/article/details/78450040?locationNum=4&amp;fps=1
axios 的post请求,以及post和del的另一种写法
俗人世界
07-28 625
axios 的post请求,以及post和del的另一种写法
倍加福ENA58IL-R-ProfiNET手册(译文)
07-11
本手册描述了配备PROFINET接口的Pepperl+Fuchs绝对旋转编码器如何集成到PROFINET网络中。 本手册适用于以下绝对旋转编码器类型： ■■Exx58N-...PN... ■Exx58N-。。。请注意。。。 ■■ENA58IL-...B17 ■ENA58IL-。。。B17
框架完整论文答辩PPT模板 (2)
最新发布
07-11
【作品名称】：框架完整论文答辩PPT模板 (2) 【适用人群】：适用于希望学习不同技术领域的小白或进阶学习者。可作为毕设项目、课程设计、大作业、工程实训或初期项目立项。
Vue基础、vue实战
05-17
Vue是一种流行的JavaScript框架，用于构建交互式Web应用程序。它非常易于学习和使用，并且有许多强大的功能，使其成为Web开发人员的首选框架之一。 以下是Vue的基础知识： 1. 数据绑定：Vue使用双向数据绑定来实现视图和数据的同步更新。 2. 组件化：Vue允许开发人员将应用程序拆分成多个可重用的组件。 3. 指令：Vue提供了一系列指令，用于操作DOM元素的属性和事件。 4. 生命周期钩子函数：Vue提供了许多生命周期钩子函数，使开发人员能够在组件的不同阶段执行自定义逻辑。 Vue实战包括以下内容： 1. 创建一个Vue应用程序 2. 使用Vue组件化开发 3. 使用Vue指令操作DOM元素 4. 使用Vue路由实现单页应用程序 5. 使用Vue和Axios实现数据请求和响应 6. 使用Vue和Vuex实现状态管理 7. 使用Vue和Webpack实现项目构建和打包 8. 使用Vue和ElementUI实现UI组件的开发 总之，Vue是一个非常强大且易于使用的JavaScript框架，可以帮助开发人员快速构建交互式Web应用程序。Vue实战是一个非常好的学习Vue的方式，可以帮助开发人员了解如何实现实际项目中的功能。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值