初识vue

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

Vue 只关注视图层， 采用自底向上增量开发的设计。

Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

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

vue 的指令

v-for... 循环操作

        ```
        <ul>
            <li v-for="value in arr">{{value}}</li><!--第一个值可以随意-->
            <li v-for="a in obj">{{a}}</li>
        </ul>
        
        <!--带有下标的-->
        <ul>
            <li v-for="(value,index) in arr">{{index}}:{{value}}</li>
                
            <!--第一个值是值第二个值是下标-->
            <li v-for="(value,index) in obj">{{index}}:{{value}}</li>
                
            <!--第一个值是属性，第二个值是属性值-->
            
            
            <li v-for="value in arrs">
                {{value.name}}
                {{value.color}}
            </li>
        </ul>
        ```

数组对象

    <script type="text/javascript" src="js/vue.js" ></script>
        <script>
            new Vue({
                el:".box",
                data:{
                    arr:[1,2,3],
                    obj:{
                        name:"大雄",
                        age:5
                    },
                    
                    arry:[
                        {name:"jack",
                        color:"orange"
                        },
                        {name:"rose",
                        color:"blue"
                        }
                    ]
                }
            })
        </script>

用v-for制作表格

<div id="itany" >
    <table border="1px" cellspacing="0"width="300px">
        <thead>
        <tr>
            <th>编号</th>
            <th>名称</th>
            <th>单价</th>
       </tr>
        </thead>
        <tbody>
        <tr v-for="(value,index) in arrs">
            <td>{{value.num}}</td>
            <td>{{value.name}}</td>
            <td>{{value.price}}</td>
        </tr>
        </tbody>
    </table>
</div>
<script src="js/vue.js"></script>
<script>
   new Vue({
        el:"#itany",
        data:{
            arrs:[
                {
                    num:1,
                    name:"apple",
                    price:3
                },
                {
                    num:2,
                    name:"banna",
                    price:4
                },
            ]
        }
    })
</script>