美文网首页
2018-03-12 VUE做简历制作工具1

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

作者: tsl1127 | 来源:发表于2018-03-14 22:13 被阅读0次

    重点看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

    强制版本命令 image.png
    找到vue.min.js,找到适合浏览器的版本
    试验下:
    image.png
    image.png

    dribbble里搜dashboard

    image.png
    image.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

    相关文章

      网友评论

          本文标题:2018-03-12 VUE做简历制作工具1

          本文链接:https://www.haomeiwen.com/subject/ibmofftx.html