手写简易v-bind，v-show,v-if

手写简易v-bind

<template>
  <div>
    <input type="text" v-my-bind:value="num" />
    <button @click="num++">更新num</button>
  </div>
</template>
<script>
export default {
  data() {
    return {
    	num: 1,
    };
  },
  directives: {
    "my-bind": {
      bind(element, binding, vnode) {
        // 设置一个属性
        element.setAttribute(binding.arg, binding.value);
      },
      update(element, binding, vnode) {
        element.setAttribute(binding.arg, binding.value);
      },
    },
},
};
</script>

手写简易v-show

<template>
  <div>
    <button v-my-show="isShow">我显示了</button>
    <button @click="isShow = !isShow">更新 isShow</button>
  </div>
</template>

<script>
function showOperation(element, binding, vnode) {
  if (binding.value) {
    // 显示元素
    element.style.display = "block";
  } else {
    // 隐藏元素
    element.style.display = "none";
  }
}
export default {
  data() {
    return {
      isShow: true,
    };
  },
  directives: {
    "my-show": {
      inserted: showOperation,
      update: showOperation,
    },
  },
};
</script>

手写简易v-if

<template>
  <div>
    <h1 v-my-if="isIf">我存在了</h1>
    <button @click="isIf = !isIf">更新 isIf</button>
  </div>
</template>

<script>
let cloneNode = null; //未来直接还原
let cloneNodeStr = null; //未来直接还原
let parent = null;
export default {
  data() {
    return {
      isIf: true,
    };
  },
  directives: {
    "my-if": {
      inserted(element, binding) {
        parent = element.parentNode;
        // cloneNode = element.cloneNode(); //保存自身
        cloneNodeStr = element.innerHTML; //保存自身
      },
      update(element, binding) {
        // 如果binding.value => true 插入元素
        // 如果binding.value => false  删除元素，留个<!-- -->
        if (binding.value) { //加入没有实现
          console.log("if", "parent.innerHTML", parent.innerHTML);
          parent.innerHTML = parent.innerHTML.replace( "<!-- -->", cloneNodeStr);
        } else {
          // replace 做替换
          parent.innerHTML = parent.innerHTML.replace(
            element.innerHTML,
            "<!-- -->"
          );
        }
      },
    },
  },
};
</script>