catalogue
1, vue scaffold configuration agent
1, vue scaffold configuration agent
1. Method 1
In Vue config. JS to add the following configuration:
devServer:{
proxy:"http://localhost:5000"
}Description:
1. Advantages: simple configuration. When requesting resources, it can be directly sent to the front end (8080)
2. Disadvantages: you cannot configure multiple agents, and you cannot flexibly control whether requests go through agents
3. Working method: if the agent is configured according to the above, when a resource that does not exist in the front end is requested, the request will be forwarded to the server (priority is given to matching the front end resources)
2. Method 2
Write Vue config. JS configure specific proxy rules:
module.exports = {
devServer: {
proxy: {
'/api1': { //pip all path requests starting with '/ api1'
target: 'http://localhost:5000 ', / / the basic path of the proxy target
pathRewrite: { '^/api1': '' },
ws: true, //Used to support websocket
changeOrigin: true //Used to control the host value in the request header
},
'/api2': {
target: 'http://localhost:5001',
pathRewrite: { '^/api2': '' },
ws: true,
changeOrigin: true
},
}
}
}Note:
When changeOrigin is set to true, the host in the request header received by the server is: localhost:5000
When changeOrigin is set to false, the host in the request header received by the server is: localhost:8080
The default value of changeOrigin is true
explain:
1. Advantages: multiple agents can be configured, and whether to use agents can be flexibly controlled.
2. Disadvantages: the configuration is slightly cumbersome and must be prefixed when requesting resources.
2, Slot
1. effect
It allows the parent component to insert html structure into the specified location of the child component. It is also a way of communication between components. It is applicable to the parent component = = > child component
2. classification
Default slot, named slot, scope slot
3. Mode of use
1. Default slot
In parent component:
<Category>
<div>html Structure 1</div>
</Category>In subcomponents:
<template>
<!-- Define slot -->
<slot>Slot default content...</slot>
</template>2. Named slot
In parent component:
<Category>
<template slot='center'>
<div>html Structure 1</div>
</template>
<template v-slot:footer>
<div>html Structure 2</div>
</template>
</Category>In subcomponents:
<template>
<div>
<!-- Define slot -->
<slot name="center">Slot default content...</slot>
<slot name="footer">Slot default content...</slot>
</div>
</template>3. Scope slot
(1). Understanding: the data is in the component itself, but the structure generated by the data needs to be determined by the user of the component. (the games data is in the Category component, but the structure traversed by the data is determined by the App component)
(2). Specific code:
In parent component:
<Category>
<template scope="scopeData">
<!-- Generated is ul list -->
<ul>
<li v-for="g in scopeData.games" :key="g">{{g}}</li>
</ul>
</template>
</Category>
<Category>
<template scope="scopeData">
<!-- Generated is h4 label -->
<h4 v-for="g in scopeData.games" :key="g">{{g}}</h4>
</template>
</Category>In subcomponents:
<template>
<div>
<slot :games="games"></slot>
</div>
</template>
<script>
export default{
name:'Category',
props:['title'],
//The data is in the component itself
data(){
return {
games:['game1','game2','game3','game4']
}
}
}
</script>