BVDN-9 用户信息修改（2）

上节我们经过一番折腾，终于做出了改名字的页面

改名页面

但是，这个页面还不能真正的发挥作用。今天我们要让这个页面成为真正可以改你名字的页面，这就该轮到Vue出场了。

打开accounts_profile.html，做如下修改

v-text，v-model

这里边的id，v-text，v-model就是给Vue用的接口，v-text表示对Vue的变量进行输出，但是你不能修改，span标签专用。而v-model不但输出了Vue的变量，你对它的修改还会真的改动Vue里的变量。

接下来，修改accounts_profile.html，里面的{% block vuejs %}

Vue代码

代码讲解：

var vm = new Vue是创建Vue对象。有了Vue对象，网页才会活起来，就像汽车有了发动机。

el: 表示这个Vue对象要控制的地方，'#app'对应网页里的id="app"。说明我们要控制那个改名字的表格。

data: 表示Vue变量，就是上面的v-model和v-text绑定的两个变量，分别是邮箱和名字。

{{ request.user.xxxx }} Django模板，代表当前登录用户的某些信息，这里写的是邮箱和名字。保存后，我们刷新页面，可以看到

成了！

除了名字之外的其他信息，用相同的方法写

搬砖重复性工作

（汉字看着很怪对不对，这其实是日语汉字，sublime text这点挺蛋疼的，不过不会影响实际使用就是了）这里要注意一下，不同的信息，标签是不一样的。比如日期就用，下拉选框就用