文章目录
计算属性
通过一系列运算后得到一个属性值，这个动态计算出来的属性值可以被模板结构或methods方法使用。
计算属性的语法和特点
- 所有的计算属性都要定义到在
computed节点下 - 计算属性在定义的时候要定义为方法格式
- 计算属性依赖的数据源发生变化，计算属性值也会发生变化
<div id="app">
r:<input type="text" v-model.number="r"><br>
g:<input type="text" v-model.number="g"><br>
b:<input type="text" v-model.number="b"><br><hr>
<div :style="{backgroundColor:rgb}" style="height: 150px;width: 150px;">
{{rgb}}
</div>
</div>
<script src="./lib/vue.js"></script>
<script>
const vm = new Vue ({
el: "#app",
data:{
r:0,
g:0,
b:0
},
computed:{
//返回一个拼接好的rgb格式的字符串
rgb(){
// 反引号表示模板字符串
return `rgb(${this.r},${this.g},${this.b})`
}
}
})
</script>
axios
axios是一个专注于数据请求的库
- axios.js下载
链接：https://pan.baidu.com/s/1SyH1tTDEevlezrlHKazmFA
提取码：1234
- 其他方式：https://www.jianshu.com/p/df464b26ae58
基本语法
axios({
method:"请求类型",
url:"请求的URL地址",
//url中的查询参数
params:{},//get传参
data:{}//post传参
}).then(result)=>{
//.then用来指定请求成功之后的回调函数
//形参中的result是请求成功之后的结果
}
- 调用axios方法得到的返回值是promise对象——axios在请求到数据之后，套了一层壳
{
config:{},
data:{真实的数据},
headers:{},
request:{},
status:xxx,
statusText:""
}
- 如果调用某个方法的返回值是Promise实例，则前面可以添加
await，await只能用在被async修饰的方法中，如果不加await/async的话，则返回的是一个promise对象。
| 没有使用asyn/await | 使用asyn |
|---|---|
 |  |
3. 使用解构赋值
上一段代码中我们获得的result对象中，只有data部分是我们所需要的内容，那么我们是否可以只要data这部分呢？使用解构是很容易实现的。
<script>
const vm = new Vue({
el:"#app",
methods:{
async btnPost(){
const {data} = await axios({
method:"POST",
url:"http://www.liulongbin.top:3006/api/post",
data:{
name:"zs",
age:20
}
})
console.log(data)
}
}
})
</script>
4. axios的标准用法
- 调用axios之后，使用async/await进行简化
- 使用解构赋值，从axios封装的大对象中，把data属性解构出来
- 把解构出来的data属性，使用冒号进行重命名，一般都重命名为 { data : res}
axios.get和axios.post发起请求
通过上面的学习，我们了解了基本的数据请求的语法，我们也可以进行简化，使用axios.get和axios.post来发起请求，以Post为例
<div id="app">
<button id="btn" @click="btnPost" >POST</button>
</div>
<script src="../lib/vue.js"></script>
<script>
const vm = new Vue({
el:"#app",
methods:{
async btnPost(){
const {data : res } = await axios.post("http://www.liulongbin.top:3006/api/post",{name:"zs",age:20})
console.log("Post方法：",res)
}
}
})
</script>
