Vue是什么？

Vue.js（读音 /vjuː/, 类似于 view） 是一套构建用户界面的 渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层，并且非常容易学习，非常容易与其它库或已有项目整合。另一方面，Vue 完全有能力驱动采用单文件组件和Vue生态系统支持的库开发的复杂单页应用。

1.vue的应用

<div id="box">

{{name}}

</div}>

new  Vue（V要大写）：{

el：“#box”（el是选择器的意思），

data：{

name：“你好”

}

}

2.Vue的v-for遍历下标

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <div id="box">
            <ul>
                <li v-for="(val,index) in arr">{{val}}-{{index}}</li>
            </ul>
        </div>
        <script src="js/vue.js"></script>
        <script>
            new Vue({
                el:"#box",
                data:{
                    arr:[1,2,3]
                }
            })
        </script>
    </body>
</html>

3.Vue里面v-for的应用

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="js/vue.js"></script>
    </head>
    <body>
        <div id="box">
            <ul>
                <!--<li v-for="val in arrs">{{val.num}}{{val.nane}} {{val.age}}</li>-->
                <li v-for="val in arrs">{{val.num}} {{val.nane}} {{val.age}}</li>
            </ul>
        </div>
        <script>
            new Vue({
                el:"#box",
                data:{
                    arrs:[
                    {num:1,nane:"苹果",age:1},
                    {num:2,nane:"香蕉",age:1},
                    {num:3,nane:"橘子",age:1},
                    {num:4,nane:"橙子",age:1}
                    
                    ]
                }
            })

      
        </script>
    </body>
</html>

用vue建立表单里的内容v-for

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="js/vue.js"></script>
    </head>
    <body>

        <div id="box">
            <table border="1" cellspacing="0">
                <thead>
                <tr>
                    <th>编号</th>
                    <th>名称</th>
                    <th>单价</th>
                </thead>
                </tr>
                <tbody v-for="val in arrs">
                    <td>{{val.num}}</td>
                    <td>{{val.pname}}</td>
                    <td>{{val.price}}</td>
                    
                </tbody>
            </table>
        </div>
        <script>
            new Vue({
                el:"#box",
                data:{
                    arrs:[
                      {num:1,pname:'香蕉',price:3},
                      {num:2,pname:'香蕉',price:2},
                      {num:3,pname:'香蕉',price:1},
                    ]
                }
            })
        </script>
    </body>
</html>