目录
一、组件的网络请求
配置的过程:
1.在组件的原型链上配置axios工具,并配置公共网址
main.js文件中:
import axios from "axios"
Vue.prototype.$axios=axios
Vue.prototype.$axios.defaults.baseURL="http://ip:8080/api"
2.配置8080服务的代理
vue.config.js文件:
3.组件中使用:
this.$axios("/ajax1")
整个运行的流程: $axios是原型上的那个工具 就会基于它的baseURL请求"/ajax1" 因此就会请求 baseURL+"/ajax1"
然后baseURL又是8080服务器中代理配置过的 它发现网址中包含了代理的关键字网址 就会去代理请求 target网址
1）网络代理配置
Vue的脚手架webpack搭建的服务器监听的：8080
egg提供的服务器主要提供数据监听的端口：7001
用户运行：http://192.168.1.11:8080
==>加载了8080服务器提供的打包后的页面
AJAX请求 ：http://192.168.1.11:8001/AJAX1
APP.vue
<template>
<div>
<Nav1></Nav1>
<!-- mounted执行完之后，才运行这里的标签，就会取到undefine.title,就会报错，解决方法是data返回一个空的对象 -->
<div>
{{obj.title}}----{{obj.info}}
</div>
</div>
</template>
<script>
import Nav1 from "@/componnets/Nav1.vue"
// import axios from "axios"//去node_modules中找到的axios文件夹中
export default {
data() {
return {
obj:{}
}
},
components:{
Nav1
},
async mounted() {
// let res=await axios("http://192.168.101.109:7001/ajax1")
let res=await axios("http://192.168.101.109:8080/xiangmu/ajax1")
// let res=await axios("/xiangmu/ajax1")
//==>实际请求的是:http://192.168.101.109:8080/xiangmu/ajax1
//==>希望8080服务器帮我们代理 请求:http://192.168.101.109:7001/ajax1
console.log(res.data)
this.obj=res.data
}
}
</script>
<style>
</style>
Nav1.vue
<template>
<div class="nav1">
<button>按钮</button>
<button>按钮</button>
</div>
</template>
<script>
export default {
mounted() {
}
}
</script>
<style scoped="scoped">
.nav1{
background-color: aliceblue;
min-height: 40px;
}
.nav1 button{
min-height: 40px;
}
</style>
1、设置跨域在config.default.js里面
config.cors={origin:"*"}
2、代理服务器：
vue.config.js
const {
defineConfig
} = require('@vue/cli-service')
module.exports = defineConfig({
transpileDependencies: true,
lintOnSave: false, //关闭eslint的严格模式检测,
devServer: {
port: 8080, //默认vue脚手架配置就8080
//代理配置,这里只是配置,不用写代理服务器的代码(配置好了它帮我们实现)
// proxy: {
// '/api': 'http://localhost:7001',
// },
proxy: {
'/xiangmu': {
target: 'http://192.168.101.109:7001',
secure: true, //如果代理的target是https接口,需要配置它
pathRewrite: {
'^/xiangmu': '/' //就是将xiangmu替换为 /
},
//请求时重写pathname:
//项目组件中请求的是http://192.168.101.109:8080/xiangmu/ajax1
//8080服务器就会帮我们代理请求 http://192.168.101.109:7001/ajax1
//项目组件中请求的是http://192.168.101.109:8080/test/ajax1 那么proxy就检测不到 就不会做代理
},
},
}
})
2）网络公共路径
main.js
import Vue from 'vue'
import App from './App.vue'
import axios from "axios"
//组件的原型属性
Vue.prototype.age=23
//以后上线了就只用改这一行代码
axios.defaults.baseURL="http://192.168.101.109:8080/xiangmu"
//配置公共url 如果这个axios去请求 "ajax1" 它实际的网址是http://192.168.101.109:8080/xiangmu/ajax1
Vue.prototype.$axios=axios
//把它放在了axios，就不用import引入了 就可以直接在APP.vue里面使用this.$axios
var vm=new Vue({
render: h => h(App),
}).$mount('#app')
console.log(vm)APP..vue
<template>
<div>
<Nav1></Nav1>
<div>
</div>
</div>
</template>
<script>
import Nav1 from "@/componnets/Nav1.vue"
export default {
data() {
return {
obj:{}
}
},
components:{
Nav1
},
async mounted() {
// console.log(this.age)
// let res=await this.$axios("http://192.168.101.109:8080/xiangmu/ajax1")
let res=await this.$axios("ajax1")//==>基于baseurl:"http://192.168.101.109:8080/xiangmu/ajax1"
console.log(res,6666)
}
}
</script>
<style>
</style>
vue.config.js ==>配置8080服务的代理
const {
defineConfig
} = require('@vue/cli-service')
module.exports = defineConfig({
transpileDependencies: true,
lintOnSave: false, //关闭eslint的严格模式检测,
devServer: {
port: 8080, //默认vue脚手架配置就8080
//代理配置,这里只是配置,不用写代理服务器的代码(配置好了它帮我们实现)
// proxy: {
// '/api': 'http://localhost:7001',
// },
proxy: {
'/xiangmu': {
target: 'http://192.168.101.109:7001',
secure: true, //如果代理的target是https接口,需要配置它
pathRewrite: {
'^/xiangmu': '/'
},
//请求时重写pathname:
//项目组件中请求的是http://192.168.101.109:8080/xiangmu/ajax1
//8080服务器就会帮我们代理请求 http://192.168.101.109:7001/ajax1
//项目组件中请求的是http://192.168.101.109:8080/test/ajax1 那么proxy就检测不到 就不会做代理
},
'/sina': {
target: 'http://某个公司的网址',
secure: true, //如果代理的target是https接口,需要配置它
pathRewrite: {
'^/sina': '/aaa'
},
},
},
}
})
Nav1.vue
<template>
<div class="nav1">
<button>按钮</button>
</div>
</template>
<script>
export default {
mounted() {
console.log(this.age,111111111,this)
}
}
</script>
<style scoped="scoped">
.nav1{
background-color: aliceblue;
min-height: 40px;
}
.nav1 button{
min-height: 40px;
}
</style>
二、组件的Scss
方法一：自己创建一个scss文件，然后通过插件编译为css文件，然后在main.js中引入
==> 此方法一般不使用，因为这样引进来的scss是全局的
方法二：在style里面写，并且有作用域
配置：小黑窗==>vue create init （选择帮我们配置sass的加载器）
选更多选项，选择css Pre-processors==>2.0==>选sass==>lint on save ，然后就一直敲回车
APP.vue : ==><style lang="scss"> </style>
<template>
<div id="app">
<div class="box">
<h1>6666</h1>
</div>
</div>
</template>
<script>
export default {
components: {},
};
</script>
<style lang="scss">
.box {
width: 200px;
height: 200px;
background-color: hotpink;
h1 {
color: red;
}
&:hover h1 {
color: bisque;
}
}
</style>
三、单向数据流
父组件改了，可以改子组件，如果子组件改了，父组件是不会改的，因为数据是往下流的
==> 单向数据流：数据自向上，由底层流向顶层，但是不能反向
APP.vue
<template>
<div id="app">
<!-- 父组件 -->
<p>app-----{{msg}}</p>
<button @click="change2">app组件修改msg</button>
<!-- 子组件 -->
<Box v-bind:title="msg"></Box>
</div>
</template>
<script>
import Box from "./Box.vue"
export default {
data() {
return {
msg: "app的数据"
}
},
components: {
Box
},
methods:{
change2(){
this.msg="app修改了this的msg数据"
}
}
}
</script>
<style scoped="scoped" lang="scss">
.box {
width: 200px;
height: 200px;
background-color: hotpink;
h1 {
color: red;
}
&:hover h1 {
color: bisque;
}
}
#app{
background-color: honeydew;
height: 400px;
}
</style>
Box.vue
<template>
<div class="box">
<p>{{arr[0]}}</p>
<button @click="change1">change</button>
</div>
</template>
<script>
export default {
data() {
console.log(66666661)
return {arr:[100,200,300]}
},
// data:{arr:[100,200,300]},
methods:{
change1(){
this.title="把this的title改了"
this.$set(this.arr,0,80)
}
},
filters:{},
watch:{},
directives:{},
computed:{},
mounted() {
}
}
</script>
<style scoped="scoped">
.box{
background-color: darkcyan;
margin: 10px;
min-height: 200px;
}
</style>
四、组件的注意点
1、组件的认识：
组件时可以复用的，把组件当作一种标签使用，用一次，它内部的代码聚会完整的执行一次，就像时一个函数一样，使用组件就相当于在调用函数，实参就相当于组件的属性传值
开发的时候，数据尽量不要放在data中，数据驱动页面，要这个数据未来有可能发生变化，才放在data中。
2、项目的资源打包问题
项目中的本地资源打包时，webpack打包时遇到了import或者时标签内部直接写路径时，都会启用file-loader等去加载资源，如果把图片等本地资源的路径写在data中，然后页面使用，因为webpack不会读取data所以不会打包资源
把图片路径、网址写在data里面，webpack不会打包
项目中的资源一般不用本地路径，应该托管起来
引入文件的资源：import
3、波浪线
1、v-for下面有红色的波浪线
v-for不写key会有警告，即红色波浪线，可以不管它，不会影响项目
==> 绑定key，如果数据中没有id，就绑for循环的下标index==>：key="index"就可以了
2、div等标签下面有波浪线，小黑窗报错了
==>将webpack中配置的vue.config.js里面的eslint严格模式关了==>lintOnSave:false
3、在编辑器内部还有波浪线
==>就把vscode的插件禁用，安装其它的插件（记得重启编辑器，退出）