上节我们经过一番折腾，终于做出了改名字的页面
改名页面
但是，这个页面还不能真正的发挥作用。今天我们要让这个页面成为真正可以改你名字的页面，这就该轮到Vue出场了。
Vue.js
打开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这点挺蛋疼的，不过不会影响实际使用就是了）这里要注意一下，不同的信息，标签是不一样的。比如日期就用<input type="date">，下拉选框就用<select>和<option>。具体内容可以查询html教程：
https://www.runoob.com/html/html-forms.html
vuejs
做好后的效果
现在，用户的信息已经显示在表格里了。我们也可以对它进行修改。但是修改之后的内容怎么保存呢？
Vue.methods
继续打开accounts_profile.html，在表格下面添加一个按钮
@click是Vue特有的
@click=是Vue特有的接口，区别于html自带的onclick=，那么既然@click="submit"是Vue自己的接口，我们就需要在Vue里添加响应的函数submit()
添加于data下面
在data下面添加上methods，加上submit函数。
函数讲解：Vue的data不能直接发送，会带有许多多余的信息，不利于后台处理，所以我们新建一个data_to_send，把我们想要发送的部分赋值进去。
console.log(data_to_send)是将我们刚创建的data_to_send打印在浏览器后台，我们可以在浏览器里按右键，点“检查”，打开浏览器后台。
在某些浏览器叫审查元素
刷新页面，做少许修改，然后点保存修改按钮，
保存修改按钮
之后打开后台我们可以看到
成功
看到这个，说明我们之前的修改都是成功的，接下来只要把data_to_send发送到后台即可。具体怎么发送，下次再说
BVDN，傻子也能建网站
网友评论