项目初始化(vue简历编辑器)

项目的全部代码在这里, 这篇文章只会将主要的思路. 代码会不完整.
前提:
安装vue
安装leanCloud 存储服务

初始化

这个编辑器如下图所示:

基本结构为:
index.html

<div class="page" id="app">
<aside></aside>
<main></main>
</div>

对于aside就是几个按钮, 而main中的也有几个小节:

<main>
<section></section>
<section></section>
<section></section>
</main>

我们为其添加一点css样式, 就会变成上如所示的样式.

vue组件

简历的第一项个人信息. 我们想编辑它, 可以使用组件.
先创建一个vue实例.
app.js

var app = new Vue({
  el: '#app',
  data: {
    resume: {
      name: '姓名',
      gender: '男',
      birthday: '1990-10-02',
      jobTitle: '前端工程师',
      phone: '12345678901',
      email: 'example@example.com'
    }
  },
  methods: {
    onEdit(key, value) {
      this.resume[key] = value
    },
  }
})

再创建一个组件实例:
editable-span

Vue.component('editable-span', {
  props: ['name'],
  template: `
    <span class="editable-span">
          <span v-show="!edit.editing">{{name}}</span>
          <input type="text" v-show="edit.editing" v-bind:value="name" @input="triggerEdit">
          <button @click="trigger">{{edit.value}}</button>
        </span>
    `,
  data() {
    return {
      edit: {
        editing: false,
        value: '编辑'
      }

    }
  },
  methods: {
    triggerEdit(e) {
      this.$emit('edit', e.target.value)
    },
    trigger(){
      this.edit.editing = !this.edit.editing
      if (this.edit.value === '编辑') {
        this.edit.value = '保存'
      } else {
        this.edit.value = '编辑'
      }
    }
  }
})

通过edit.editing来控制显示与否, 当鼠标移动到信息上方时, 显示编辑按钮, 点击按钮后进入编辑, 此时信息消失, 且编辑按钮变成保存按钮(trigger). 当点击保存后, 更新信息(triggerEdit). 注意triggerEdit中有个this.$emit(‘edit’, e.target.value). 这个意思是触发edit事件. 其参数为e.target.value.

在index.html中引入组件(注意先引入相应文件):

<editable-span :name="resume.birthday" @edit="onEdit('birthday', $event)"></editable-span>

edit事件绑定在了onEdit函数上, 其第一参数为key值, 第二个参数value值.

参考:
https://cn.vuejs.org/v2/api/#v-on
https://cn.vuejs.org/v2/guide/components.html