9. 自定义指令

• bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。
• inserted：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。
• update：所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。

<div id='app'>
  <input v-focus>
</div>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
<script>
  Vue.directive('focus',{
    inserted:function(el){
      el.focus()
    }
  })
  var app = new Vue({
    el:'#app',
  })
</script>

10. 渲染函数

VUE一般使用template来创建HTML，然后在有的时候，我们需要使用javascript来创建html，这时候我们需要使用render函数。

<div id='app'>
  <my-component></my-component>
</div>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
<script>
  Vue.component('my-component',{
    render: function (createElement) {
     //第一个参数是节点标签，第二个参数是数据选项，第三个是子节点相关
      return createElement('div',{style:{color:'red'}},'我是渲染函数')
    }
  })
  var app = new Vue({
    el:'#app',
  })
</script>