一英融、認(rèn)識(shí)vue

    <div id="app">
        {{num}}
    </div>
    <script src="js/vue.js"></script>
    <script type="text/javascript">
        new Vue({  //vue實(shí)例
            el : "#app",   //element   +  選擇器
            data : {   //data用于存放數(shù)據(jù)
                num : "默認(rèn)值"
            }
        })
    </script>
    <!--data用于存放數(shù)據(jù)-->

二但校、 vue的指令
---------------- v-for 循環(huán)操

    <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="(值光稼，下標(biāo)) in 名"-->
                {{val}}-----{{ind}}    
                           <!--中間-----為連接符坤次，符號(hào)可隨意改變-->
            </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>編號(hào)</th>
                    <th>名稱</th>
                    <th>價(jià)格</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>