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

���较简单，简单记一下

文章目录

• 一、axios
• • 1.1 在线引入
  • 1.2 get请求
  • 1.3 post请求
  • 二、computed计算属性
  • 三、过滤器filters
  • 四、监听器watch

    ---

    一、axios

    这东西是异步请求，但是更简单，别人帮我们写好的Ajax

    1.1 在线引入

    1.2 get请求

    axios.get("https://api.oioweb.cn/api/SimpWords?key1=value1&key2=value2").then(
                        function (response){
                              
                         },
                          function(error){
                         }
                    )
    

    1.3 post请求

    axios.post("https://api.oioweb.cn/api/SimpWords",{key1:value1,key2:value2}).then(
                        function (response){
                              
                         },
                          function(error){
                         }
                    )
    

    二、computed计算属性

    和函数写法差不多，但是计算属性的结果会缓存起来。调用的时候也不用带（）

    
    （）

    methods:{
    	getDate1 : function(){
    		alert(123);
    		}
    	},
    computed:{
    	getDate2 : function(){
    		alert(456);
            }
        }
    

    
    	{{getDate1()}} 
    
        {{getDate1()}} 
    
    	{{getDate2}} 
    
        {{getDate2}} 
    
    

    三、过滤器filters

    对经过过滤器的数据进行加工

            data:{
                price1:123,
                price2:23,
                price3:13,
                price4:1234,
            },
            filters:{
                addIcon(price){
                    return "$"+price;
                }
            }
    

        
    
            {{price1 | addIcon}} 
    
            {{price2 | addIcon}} 
    
            {{price3 | addIcon}} 
    
            {{price4}} 
    
    

    四、监听器watch

    用来观察Vue实例上的数据变动

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

    就这吧……