Vue中的ajax------插槽、vuex插件

最新推荐文章于 2024-06-19 23:24:07 发布
最新推荐文章于 2024-06-19 23:24:07 发布
阅读量180 收藏
点赞数
文章标签： vue.js ajax 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Sakura_0413/article/details/132057293
版权

Vue中的ajax

解决开发环境Ajax跨域问题

当你想在端口号为8080的主机上访问端口号为5000中的数据时，就会发生问题。

在这里插入图片描述如何解决跨域问题：
在这里插入图片描述
代理服务器：
此时需要使用一个代理服务器，让代理服务器端口号也为8080，让它去访问5000中的数据并且拿到数据。然后再转发回给8080。两台服务器直接使用的是http请求。而红色的8080是浏览器，使用的是前端技术，才会产生跨域问题。
在这里插入图片描述
在这里插入图片描述

配置代理服务器

在这里插入图片描述

在这里插入图片描述

github用户搜索案例

vue-resource插件

在这里插入图片描述

插槽

在这里插入图片描述
在这里插入图片描述
可以使一组数据用不同的形式来展示
在这里插入图片描述

vuex插件

vuex是什么

在这里插入图片描述

何时使用vuex

1、多个组件依赖于同一状态
2、来自不同组件的行为需要变更同一状态
实际上就是共享
在这里插入图片描述

vuex原理图

在这里插入图片描述
actions、mutations、state都是对象形式。

在这里插入图片描述
1、安装：使用vue2时只能使用vuex3版本；使用vue3时只能使用vuex4版本；
安装时指定版本即可：如npm i vuex@3
2、引入并使用：插件的使用：use()。在src文件夹中新建一个store文件夹（用于创建vuex中最为核心的store），其中新建一个index.js文件（将store中的actions、mutations、state进行定义）。

vuex环境的搭建

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

getters的使用（store的配置项）

在这里插入图片描述

四个map方法的使用

在这里插入图片描述
在这里插入图片描述

模块化+命名空间

在这里插入图片描述
在这里插入图片描述

Sakura_0413
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
前端框架-Vue
AyinMars的博客
03-25 6172
Vue Vue 的核心库只关注视图层，方便与第三方库或既有项目整合。 HTML + CSS + JS : 视图 ： 给用户看，刷新后台给的数据 网络通信 ： axios 页面跳转 ： vue-router 状态管理：vuex Vue-UI : ICE , Element UI 1 前端核心分析 1、VUE 概述 Vue (读音/vju/, 类似于view)是一套用于构建用户界面的渐进式框架，发布于2014年2月。 与其它大型框架不同的是，Vue被设计为可以自底向上逐层应用。Vue的核心库
Vue2---
Koite的博客
03-23 1408
Vue2 简介 一套用于构建用户界面的渐进式js框架 特点 1、采用组件化模式，提高代码复用率、且让代码更好维护 2、声明式编码，让编码人员无需直接操作DOM，提高开发效率 3、使用虚拟DOM+优秀算法Diff算法，尽量复用DOM节点 安装 官网：Vue.js 学习——教程——安装——用<script>引入——选择开发版或生产版 使用前准备 <script src="../../Vue/vue.js"> 将文件引入后打开浏览器测试，f12中会出现两个提示
系统性学习vue-vue中的ajax
qq_39685400的博客
01-12 1274
public目录下的内容会被代理服务器纳为己用，而当我们的请求代理服务器可以自己回答时，就不会再将请求转发给后端（是不是挡板？让父组件可以向子组件指定位置插入html结构，也是一种组件间通信的方式，适用于父组件===>子组件。： 插槽内容的样式可以写在子组件里，也可以写在使用者上。同源策略是规定了三个东西必须一致：协议名，主机名，端口号。而请求中的地址也要改为代理服务器地址，但要带着请求信息。需要加个配置，将转发的请求按规则重写。目前不常使用了，因为不咋维护了。请求是成功的 但是请求资源是。
vue-router路由
轻松玩编程
01-27 193
在这个世界上取得成就的人，都努力去寻找他们想要的机会，如果找不到机会，他们便自己创造机会。 你好，我是梦阳辰！期待与你相遇！ 01.什么是路由？ 说起路由你想起了什么? 路由是一个网络工程里面的术语。 路由( routing )就是通过互联的网络把信息从源地址传输到目的地址的活动.—维基百科 在生活中,我们有没有听说过路由的概念呢? 当然了,路由器嘛.路由器是做什么的?你有想过吗? 路由器提供了两种机制: 路由和转送. √路由是决定数据包从来源到目的地的路径. √转送将输入端的数据转移到合适的输出端. .
Vue中的ajax、vuex、UI组件库及vue-router
weixin_41929941的博客
04-29 273
vue脚手架配置代理 方法一 ​ 在vue.config.js中添加如下配置： devServer:{ proxy:"http://localhost:5000" } 说明： 优点：配置简单，请求资源时直接发给前端（8080）即可。 缺点：不能配置多个代理，不能灵活的控制请求是否走代理。 工作方式：若按照上述配置代理，当请求了前端不存在的资源时，那么该请求会转发给服务器 （优先匹配前端资源） 方法二 ​ 编写vue.config.js配置具体代理规则： module.exports = { de
Vue、Vuex、Vue-Router 面试题大全
萌萌哒的瑞萌萌的博客
12-17 6035
Vue面试题 Vue 1.请详细说下你对 vue 生命周期的理解？ 总共分为 8 个阶段创建前 / 后，载入前 / 后，更新前 / 后，销毁前 / 后。 创建前 / 后： 在 beforeCreate 阶段，vue 实例的挂载元素 el 和数据对象 data 都为 undefined，还未初始化。在 created 阶段，vue 实例的数据对象 data 有了，el 为 undefined，还未初始化。 载入前 / 后：在 beforeMount 阶段，vue 实例的 $el 和 data 都初始化了
UNi-APP
weixin_59163379的博客
09-03 4049
正在上传…重新上传取消注意：当我们一个代码， 需要在其他地方一起引用的时候， 我们可以用到 Mixins此时可以使用 Vue 提供的mixins特性，提高代码的可维护性。在项目根目录中新建mixins文件夹，并在mixins文件夹之下新建文件，用来把设置 tabBar 徽标的代码封装为一个 mixin 文件：// 导出一个 mixin 对象},// 在页面刚展示的时候，设置数字徽标},// 调用 uni.setTabBarBadge() 方法，为购物车设置右上角的徽标。
VUE初始--学习笔记
qq_55113068的博客
01-18 1843
记录一点杂七杂八的学习笔记，初学时写的 ，暂时就不分类了。杂七杂八往这堆堆。其实也能算是js笔记。 1.【props】： 道具，用来接收父组件中的数据，其值为数组（即从父元素传给子元素） 举例子：props:[‘name’] //接收父组件中的name 注意，props是从上到下的单向数据传递，反之则不行 【注意-驼峰命名法】使用驼峰命名法时，要记得转化字符间的-。 简单例子：isName会自动转换成is-name，如果直接使用isName，会报错显示未定义。 在这个案例中的例子： props:[‘s.
前端学习--Vue部分中
AGW.的博客
01-12 881
主要介绍vue中的ajax、插槽、vuex等内容。本文是根据尚硅谷天禹老师vue课程，如果有不理解的地方请移步到B站查找并观看相应课程。
vue-vuex-starter-kit:开始使用Axios，Vue2，Vuex2和Vue-router2。 使用webpack构建应用
05-02
vue-vuex入门套件开始使用Vue，Vuex和Vue-router。 使用webpack构建应用。快速开始确保您的节点版本> = 6.0，NPM> = 3 # Clone project code git clone ...
vue-print-nb 兼容低版本浏览器
11-28
vue-print-nb 兼容低版本浏览器 import Print from '@/lib/vue-print-nb/print.umd.min'Vue.use(Print)
vue-cli-plugin-modular-vuex:为Vue CLI 3插件创建模块化Vuex存储
05-19
vue-cli-plugin-模块化vuex 为创建模块化Vuex存储 安装 如果尚未安装vue-cli 3，请先按照此处的安装说明进行操作： : 提示：如果由于仍然需要vue init而不想覆盖当前的vue-cli，请。 使用vue-cli 3.0生成项目 ...
m-message:vue的消息插件
05-11
import Message from 'vue-m-message' import 'vue-m-message/dist/index.css' Vue . use ( Message ) // will mount `Vue.prototype.$message` // or Vue . use ( Message , { name : 'msg' } ) // will mount `Vue...
vue-devtools-5.1.1
12-29
google的vue插件
Vue3使用provide和inject实现孙组件给爷组件传递数据
最新发布
gurenchang的博客
06-19 361
Vue3使用provide和inject实现孙组件给爷组件传递数据
Vue + SpringBoot 实现文件的断点上传、秒传，存储到Minio
m0_73179389的博客
06-19 397
前端页面使用的elment-plus的el-upload组件。当上传文件后，会调用handleChange 方法，可以在这里进行文件相关的操作。计算文件的MD5值。
JS面试题第一章
2301_79858637的博客
06-19 91
undefined表示的是无的原始值。但是null表示的是无 对象 0。
vue面试题汇总之响应式理解
fyw1789的博客
06-12 432
vue在全局中写了一个用来运行函数的函数,有一个全局变量保存当前运行的是哪个函数,这样在getter的时候只要检查这个全局变量就知道是哪个函数在使用这个变量了,vue还建立了一个对映关系表当setter的时候把对映表中的函数重新运行一遍。vue2使用Object.defineProperty进行数据代理(getter和setter),vue3使用Proxy进行数据代理。会把函数放入异步队列,同一个渲染函数只会存在一个,这样就不会多次渲染造成效率问题。,当需要派发更新的时候不会立即运行函数,而是交给。
vue2 vue-seamless-scroll插件使用
06-04
Vue2是一款流行的JavaScript框架，用于构建可重用的用户界面组件。它与其他框架（如React和Angular）相似，但具有其自己的独特特点。 Vue-seamless-scroll是一款Vue.js的轮播滚动插件，它支持无缝轮播，并且非常易于使用。 以下是vue-seamless-scroll的使用步骤： 1.安装vue-seamless-scroll 可以使用npm或yarn来安装： ``` npm install vue-seamless-scroll ``` 或者 ``` yarn add vue-seamless-scroll ``` 2.导入vue-seamless-scroll 可以在Vue组件中导入vue-seamless-scroll： ``` import VueSeamlessScroll from 'vue-seamless-scroll' ``` 3.使用vue-seamless-scroll 在Vue组件中使用vue-seamless-scroll： ``` <template> <vue-seamless-scroll> <ul> <li v-for="(item, index) in items" :key="index">{{ item }}</li> </ul> </vue-seamless-scroll> </template> <script> import VueSeamlessScroll from 'vue-seamless-scroll' export default { components: { VueSeamlessScroll }, data () { return { items: ['Item 1', 'Item 2', 'Item 3', 'Item 4', 'Item 5'] } } } </script> ``` 以上就是使用vue-seamless-scroll的基本步骤。需要注意的是，vue-seamless-scroll还有许多其他的配置选项，例如自定义动画、调整滚动速度等等，如果您有兴趣可以查看它的官方文档。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值