欢迎转载，转载请注明出处。

 

前言

　　学习本系列Vue知识，需要结合本系列的一些demo。你可以查看我的  或者直接下载  。

　　建议学习本系列之前已经会一个其他的前端框架，了解计算属性，数据绑定，模板语言等。零基础的话，看本教程可能不太适合。

 

一、第一个demo，Hello Word

            
                                     
             
     
                  {
    { message }}        
     
            

　　很简单，el指定Vue实例挂载的元素节点。data里面指定要显示的message的初值。当然，运行是依赖vue.js的，所以要加载script脚本。

　　

 

二、v-bind指令

            
                                     
             
     
            
                  
                       Hover your mouse over me for a few seconds to see my dynamically bound title!                     
     
            

　　v-bind: 将元素的属性跟Vue实例的属性绑定在一起。

 

三、v-if v-else指令

            
                                     
             
     
            
      
Now you see me
            
      
seen is false
        
     
            

 

四、v-for指令

            
                                     
             
     
            
      
                
       
{
   {todo.text}}
            
      
        
     
            

 

五、v-on指令

            
                                     
             
     
            
      
{
   {message}}
            
                  
      Change Message        
     
            

      

 

六、v-model指令

            
                                     
             
     
            
      
{
   {message}}