Vue 学习之 v-if,v-for,v-on 以及生命周期

通过学习基础的vue语法，vue真是强大，原本需要我们在js实现的操作，都被简化到极致，就比如循环，分支以及事件绑定。下面我们来演示下:

 
  
  
  
  
  
  
  
 
 
 
      

	 
商品列表
	     //id要与下面的组件el中的定义的名字保持一致才能调用其中的属性和方法
        // forEach循环遍历newfruit数组
	      //单击事件绑定example中的函数addElement
	  

	    

	        
id
		
名称
		
单价
		
操作
	    
	
        

          
{{elem.id}}
	      
{{elem.name}}
	      
{{elem.price}}
	      

	
      
      
 
 

可以看到hello world!在实例创建后就被调用了，create是在实例创建后就被调用了。

 
        

	        
{{date}}
		

			

			      

				
{{value}}
			      
			
		
	
	
 
 

v-for不仅可以遍历数组，也可以遍历对象。

create 实例创建完成后调用，此阶段完成了数据的观测等，但尚未挂载，$el还不可用。需要初始化处理一些数据时会比较有用。

mounted el挂载到实例上后调用，一般我们的第一个业务逻辑会在这里开始。

beforeDestroy 实例销毁之前调用。主要解绑一些使用addEventListener监听的事件等。

同样的钩子还有updated和destroyed等。

详细可查看vue Api

vue组件的生命周期图:

我们可以从图中清晰看到每一个生命周期钩子在哪个阶段才会被调用。