transformNode() — vue Function Reference

Architecture documentation for the transformNode() function in class.ts from the vue codebase.

Function typescript WebPlatform WebCompiler

Entity Profile

WebPlatform→ WebCompiler→ transformNode() — vue Function Reference

Dependency Diagram

graph TD
  4543b370_ed89_30d2_0249_2ce4664786a9["transformNode()"]
  1586dac9_809f_7446_6b75_bcf2350bc2bd["class.ts"]
  4543b370_ed89_30d2_0249_2ce4664786a9 -->|defined in| 1586dac9_809f_7446_6b75_bcf2350bc2bd
  style 4543b370_ed89_30d2_0249_2ce4664786a9 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

src/platforms/web/compiler/modules/class.ts lines 5–27

function transformNode(el: ASTElement, options: CompilerOptions) {
  const warn = options.warn || baseWarn
  const staticClass = getAndRemoveAttr(el, 'class')
  if (__DEV__ && staticClass) {
    const res = parseText(staticClass, options.delimiters)
    if (res) {
      warn(
        `class="${staticClass}": ` +
          'Interpolation inside attributes has been removed. ' +
          'Use v-bind or the colon shorthand instead. For example, ' +
          'instead of <div class="{{ val }}">, use <div :class="val">.',
        el.rawAttrsMap['class']
      )
    }
  }
  if (staticClass) {
    el.staticClass = JSON.stringify(staticClass.replace(/\s+/g, ' ').trim())
  }
  const classBinding = getBindingAttr(el, 'class', false /* getStatic */)
  if (classBinding) {
    el.classBinding = classBinding
  }
}