Vue系统学习：01、操作data数据

1、在HTML结构中获取data数据时，不用关注data这个大对象，只要关注里面具体的值就行

    <div id="app">
        <h1>{{msg}}</h1>
        <h1>{{city[0]}}</h1>
        <ul>
            <li v-for='item in city'>{{item}}</li>
        </ul>
        <ul>
            <li v-for='items in people'>{{items.name}}{{items.age}}{{items.hobby}}</li>
        </ul>
    </div>

    <script src="../js/vue.js"></script>

    <script>
        const test = new Vue({
            el: '#app',
            data: {
                msg: 'hello word',     // 关注data里面具体值。
                city: ['北京', '上海', '广州', '深圳'],
                people: [
                    { name: '张三', age: 12, hobby: 'ball' },
                    { name: '李四', age: 22, hobby: 'bball' },
                    { name: '王五', age: 32, hobby: 'fball' },
                ]
            }
        })
    </script>

　　也可以将data数据放到外面对象里面。

        const obj = {
            msg: 'hello word',
            city: ['北京', '上海', '广州', '深圳'],
            people: [
                { name: '张三', age: 12, hobby: 'ball' },
                { name: '李四', age: 22, hobby: 'bball' },
                { name: '王五', age: 32, hobby: 'fball' }],
        };
        const test = new Vue({
            el: '#app',
            data: obj,
        })