Vue---day02

3. Vue对象提供的属性功能

3.1 过滤器

过滤器，就是vue允许开发者自定义的文本格式化函数，可以使用在两个地方：输出内容和操作数据中。

定义过滤器的方式有两种。

3.1.1 使用Vue.filter()进行全局定义

Vue.filter("RMB1", function(v){
  	//就是来格式化(处理)v这个数据的
  	if(v==0){
    		return v
  	}

  	return v+"元"
})

3.1.2 在vue对象中通过filters属性来定义

var vm = new Vue({
  el:"#app",
  data:{},
  filters:{
    RMB2:function(value){
      if(value==''){
        return;
      }else{
      	return '¥ '+value;
      }
    }
	}
});

3.4 计算和侦听属性

3.4.1 计算属性

我们之前学习过字符串反转，如果直接把反转的代码写在元素中，则会使得其他同事在开发时时不易发现数据被调整了，所以vue提供了一个计算属性(computed)，可以让我们把调整data数据的代码存在在该属性中。

    
    
    
		


    

         
{{ str1 }}
         
{{ strRevs }}
    

3.4.2 监听属性

侦听属性，可以帮助我们侦听data某个数据的变化，从而做相应的自定义操作。

侦听属性是一个对象，它的键是要监听的对象或者变量，值一般是函数，当侦听的data数据发生变化时，会自定执行的对应函数，这个函数在被调用时，vue会传入两个形参，第一个是变化前的数据值，第二个是变化后的数据值。

    
    
    
    


    

        
{{ num }}
        按钮
    

3.5 vue对象的生命周期(created和mounted用的最多)

每个Vue对象在创建时都要经过一系列的初始化过程。在这个过程中Vue.js会自动运行一些叫做生命周期的的钩子函数，我们可以使用这些函数，在对象创建的不同阶段加上我们需要的代码，实现特定的功能。

    
    
    
    


    

        
{{num}}
        按钮
    

总结：

在vue使用的过程中，如果要初始化操作，把初始化操作的代码放在 mounted 中执行。
mounted阶段就是在vm对象已经把data数据实现到页面以后。一般页面初始化使用。例如，用户访问页面加载成功以后，就要执行的ajax请求。

另一个就是created，这个阶段就是在 vue对象创建以后，把ajax请求后端数据的代码放进 created

3.2 阻止事件冒泡和刷新页面

事件冒泡：指代js中子元素的事件触发以后，会导致父级元素的同类事件一并被触发到。

事件冒泡有好处，也有坏处。

好处：如果能正确利用这种现象，可以实现事件委托，提升特效的性能

坏处：如果没有正确使用，则会导致不必要的bug出现。

使用.stop和.prevent

3.3 综合案例-todolist

我的计划列表

html代码:

	
	
	


	

		
To do list
		
		

		

			
			

				学习html
				 ↑ 
				 ↓ 
				删除
			
			
学习css ↑  ↓ 删除
			
学习javascript ↑  ↓ 删除
		
	

特效实现效果：

	
	
	
    


	

		
To do list
		
		
		

			

				{{item}}
				 ↑ 
				 ↓ 
				删除