vue入门基础

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

$ npm install vue

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

<script src="vue/dist/vue.js"></script>

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

<script>
        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:"打游戏"}
                ]
            }
        })        
 </script>

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

    <div class="demo">
        .....
    </div>
    
     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:
     <dl>
            <dt v-for="val in arr">{{val}}</dt>
     </dl>
     <ul>
         <li v-for="ao in obj">{{ao}}</li>
     </ul>


vue.js:
     <script>
        new Vue({
            el:'.demo', 
            data:{
                arr:[1,2,3,4],
                obj:{name:"顾大伟",age:"25",hobby:"足球"},
            }
        })        
    </script>

6.通过vue制作table表格

（1）通过vue实现：

HTML:
<div class="demo">     
        <table border="1" cellspacing='0'>
            <thead>
                <tr>
                    <th>姓名</th>
                    <th>年龄</th>
                    <th>爱好</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="(value,index) in arrs">
                    <td>{{value.name}}</td>
                    <td>{{value.age   }}</td>
                    <td>{{value.hobby}}</td>
                </tr>
            </tbody>
        </table>
    </div>

vue.js:
    <script>
        new Vue({
            el:'.demo', 
            data:{                                       
                arrs:[
                    {name:"小红",age:"20",hobby:"睡觉"},
                    {name:"小黄",age:"21",hobby:"看书"},
                    {name:"小绿",age:"22",hobby:"打游戏"}
                ]
            }
        })        
    </script>

效果图如下：

通过下标来实现年龄：

HTML:
<div class="demo">     
        <table border="1" cellspacing='0'>
            <thead>
                <tr>
                    <th>姓名</th>
                    <th>年龄</th>
                    <th>爱好</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="(value,index) in arrs">
                    <td>{{value.name}}</td>
                    <td>{{index+20}}</td>
                    <td>{{value.hobby}}</td>
                </tr>
            </tbody>
        </table>
    </div>

vue.js:
    <script>
        new Vue({
            el:'.demo', 
            data:{                                       
                arrs:[
                    {name:"小红",age:"20",hobby:"睡觉"},
                    {name:"小黄",age:"21",hobby:"看书"},
                    {name:"小绿",age:"22",hobby:"打游戏"}
                ]
            }
        })        
    </script>

效果图如下：