2018-09-11 vue 第一节

一、认识vue

    <div id="app">
        {{num}}
    </div>
    <script src="js/vue.js"></script>
    <script type="text/javascript">
        new Vue({  //vue实例
            el : "#app",   //element   +  选择器
            data : {   //data用于存放数据
                num : "默认值"
            }
        })
    </script>
    <!--data用于存放数据-->

二、 vue的指令
---------------- v-for 循环操

    <div id="app-1">
        <ul>
            <li v-for="v in arr">{{v}}</li>
            <li v-for="s in obj">{{s}}</li>
            <li v-for="(val,ind) in arr">
                <!--v-for="(值，下标) in 名"-->
                {{val}}-----{{ind}}    
                           <!--中间-----为连接符，符号可随意改变-->
            </li>
            <li v-for="(va,i) in arrs">
                {{va.num}}
                {{va.name}}
                {{va.price}}
            </li>
        </ul>
    </div>
    <script>
        new Vue({
            el : "#app-1",
            data : {
                arr : [1,2,3],
                obj : {name :'obj',age:12},
                arrs :[
                    {
                        num:1,
                        name:"a",
                        price:3
                    },
                    {
                        num:2,
                        name:"b",
                        price:2
                    }
                ]
            }   
        })
    </script>

三、表格

    <div id="app">
        <table border=1 cellspacing="0" text-align="center" width="300">
            <thead>
                <tr>
                    <th>编号</th>
                    <th>名称</th>
                    <th>价格</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for='(val,index) in arrs'>       
                    <td>{{index+1}}</td>      
                    <td>{{val.name}}</td>
                    <td>{{val.price}}</td>
                </tr>
            </tbody>
        </table>
    </div>
    <script src="js/vue.js"></script>
    <script>
        new Vue({
            el : "#app",
            data : {
                arrs :[
                    {
                        name:"a",
                        price:3
                    },
                    {   
                        name:"b",
                        price:2
                    }
                ]
            }
        })
    </script>