1. 程式人生 > >Vue框架入門筆記(1)

Vue框架入門筆記(1)

rip com PE charset oct div 筆記 AR body

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

        <style>
        </style>
    </head> 
    <body>
        <div id="Myapp">
            <ol>
                <game-item v-for="item in games" v-bind:game="item"></game-item>
            </ol>
            
        </div>
        <script>
            Vue.component("game-item", {
                props:["game"],     //自定義屬性
                template:"<li>{{game.title}}</li>",
            });
            var vm=new Vue({
                el:"#Myapp",
                data:{
                    games:[
                        {title:"勇者鬥惡龍"},
                        {title:"口袋妖怪"},
                        {title:"守望先鋒"},
                    ]
                }
            })
        </script>
    </body>
</html>

Vue框架入門筆記(1)