4.vue.js实例：列表输出

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>列表输出</title>
    <link href="css/special.css" rel="stylesheet" />
    <script src="js/vue.min.js"></script>
    <style>
        #app ul li{float:left;width:100%;height:33px;}
    </style>
</head>
<body>
    <div class="pc-content span6">
        <h3>列表输出</h3>
        <div id="app">
            <ul>
                <li v-for="value in todos">
                    {{ value.text }}
                </li>
            </ul>
        </div>
        <p>列表输出使用 v-for(v-for取代了1.0以前版本中的v-repeat) 这个指令就能完成</p>
    </div>
    <script>
        new Vue({
            el: '#app',
            data: {
                todos: [
                  { 'text': '1. Learn JavaScript' },
                  { 'text': '2. Learn Vue.js' },
                  { 'text': '3. Build Something Awesome' }
                ]
            }
        })
    </script>
</body>
</html>