重点看vue的响应式原理、生命周期
简历制作工具：自己给自己做一个简历
项目用例图：
用户界面
后台数据要用到leancloud
先创建一个存储区，然后进入帮助文档，然后选择javascript（数据存储开发指南），然后到SDK安装的javascript安装指南
先进行初始化代码
然后进行测试验证
写html，aside和main分别左右布局，让page flex
要让左边的aside竖着排
display: flex;
flex-direction: column;
登出要放在最下面
justify-content: space-between;
这里每一个button太宽了，还是把button方到li里面
接下来，让他们居中
text-align: center;
让右边的整体居中
margin: 0 auto;
text-align: center;
让其一行2个
内容滚动
如果父元素是flex的，那么里面的元素浮动float是无效的
引入vue
npm安装
npm install vue
找到vue.min.js，找到适合浏览器的版本
试验下：
dribbble里搜dashboard
接下来，这些内容要可编辑，
<h1 contenteditable="true">{{resume.name}}</h1>
v-on事件监听，只要编辑的时候，就打印1
这里学习v-on事件监听
问题：每写一次，光标就会跑到最前面
我们这里换一种思路来解决问题
用input
问题：当你改的比较多的时间就写不下去了
如果这个文字很长，就没办法显示完全，在input口里
换第3种方式来解决
用一种状态切换
<span>
<span v-show="!editingName" contenteditable="true">{{resume.name}}</span>
<input type="text" v-show="editingName" v-model="resume.name">
<button v-on:click="editingName=!editingName">edit</button>
</span>
editingName默认为false
问题：name需要一个状态切换变量，gender等也需要弄几个状态切换变量，太多了
用组件来解决
component的template只能有一个根元素
问题：一开始的name怎么传给它呢？如果用户编辑改了，怎么知道呢（要把数据传进去/传出来）？
这里直接用v-model时间绑定没有效果
得让外面知道我改了
来进行事件监听
外面有一个vue的实例，叫做app
app里面有个叫做editable-span的组件
一开始app把name作为组件的value值传进去了
用户在editable-span里面改value值，改完之后，怎么通知外面的app呢，在editable-span里触发一个事件edit（给出数据value），外面的app监听这个事件edit，就可以获取到这个value，从而更新外面的name
改样式
问题：如果要其他（应聘职位）也有类似功能，那么需要新开一个监听事件
这种方式可以用，但是特别重复
解决：方法一
把其他的也更新下代码
vue没有ajax
vue代替的是MVC里的V
call的第一个参数是当前实例，就是new出来的，也就是这个app
