页面的基本结构已经有了，数据模型user对象也定义了 需求： - 完成数据绑定 （将表单项的值绑定到对应的数据模型）。 - 在上面区域 （p标签部分） 展示数据模型中的各项数据（通过插值表达式的形式）。 - 点击保存时，需要获取到表单数据，并将其以弹出框形式展示出来（要看到对应中的每一项数据）。

HTML部分：

<div id="app">
  <h2>用户信息编辑</h2>
  <form>
    <div>
      <label>用户名：</label>
      <input type="text" v-model="user.username">
    </div>
    <div>
      <label>密码：</label>
      <input type="password" v-model="user.password">
    </div>
    <div>
      <label>邮箱：</label>
      <input type="email" v-model="user.email">
    </div>
    <div>
      <label>性别：</label>
      <select v-model="user.gender">
        <option value="male">男</option>
        <option value="female">女</option>
      </select>
    </div>
    <div>
      <label>年龄：</label>
      <input type="number" v-model="user.age">
    </div>
    <button type="button" @click="saveUser">保存</button>
  </form>
  <div>
    <p>用户名：{{user.username}}</p>
    <p>密码：{{user.password}}</p>
    <p>邮箱：{{user.email}}</p>
    <p>性别：{{user.gender}}</p>
    <p>年龄：{{user.age}}</p>
  </div>
</div>

JavaScript部分：

var app = new Vue({
  el: '#app',
  data: {
    user: {
      username: '',
      password: '',
      email: '',
      gender: '',
      age: ''
    }
  },
  methods: {
    saveUser: function() {
      alert('用户名：' + this.user.username + '\n密码：' + this.user.password + '\n邮箱：' + this.user.email + '\n性别：' + this.user.gender + '\n年龄：' + this.user.age);
    }
  }
});