vue利用指令使用highlight.js

本身项目中使用的codemirror展示和编辑代码，但是遇到一个场景是一个页面展示十几二十个表格要展示，相当于使用多次，使用codemirror性能会很差，而且也是展示代码高亮，只预览不编辑，后面招待了highlight.js，直接使用不生效，后面采用的是指令的方式

1，安装highlight.js

cnpm i highlight.js -S

2,使用局部指令

// html
<pre v-highlight><code ref="codeSql" class="sql">{{sqlItem.content}}</code></pre>
// js
directives: {
    highlight: {
      function(el) {
        const blocks = el.querySelectorAll('pre code')
        blocks.forEach(block => {
          hljs.highlightBlock(block)
        })
      }
    }
  }

使用vue指令的时候自己总结了一下指令的一些属性

全局指令

Vue.directive('highlight', function(el) {
  let blocks = el.querySelectorAll('pre code')
  blocks.forEach(block => {
    hljs.highlightBlock(block)
  })
})

局部指令

directives: {
    highlight: {
      function(el) {
        let blocks = el.querySelectorAll('pre code')
        blocks.forEach(block => {
          hljs.highlightBlock(block)
        })
      }
    }
  },

局部指令

// 钩子函数，被绑定元素插入父节点时调用 (父节点存在即可调用，不必存在于 document 中)。
      inserted(el){
        el.focus()
        console.log( 'inserted' );
      },
      // 只调用一次，指令第一次绑定到元素时调用，用这个钩子函数可以定义一个在绑定时执行一次的初始化动作。
      bind(){
        console.log( 'bind' );
      },
      // 所在组件的 VNode 更新时调用，但是可能发生在其孩子的 VNode 更新之前。
      // 指令的值可能发生了改变也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新 
      update(){
        console.log( 'update' );
      },
      // 所在组件的 VNode 及其孩子的 VNode 全部更新时调用。
      componentUpdated(){
        console.log( 'componentUpdated' );
      },
      // 只调用一次，指令与元素解绑时调用。
      unbind(){
        console.log( 'unbind' );
      }