Vue学习笔记（二）：axios、computed计算属性、filters过滤器、watch监听器

无所不能的idiot2024-03-19 10:41

比较简单，简单记一下

文章目录

一、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;  
    }  
  }  
})

就这吧......