1、场景：在后管实现前台搭建页面的预览效果，一般有两种做法，一是搭建完成后通过点击预览按钮，页面展示实现与官网效果一致，二是在搭建时失焦即实现预览的效果，现在需要实现在组件不同状态时展示的效果，其中状态通过status定义，值为edit、preview以及detail，通过判断状态的不同从而展示是否处于focus下。
2、问题：现在需要在没有内容的情况下，status为preview时默认placehold，提示“请输入xxx”。
3、解决方法：通过自定义指令的方式为元素添加该提示。
4、directive的基本知识
钩子函数：
bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。
inserted：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。
update：所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变，也可能没有。
componentUpdated：指令所在组件的 VNode 及其子 VNode 全部更新后调用。
参数：
el： 指令所绑定的元素，可以用来直接操作 DOM
binding： 一个对象，包含以下属性：
name：指令名，不包括 v- 前缀。
value：指令的绑定值，例如：v-my-directive=“1 + 1” 中，绑定值为 2。
oldValue：指令绑定的前一个值，仅在 update 和 componentUpdated 钩子中可用。无论值是否改变都可用。
expression：字符串形式的指令表达式。例如 v-my-directive=“1 + 1” 中，表达式为 “1 + 1”。
arg：传给指令的参数，可选。例如 v-my-directive:foo 中，参数为 “foo”。
modifiers：一个包含修饰符的对象。例如：v-my-directive.foo.bar 中，修饰符对象为 { foo: true, bar: true }。
vnode：Vue 编译生成的虚拟节点。
oldVnode：上一个虚拟节点，仅在 update 和 componentUpdated 钩子中可用。
5、具体实现方式：在预览状态下，当元素不存在内容时（el.innerText === '\n'是为了兼容富文本），让其el.innerText为输入的提示，同时样式也需要进行调整，通过给元素添加类进行修改。
Vue.directive('default', {
inserted: (el, binding, vnode) => {
if (binding.value[0] === 'preview') {
el.classList.add('placehold-class')
if (!el.innerText || el.innerText === '\n') {
el.innerText = binding.value[1]
} else {
el.classList.remove('placehold-class')
}
}
}
})
