axios(config)
axios.request(config)
axios.get(url[, config])
axios.delete(url[, config])
axios.head(url[, config])
axios.post(url[data[, config]])
axios.put(url[data[, config]])
axios.patch(url[data[, config]])axios.defaults.baseURL = 'http://httpbin.org/'
axios.defaults.timeout = '10'前面使用的axios实例是全局的axios实例，在实际生产环境中可能会有不同类型的网络请求需求，因此需多个axios实例进行处理。
//创建实例
const instance1 = axios.create({
baseURL: 'http://httpbin.org',
timeout: 5000
})
//使用实例
instance1({
url: 'get'
}).then(data => {
})拦截器一共四类
instance.interceptors.request.use(
config => {
//请求拦截的作用
//1. 修改config中的一些配置信息
//2. 发送请求时在界面中显示图标
//3. 某些网络请求（如登录），需添加特殊信息
return config
}, err => {
}
)
instance.interceptors.response.use(
res=> {
return res.data;
}, err => {
}
)Info
Vue 构建的时候分为两种类型
<div id="app">
<h2 v-once>{{message}}</h2>
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
const app = Vue.createApp({
data() {
return {
message: "Hello World!"
}
}
})
app.mount('#app')
</script><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="../js/vue.js"></script>
</head>
<body>
<div id="app">
<h2> {{firstName + " " + lastName}}</h2>
<h2> {{firstName}} {{lastName}}</h2>
<h2> {{ getName() }}</h2>
<h2> {{ fullName }}</h2>
<h2> 总价格: {{total_price}}</h2>
</div>
<script>
const app = new Vue({
el: '#app',
data: {
firstName: 'xxxx',
lastName: 'aaaa',
books: [
{id: 110, name: 'Unix', price: 119},
{id: 111, name: 'Unix深入理解', price: 105},
{id: 112, name: '操作系统', price: 112},
{id: 113, name: '代码大全', price: 113},
]
},
methods: {
getName: function(){
return this.firstName + " " + this.lastName
}
},
computed: {
fullName: {
//normally the function of setter is not needed
set: function(newValue){
console.log(newValue)
},
get: function(){
return this.firstName + " " + this.lastName
}
},
total_price: function(){
let ret = 0;
for(let book of this.books){
ret += book.price;
}
return ret;
}
}
})
</script>
</body>
</html>Vue允许用户定义过滤器用于同样字符串格式化，过滤器可用于mustache语法和v-bind(2.1.0或更高版本)表达式中，过滤器通过管道符添加至JavaScript表达式后。
<!-- in mustaches -->
{{ message | capitalize }}
<!-- in v-bind -->
<div v-bind:id="rawId | formatId"></div>