五月葉

输出 “npm install vue” 自动下载了vue.js

Vue.js 是一套构建用户界面的渐进式框架。

1.v-for循环

<div id="add">
        <ul>
           <li v-for="o in arr">{{o}}</li>
           <li v-for="v in obj">{{v}}</li>
           //这里的o和v其实就代表arr和obj当中的属性，
             我们通过vue中的for循环将其中的属性遍历出来
        </ul>
</div>

VueJS部分
<script>
        var add = new Vue({
            el:"#add",  //选择器 element（要素 ）的缩写。
            data:{
                arr:[1,2,3],
                obj:{
                    name:"路飞",
                    age:20
            }
            //data当中放的是数据
        })
</script>

2.数组对象

<div id="add">
        <ul>
            <li v-for="(val,ind) in arr2">{{val.name2}}{{val.age}}</li>
            //  这种v-for循环val代表值，ind代表下标，我们arr的数组对象给了val值，这时我们可以通过val.   获取到数组对象当中的值
        </ul>
</div>

Vue.js部分
<script>
        var add = new Vue({
            el:"#add",
            data:{
                //数组对象
                arr2:[
                    {
                        name2:"我最帅",
                        age:18
                    },
                    {
                        name2:"我第二帅",
                        age:18
                    }
                ]
            }
        })
    </script>

3.利用v-for循环制作表格

<table id="add" border="1"  cellspacing="0" style="width:800px;height:500px; text-align: center">
        <thead>
            <tr>
               //th标签可以有加粗的效果
                <th>编号</th>
                <th>名字</th>
                <th>价格</th>
            </tr>
        </thead>
        <tbody>
          //给行tr添加v-for，将值付给列td上输出
            <tr v-for="(val,index) in arr">
                <td>{{index+1}}</td>      //index+1值为1
                <td>{{val.name}}</td>    
                <td>{{val.price}}</td>
            </tr>
        </tbody>
</table>

vue.JS部分
<script>
        var add = new Vue({
            el:"#add",
            data:{
                arr:[  //数组中可以嵌套对象
                    {
                        name:"苹果",
                        price:18
                    },
                    {
                        name:"香蕉片",
                        price:15
                    }
                ]
            }
        })
</script>