vue入门基础

1.安装git，通过npm install vue下载vue插件

$ npm install vue

2.通过script导入vue.js插件

3.然后再通过另一个script新建一个用来编写vue.js的区域

4.通过new Vue创建一个vue对象，el的值可以是选择器，ID选择器，class选择器等均可，data用来存放数据

    

        .....
    
    
     new Vue({
            el:'.demo'
            data:{
               demo1:'前端1班',
                arr:[1,2,3,4],
                obj:{name:"顾大伟",age:"25",hobby:"足球"},
                arrs:[
                    {name:"小红",age:"20",hobby:"睡觉"},
                    {name:"小黄",age:"21",hobby:"看书"},
                    {name:"小绿",age:"22",hobby:"打游戏"}
                ]
            }
     })

注：new Vue中Vue开头必须为大写字母

5.vue中的for循环，是通过v-for来实现的

HTML:
     

            
{{val}}
     
     

         
{{ao}}
     


vue.js:
     

6.通过vue制作table表格

（1）通过vue实现：

HTML:
     
        

            

                

                    
姓名
                    
年龄
                    
爱好
                
            
            

                

                    
{{value.name}}
                    
{{value.age   }}
                    
{{value.hobby}}
                
            
        
    

vue.js:
    

效果图如下：

姓名	年龄	爱好
小红	20	睡觉
小黄	21	看书
小绿	22	打游戏

通过下标来实现年龄：

HTML:
     
        

            

                

                    
姓名
                    
年龄
                    
爱好
                
            
            

                

                    
{{value.name}}
                    
{{index+20}}
                    
{{value.hobby}}
                
            
        
    

vue.js:
    

效果图如下：

姓名	年龄	爱好
小红	20	睡觉
小黄	21	看书
小绿	22	打游戏