单文件组 全局/局部组件 data scoped 组件样式编写（sass） created异步请求（fetch/axios）正向/反向代理

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

单文件组件

在这里插入图片描述
为什么会解析以.vue为后缀名的单文件文件呢
因为内部安装了vue-loader插件

全局组件的注册

在这里插入图片描述
Vue是原生模块，是在node-modules里的，所以不用加路径，HelloWorld是自定义模块，需要加路径

局部组件注册

在这里插入图片描述

data

在这里插入图片描述
为什么是函数返回对象的形式呢？
为了让每一个组件返回一份对象的独立的拷贝

scoped

父组件
在这里插入图片描述
子组件加上scoped
在这里插入图片描述
在这里插入图片描述

同样为了组件样式更方便编写引用sass

在这里插入图片描述

在这里插入图片描述
scoped同样具有穿透功能
在这里插入图片描述
如果是普通的css样式采用<<<就行
在这里插入图片描述

可以配置别名alias

在这里插入图片描述
在这里插入图片描述
别忘了，配置更改，yarn serve

created异步数据请求（fetch）

在这里插入图片描述

axios进行异步请求

1.yarn add axios 安装

在这里插入图片描述
2.引入axios
两种方式就可以
在这里插入图片描述

在这里插入图片描述
以上这些请求，他们已经做了后端处理，并不需要跨域
处理跨域可以通过正向代理，反向代理的方式处理

正向代理

在这里插入图片描述
在这里插入图片描述
正向代理流程图
在这里插入图片描述

反向代理

在这里插入图片描述

Allen·赵
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
Vue单文件组件data使用函数的原因
qq_53784360的博客
08-26 277
如果不使用函数（点击查看官网介绍） 因为在普通写法写的是一个对象，是个引用数据类型，如果用单文件组件开发的时候，每个组件的数据应当是独立的，如果公用一个对象的话，在一个文件里修改数据，其他使用该组件页面也会跟着有变化，所以采用闭包的形式返回私有对象来使用（在Vue内部，会把每一个实例对象data调用之后返回值赋给实例身上的data，因为每个data内部返回的数据都为一个独立的对象，所以在每次通过闭包的形式访问data会形成独立的空间去存放） 第一步 function Component() {} Co
fetch 如何请求常见数据格式
weixin_34362991的博客
06-11 479
一 序言 在 传统Ajax 时代，进行 API 等网络请求都是通过XMLHttpRequest或者封装后的框架进行网络请求,然而配置和调用方式非常混乱，对于刚入门的新手并不友好。今天我们介绍的Fetch提供了一个更好的替代方法，它不仅提供了一种简单，合乎逻辑的方式来跨网络异步获取资源，而且可以很容易地被其他技术使用，例如 Service Workers。 二 与Ajax对比 使用Ajax请求一...
单文件组件之data属性
weixin_34341229的博客
05-14 250
2019独角兽企业重金招聘Python工程师标准>>> ...
axios的详细用法以及后端接口代理
weixin_30474613的博客
06-09 150
安装 使用 npm: $ npm install axios 或者 使用 bower: $ bower install axios 或者直接使用 cdn: <script src="https://unpkg.com/axios/dist/axios.min.js"></script> main.js设置如下 引...
vue中的scoped有坑
weixin_34034670的博客
05-27 123
在vue组件中我们我们经常需要给style添加scoped来使得当前样式只作用于当前组件的节点。添加scoped之后，实际上vue在背后做的工作是将当前组件的节点添加一个像data-v-1233这样唯一属性的标识，当然也会给当前style的所有样式添加[data-v-1233]这样的话，就可以使得当前样式只作用于当前组件的节点。但是我们需要注意的是如果我们添加了子组件，同样的，如果子组件也用sco...
vue_web_ware:vue一些组件、方法、模板、样式
05-15
4. **Vue样式**：Vue允许我们在组件内管理样式，可以使用行内样式、类名绑定或使用CSS预处理器（如Sass或Less）。在`<style>`标签中，我们可以看到如何使用 scoped 属性来限制样式的应用范围，确保组件样式不会影响...
vue分页文件
10-27
Vue项目中通常会使用预处理器（如Sass、Less），或者直接使用CSS，配合Vue的 scoped 属性来限制样式的作用域。 7. **优化**：考虑到性能，我们可能需要添加一些优化措施，如懒加载、虚拟滚动或使用`keep-alive`组件...
利用vue.js 完成的学生选导师系统源码.zip
10-27
在样式方面，Vue.js项目通常会结合使用CSS预处理器如Sass或Less，提供更强大的样式编写能力。同时，为了保持组件的可复用性，CSS会被封装在每个组件内，或者使用 scoped 属性限制其作用域。 总的来说，这个基于Vue....
VUE + nodejs实战
最新发布
06-09
- ** scoped样式**：Vue.js支持在组件内使用`scoped`属性，实现CSS作用域隔离，避免全局样式污染。 - **Vue的样式绑定**：使用`v-bind:class`和`v-bind:style`动态绑定CSS类和样式。 - **CSS模块化**：通过CSS ...
Vue-apps:使用Vue JS构建的应用程序列表
04-11
9. 样式处理：虽然标签中提到的是CSS，Vue应用可以使用CSS、Sass、Less等预处理器进行样式编写，结合Vue的 scoped 属性可以实现组件样式隔离。 10. 测试与部署：使用Jest、Mocha等工具进行单元测试和集成测试，完成...
同源策略产生介绍及解决跨域最常见的三种方式(JSONP+CORS+反向服务器代理)，用详细的前后端分离代码带你搞懂跨域原理
izl040905的博客
11-13 775
跨域其实就是用AJAX进行请求数据时会遇到的访问问题，浏览器会给你报错，Fetch也是有这样的问题。这时候你可能会问，为什么在script标签中引用了别的源却不会出现这样的问题呢？这种情况相信写过JS代码的都知道吧。这是因为JS设计人员当初在设计标签的时候就允许了在别的源请求脚本，所以就有很聪明的开发前辈利用这个 “ 漏洞 ” 进行跨域，这个方法便是JSONP。
vue项目中axios配置（代理配置）
StevenYanghahha的博客
09-09 5015
在api文件夹下新建ajax.js和index.js文件。ajax.js用于配置通用的axios接口方法。index.js 用于开发从接口获取数据方法。在src根目录下新建api文件夹。在vue.config.js中。二、建立axios文件夹。三、配置代理（实现跨域）一、引入axios包。
axios 代理
zhan_lijian的博客
12-29 4533
首先是引入 axios  npm i --save axios  服务这么多当然要封装啦 跨域 就是要通过 proxy 代理成自己的服务 // request.js import axios from 'axios' import store from '@/store' let instance = axios.create({ baseURL: store.state.bas...
axios 跨域代理
weixin_30432579的博客
07-18 410
https://blog.csdn.net/z858466/article/details/79027844 转载于:https://www.cnblogs.com/liaolongfei/p/11209398.html
vue+axios 配置反向代理解决跨域问题
Lee的博客
12-01 5990
首先配置config下的index.js dev: { // Paths assetsSubDirectory: 'static', autoOpenBrowser: false, assetsPublicPath: '/', proxyTable: { // 在这里配置如下代码 '/api': { target:...
axios 详细使用方法 及跨域请求（反向代理）的处理
庆安的博客
04-24 743
安装axios 使用 npm npm install axios 使用 bower bower install axios 或者直接使用 cdn <script src="https://unpkg.com/axios/dist/axios.min.js"></script> main.js设置如下 axios.post('/user', { ...
vue通过反向代理设置解决http跨域请求问题
weixin_41855143的博客
09-17 4217
&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;在没有接触到反向代理之前，常常通过服务器端设置允许跨域的方式来解决跨域问题，这在生产环境容易发生安全问题。最近通过项目了解到反向代理这个方法来解决跨域问题。 反向代理的概念： 反向代理（Reverse Proxy）实际运行方式是指以代理服务器来接受internet上的连接请求，然后将请求转发给内部
fetch API的实际用法对比
小狮狮的博客
09-09 1575
原文： fetch 没有你想象的那么美 前端工程中发送 HTTP 请求从来都不是一件容易的事，前有骇人的 ActiveXObject，后有 API 设计十分别扭的 XMLHttpRequest，甚至这些原生 API 的用法至今仍是很多大公司前端校招的考点之一。 也正是如此，fetch 的出现在前端圈子里一石激起了千层浪，大家欢呼雀跃弹冠相庆恨不得...
在Vue中 使用sass，配置scss全局函数、变量，配合 vw vh 做移动端自适应布局
沐枫
09-06 6612
前言 以前做移动端项目布局都是rem来做的，但rem需要在页面中引入js，根据设备的宽度来修改根节点<html>标签的font-size样式属性（相对长度单位。相对于根元素(即html元素)font-size计算值的倍数）才能配使用！ rem单位 js代码： (function(doc, win) { var docEl = doc.documentElement, r...
style: ` <style scoped> h1 { color: red; } </style> `组件样式不生效
06-01
可能是因为你使用了 `scoped` 属性，它会将样式限制在组件范围内，如果你在组件内部使用了 `h1` 标签并且在组件外部没有定义，那么样式会生效。如果你想要在组件外部定义样式，可以考虑将 `scoped` 属性去掉。另外，...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值