Vue 001 构建一个投票界面

目标：构建一个投票界面显示，票数高的在上方，票数低的在下方，可以点击进行投票，并动态显示。

 

 

推荐使用工具：

 

sublime Text    谷歌浏览器

 

搭建主界面：

 

  
    
    
    
    
  
  
    

      
UpVote!
    
    
    
    
    
  

效果如图：

添加一个投票详情信息：

 

  
    
    
    
    
  
  
    

      
UpVote!
      

        

          

            
          
          

            

            

            
            Yellow Pail
            #4
            
            

            On-demand sand castle construction expertise.
            

            
            Submitted by:
            
            
            
            
          
          

            
              
              10
            
          
        
      
    
    
    
    
    
  

 效果如图：

 

采用数据驱动进行渲染：

 

定义数据（这里是写死的数据，实际上从服务端获取）：

定义一个Vue实例，el确定Vue元素，data是数据：

 

数据绑定（使用“{{}}”进行数据绑定）：

注：对于html的href，id，src等属性进行绑定的时候，需要配合v-bind:进行使用，如v-bind:id="{{}}"

效果如图 ：

 循环绑定（对于重复出现的部分循环绑定）：

 

 article是包含的整个循环的部分。

循环的基本语法是：

 

为了避免冲突或者重复，我们为元素指定key：

修改原来投票区的代码：

  

    

      
    
    

      

        

          
            
              {{ submission.title }}
            
            #{{ submission.id }}
          
          

          {{ submission.description }}
          

          
          Submitted by:
          
          
        
      
    
   

   
      
      {{ submission.votes }}
   
  
  

显示效果：

 

对投票列表进行排序：

修改循环节点所使用的数据源：

效果如图：

Vue事件绑定：

定义Vue方法：

 

效果预绑定：