比较简单，简单记一下
文章目录
- 一、axios
-
- [1.1 在线引入](#1.1 在线引入)
- [1.2 get请求](#1.2 get请求)
- [1.3 post请求](#1.3 post请求)
- 二、computed计算属性
- 三、过滤器filters
- 四、监听器watch
一、axios
这东西是异步请求，但是更简单，别人帮我们写好的Ajax
1.1 在线引入
html
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>1.2 get请求
javascript
axios.get("https://api.oioweb.cn/api/SimpWords?key1=value1&key2=value2").then(
function (response){
},
function(error){
}
)1.3 post请求
javascript
axios.post("https://api.oioweb.cn/api/SimpWords",{key1:value1,key2:value2}).then(
function (response){
},
function(error){
}
)二、computed计算属性
和函数写法差不多，但是计算属性的结果会缓存起来。调用的时候也不用带（）
javascript
methods:{
getDate1 : function(){
alert(123);
}
},
computed:{
getDate2 : function(){
alert(456);
}
}
javascript
<div id="div">
{{getDate1()}} <br>
{{getDate1()}} <br>
{{getDate2}} <br>
{{getDate2}} <br>
</div>三、过滤器filters
对经过过滤器的数据进行加工
javascript
data:{
price1:123,
price2:23,
price3:13,
price4:1234,
},
filters:{
addIcon(price){
return "$"+price;
}
}
html
<div id="div">
{{price1 | addIcon}} <br>
{{price2 | addIcon}} <br>
{{price3 | addIcon}} <br>
{{price4}} <br>
</div>四、监听器watch
用来观察Vue实例上的数据变动
javascript
new Vue({
el: '#app',
data: {
firstName: 'John',
lastName: 'Doe',
fullName: ''
},
watch: {
firstName: function (newVal, oldVal) {
this.fullName = newVal + ' ' + this.lastName;
},
lastName: function (newVal, oldVal) {
this.fullName = this.firstName + ' ' + newVal;
}
}
})就这吧......