2018-03-12 VUE做简历制作工具1

重点看vue的响应式原理、生命周期

简历制作工具：自己给自己做一个简历
项目用例图：

image.png

用户界面

image.png

后台数据要用到leancloud

image.png

先创建一个存储区，然后进入帮助文档，然后选择javascript（数据存储开发指南），然后到SDK安装的javascript安装指南
先进行初始化代码
然后进行测试验证
写html，aside和main分别左右布局，让page flex

image.png

要让左边的aside竖着排
display: flex;
flex-direction: column;
登出要放在最下面
justify-content: space-between;

image.png

这里每一个button太宽了，还是把button方到li里面

image.png

接下来，让他们居中
text-align: center;

让右边的整体居中
margin: 0 auto;
text-align: center;

image.png

让其一行2个

image.png

内容滚动

如果父元素是flex的，那么里面的元素浮动float是无效的
引入vue
npm安装
npm install vue

强制版本命令

image.png

找到vue.min.js，找到适合浏览器的版本
试验下：

image.png

dribbble里搜dashboard

image.png

接下来，这些内容要可编辑，
<h1 contenteditable="true">{{resume.name}}</h1>
v-on事件监听，只要编辑的时候，就打印1

image.png

这里学习v-on事件监听
问题：每写一次，光标就会跑到最前面
我们这里换一种思路来解决问题
用input

image.png

问题：当你改的比较多的时间就写不下去了

image.png

如果这个文字很长，就没办法显示完全，在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等也需要弄几个状态切换变量，太多了
用组件来解决

image.png

component的template只能有一个根元素

image.png

问题：一开始的name怎么传给它呢？如果用户编辑改了，怎么知道呢（要把数据传进去/传出来）？

image.png

这里直接用v-model时间绑定没有效果
得让外面知道我改了

image.png

来进行事件监听

外面有一个vue的实例，叫做app
app里面有个叫做editable-span的组件
一开始app把name作为组件的value值传进去了
用户在editable-span里面改value值，改完之后，怎么通知外面的app呢，在editable-span里触发一个事件edit（给出数据value），外面的app监听这个事件edit，就可以获取到这个value，从而更新外面的name