vue 指令操作_vue 指令提前执行了-优快云博客

本文详细介绍了Vue.js的内置指令v-pre、v-once和v-cloak的作用及其应用场景，帮助开发者理解如何利用它们优化性能。同时，文章还探讨了自定义指令的创建与使用，强调了自定义指令依赖于传入的参数进行操作，用于解析和操作HTML元素。通过这些指令，开发者可以更高效地控制Vue应用的渲染过程，提升用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

v-pre: 指令
  1: 跳过其所在的节点的编译过程.
  2: 可利用它跳过: 没有使用的指令的语法。 没有使用插值的语法, 会加快解析。

 v-once: 
 1: v-once 所在节点在初次渲染动态渲染后, 就视为静态内容里了。

 2: 以后的数据的改变不会引起v-once 所在结构的更新, 可以优化性能。

 v-cloak: 指令:
  1: 本是是一个特殊的属性, vue实例对象创建完毕并接管容器后, 会删掉v-cloak 属性。
  2: 使用css 配合使用v-cloak 可以解决网速慢时页面展示出来的{{xxxx}}的问题。

 自定义的指令的使用:
  v-big: 指令的使用:
  使用directives: {    // 是一个对象
    直接写指令: 有两种方法 一种是函数形式, 一种是对象写法
    第一种: 
    big: {
      
    },
    第二种: 函数形式
    big(element, binding) {
      console.dir(element);    // 获取DOM结构目录
      console.log(element instanceof HTMLElement);  // 前者是不是后者实例对象
      element.innerText = binding.value * 10;
   }
  }
  

  // 自定义指令就是一个函数, 指令写好就会执行
  自定义指令不靠返回值, 就是依赖靠传递的参数, element, binding(绑定值) 
  指令的语法解析操作: 

  指令语法操作: 
  功能: 用于解析标签 (包括: 标签属性, 标签体内容, 绑定事件....)；
        举例: v-bind: href="xxx";