Vue.js中文文档　　　　

　　

 

　　Vue的指令：其实就是单个JavaScript表达式，一般来说是带有v-前缀

 

　　Vue指令：

　　　　v-model：数据双向绑定；

　　　　v-text：以纯文本方式显示数据；

　　　　v-html：可以识别HTML标签；

　　　　v-once：只渲染元素或组件一次；

　　　　v-pre：不进行编译，直接显示内容；

　　　　v-for：对集合或对象进行遍历；

　　

　　Learn

　　　　一、Hello World入门

　　　　二、v-model指令

　　　　三、v-text指令

　　　　四、v-for指令 

　　　　五、v-on指令 

 

　　项目结构

　　

　　【每个demo下方都存有html源码】

 

　

 

一、Hello World入门

　　在浏览器中打印Hello World信息，并在Console控制台中可通过双向绑定快速修改app.msg中的信息

app = new Vue({                //获取id元素                el:'#Gary',                //输出信息                data:{                    msg:'Hello World!'                }            });

 

     
                  {
    {msg}}        
     

 

 

            
                                              
      
                   {
     {msg}}        
      
    

 

 

二、v-model指令　　

　　v-model：数据双向绑定

　　v-model绑定了input组件，获得input文本框中输入的值并通过{

{username}}显示出来

　　 new Vue({                    el:'#Gary',                    data:{                        username:'',                        num:123,                        arr:[11,22,33],                        user:{                            name:'gary',                            age:10                        }                    }                })

 

用户名：            {
    {username}}

 

 

            
                                              
      
            
                   用户名：
                   {
     {username}}
       
                        {
     {num}}
       
            {
     {arr}}
       
            {
     {user}}
       
        
      
    

 

　　v-model指令与其它组件用法：checkbox、multi-checkbox、select、textarea组件

 

            
                                              
      
             
       
                     
        {
     {checked}}             
       
                               
       
                     
        Gary-1                     
        Gary-2                     
        Gary-3                     
        
                     选中:{
     {users}}             
       
                               
       
                 
                             选择1                     选择2                     选择3                     选择4                                  
        已选择：{
    {selected}}             
       
                          
       
                 
                         
        
         {
    {msg}}
         
             
        
       
                     
      
    

 

 

三、v-text指令　　

　　v-text：以纯文本方式显示数据

　　v-cloak：可以隐藏未编译的 Mustache 标签直到实例准备完毕，也就是隐藏{

{}}；

new Vue({                    el:'#Gary',                    data:{                           msg:'大家好我叫Gary'                    },                    created:function(){                        alert(1);                    }                });

 

     
            
                       
      
{
   {msg}}
                 
      
                 
      
                              
                       
              
     

　　

　　生命周期钩子created：该钩子在服务器端渲染期间不被调用　　

　　created:function(){                        alert(1);                    }

 

 

 

            
                                                      
      
            
                        
       
{
    {msg}}
                 
       
                 
       
                              
                        
               
      
            

 

 

四、v-for指令　　

　　v-for：对集合或对象进行遍历

　　new Vue({                    el:'#Gary',                    data:{                           arr:[11,22,33,44],                           user:{                               id:'01',                               name:'Gary'                           },                           users:[                           {id:'01',name:"Gary01"},                           {id:'02',name:"Gary02"},                           {id:'03',name:"Gary03"}                           ]                    }                });

 

     
                
      
                    
       
{
   {value}}
       
                    
       
{
   {value}}
       
                    
                           
       
{
   {key}}-{
   {value}}
       
                    
                           
       
{
   {index}}-{
   {value}}
       
                
      
        
     

 

　　key　　

　　为保证key都有的唯一性id，可以使用key="value.id"

{
   {index}}-{
   {value.id}}
     

 

 

            
                                              
      
                
       
                    
        
{
    {value}}
        
                    
        
{
    {value}}
        
                    
                            
        
{
    {key}}-{
    {value}}
        
                    
                            
        
{
    {index}}-{
    {value}}
        
                                        
        
{
    {index}}-{
    {value.id}}
        
                                    
       
        
      
            

 

 

五、v-on指令　　

　　v-on:绑定事件监听器 

　　new Vue({                    el:'#Gary',                    data:{                           result:0                    },                    methods:{                        //无参                        show:function(){                            console.log("show");                        },                        //带参                        add(a,b){                            this.result+=a+b;                        }                    }                });

 

　　v-on:click：鼠标点击按钮事件

　　v-on:mouseenter：鼠标进入按钮触碰事件

     
                
      click!
      
                
                      
      click!
      
                
                      
      add!{
    {result}}                
                      
      add!{
    {result}}        
     

 

 

            
                                                      
      
                
       click!
       
                
                       
       click!
       
                
                       
       add!{
     {result}}                
                       
       add!{
     {result}}