vue中的自定义指令以及模拟v-text、v-html、v-on

注册自定义指令的方式

注册v-focus自动聚焦指令：

<div id="app">

    <input type="text" v-focus="msg">

</div>

1. 全局注册

Vue.directive("focus", {
        // Vue会对html代码进行解析
        // 解析之后，会将解析后的内容重新渲染到页面中
        // inserted函数，就会在当前指令所在的元素，被插入到页面中的时候执行
        inserted: function (el) {
          // el 函数中接收的形参el，其实就是当前指令所在的元素

          el.focus()
          // console.log(el);
        }
      })

2. 局部注册

在创建Vue实例的时候，参数对象添加directives属性，在属性中注册指令即可！

全局注册所有的vue实例都能用

局部注册，只能在当前的vue实例中使用

const vm = new Vue({
        el: "#app",
        data: {
          msg: "<h1>hello world</h1>"
        },
        directives: {
          focus: {
            inserted(el){
              el.focus();
            }
          }
        }
      });

自定义指令的钩子函数：

 directives: {
          focus: {

            // 当vue要对当前指令所在的元素进行解析的时候执行
            bind(el){
              console.log("bind 钩子函数被执行了")
            },
            // 当当前指令所在的元素被插入到页面中的时候，会执行的函数
            inserted(el){
              console.log("