初識(shí)vue

Vue.js 是一套構(gòu)建用戶界面的漸進(jìn)式框架疟赊。

Vue 只關(guān)注視圖層鞋囊， 采用自底向上增量開發(fā)的設(shè)計(jì)。

Vue 的目標(biāo)是通過盡可能簡單的 API 實(shí)現(xiàn)響應(yīng)的數(shù)據(jù)綁定和組合的視圖組件钠至。

輸出 “npm install vue” 自動(dòng)下載了vue.js

vue 的指令

v-for... 循環(huán)操作

        ```
        <ul>
            <li v-for="value in arr">{{value}}</li><!--第一個(gè)值可以隨意-->
            <li v-for="a in obj">{{a}}</li>
        </ul>
        
        <!--帶有下標(biāo)的-->
        <ul>
            <li v-for="(value,index) in arr">{{index}}:{{value}}</li>
                
            <!--第一個(gè)值是值第二個(gè)值是下標(biāo)-->
            <li v-for="(value,index) in obj">{{index}}:{{value}}</li>
                
            <!--第一個(gè)值是屬性葛虐，第二個(gè)值是屬性值-->
            
            
            <li v-for="value in arrs">
                {{value.name}}
                {{value.color}}
            </li>
        </ul>
        ```

數(shù)組對(duì)象

    <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>編號(hào)</th>
            <th>名稱</th>
            <th>單價(jià)</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>