vue学习笔记1

第一次正式写vue代码，模拟基本信息编辑页面，实现数据加载、数据处理的功能。

html部分

<div class="wrap" id="eg1">            <div>                <span>姓名：</span>                <input v-model="name" />            </div>            <div>                <span>性别：</span>                <input v-model="sex" />            </div>            <div>                <span>年龄：</span>                <input v-model="age" />            </div>            <div>                <span>学校：</span>                <input v-model="school" />            </div>            <input type="button" value="确定" @click="showJSON">        </div>

js部分

var vm=new Vue({            el:'#eg1',            data:{                name:'123',                sex:'123',                age:'123',                school:'123'            },            methods:{                showJSON:function(e){                    var newData=vm.$data;//获取vm对象中的data属性                    newData=JSON.parse(JSON.stringify(newData)); //处理数据                    console.log(newData);                     console.log(e);//e，原生事件对象                    console.log(this); //this指针指向vue对象                }            }        });

功能很强大，打开了新世界的大门