重点看vue的响应式原理、生命周期
简历制作工具:自己给自己做一个简历
项目用例图:
image.png
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
image.png
让其一行2个
image.png
image.png
image.png
image.png
内容滚动
如果父元素是flex的,那么里面的元素浮动float是无效的
引入vue
npm安装
npm install vue
找到vue.min.js,找到适合浏览器的版本
试验下:
image.png
image.png
dribbble里搜dashboard
image.pngimage.png
接下来,这些内容要可编辑,
<h1 contenteditable="true">{{resume.name}}</h1>
v-on事件监听,只要编辑的时候,就打印1
image.png
image.png
image.png
image.png
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
image.png
image.png
component的template只能有一个根元素
image.png
问题:一开始的name怎么传给它呢?如果用户编辑改了,怎么知道呢(要把数据传进去/传出来)?
image.png
image.png
image.png
image.png
image.png
这里直接用v-model时间绑定没有效果
得让外面知道我改了
image.png
image.png
来进行事件监听
外面有一个vue的实例,叫做app
app里面有个叫做editable-span的组件
一开始app把name作为组件的value值传进去了
用户在editable-span里面改value值,改完之后,怎么通知外面的app呢,在editable-span里触发一个事件edit(给出数据value),外面的app监听这个事件edit,就可以获取到这个value,从而更新外面的name
image.png
image.png
image.png
改样式
image.png
问题:如果要其他(应聘职位)也有类似功能,那么需要新开一个监听事件
image.png
这种方式可以用,但是特别重复
解决:方法一
image.png
image.png
image.png
image.png
image.png
把其他的也更新下代码
image.png
vue没有ajax
vue代替的是MVC里的V
image.png
call的第一个参数是当前实例,就是new出来的,也就是这个app
网友评论