Vue 렌더링 기능은 어떤 명령을 사용합니까?

vue 렌더링 기능은 "render" 명령을 사용합니다. Vue에서는 템플릿 HTML 구문을 사용하여 페이지를 빌드하고, 렌더링 기능을 사용하여 js 언어로 DOM을 빌드할 수 있습니다. vue는 가상 DOM이므로 템플릿을 가져올 때 VNode 함수로 변환해야 합니다. render() 함수를 사용하여 DOM을 빌드하면 vue는 변환이 필요하지 않습니다.

이 튜토리얼의 운영 환경: windows7 시스템, vue3 버전, DELL G3 컴퓨터.

대부분의 경우 Vue는 템플릿 구문을 사용하여 애플리케이션을 만들 것을 권장합니다. 그러나 일부 사용 사례에서는 실제로 JavaScript의 전체 프로그래밍 기능을 사용해야 합니다. 렌더링 함수 --render가 유용한 경우입니다.

1. 렌더링 기능 소개

간단히 말하면, vue에서는 템플릿 HTML 구문을 사용하여 페이지를 빌드합니다. 렌더링 기능을 사용하면 js 언어를 사용하여 DOM을 빌드할 수 있습니다. vue는 가상 DOM이므로 템플릿을 가져올 때 VNode 함수로 변환해야 합니다. DOM을 빌드하기 위해 렌더링 기능을 사용하면 vue는 변환 프로세스를 제거합니다.

가상 DOM을 설명하기 위해 render 함수를 사용할 때 vue에서는 가상 DOM을 구축하는 데 필요한 도구인 함수를 제공합니다. 공식 웹사이트에서는 createElement라고 되어 있습니다. h라는 합의된 약어도 있습니다.

1.1 Virtual DOM

Vue는 가상 DOM을 생성하여 실제 DOM을 변경하려는 방법을 추적합니다. 다음 코드 줄을 주의 깊게 살펴보세요.

return createElement('h1', this.blogTitle)

createElement가 정확히 무엇을 반환하나요? 실제로는 실제 DOM 요소가 아닙니다. 더 정확한 이름은 createNodeDescription일 수 있습니다. 왜냐하면 여기에 포함된 정보는 하위 노드의 설명 정보를 포함하여 페이지에 어떤 종류의 노드를 렌더링해야 하는지 Vue에 알려주기 때문입니다. 우리는 이러한 노드를 "가상 노드"라고 설명하며, 종종 "VNode"로 축약합니다. "가상 DOM"은 Vue 구성 요소 트리에서 구축된 전체 VNode 트리라고 부르는 것입니다.

1.2 createElement에서 허용하는 매개변수

// @returns {VNode}
createElement(
  // {String | Object | Function}
  // 一个 HTML 标签名、组件选项对象，或者
  // resolve 了上述任何一种的一个 async 函数。必填项。
  'div',

  // {Object}
  // 一个与模板中属性对应的数据对象。可选。
  {
    // (详情见1.3)
  },

  // {String | Array}
  // 子级虚拟节点 (VNodes)，由 `createElement()` 构建而成，
  // 也可以使用字符串来生成“文本虚拟节点”。可选。
  [
    '先写一些文字',
    createElement('h1', '一则头条'),
    createElement(MyComponent, {
      props: {
        someProp: 'foobar'
      }
    })
  ]
)

1.3 렌더링 기능 사용

render:(h) => {
  return h('div',{
  　 // 给div绑定class属性
    class: {
      child: true,
      more: false
    },
　　// 给div绑定样式
　　style:{
  　　width:'200px',
      height:'200px',
　　},　
　　// 给div绑定点击事件　　
    on: {
      click: () => {
        console.log('点击事件')
      }
    },
  })
}

1.4 심층 렌더링 기능 데이터 객체

:클래스와 v -bind: 스타일이 템플릿 구문에서 특별히 처리되는 것처럼 VNode 데이터 개체에도 해당하는 최상위 필드가 있습니다. 또한 이 객체를 사용하면 일반 HTML 속성은 물론 innerHTML과 같은 DOM 속성(이것은 ​​v-html 지시어를 재정의함)

{
  // 与 `v-bind:class` 的 API 相同，
  // 接受一个字符串、对象或字符串和对象组成的数组
  'class': {
    foo: true,
    bar: false
  },
  // 与 `v-bind:style` 的 API 相同，
  // 接受一个字符串、对象，或对象组成的数组
  style: {
    color: 'red',
    fontSize: '14px'
  },
  // 普通的 HTML attribute
  attrs: {
    id: 'foo'
  },
  // 组件 prop
  props: {
    myProp: 'bar'
  },
  // DOM 属性
  domProps: {
    innerHTML: 'baz'
  },
  // 事件监听器在 `on` 属性内，
  // 但不再支持如 `v-on:keyup.enter` 这样的修饰器。
  // 需要在处理函数中手动检查 keyCode。
  on: {
    click: this.clickHandler
  },
  // 仅用于组件，用于监听原生事件，而不是组件内部使用
  // `vm.$emit` 触发的事件。
  nativeOn: {
    click: this.nativeClickHandler
  },
  // 自定义指令。注意，你无法对 `binding` 中的 `oldValue`
  // 赋值，因为 Vue 已经自动为你进行了同步。
  directives: [
    {
      name: 'my-custom-directive',
      value: '2',
      expression: '1 + 1',
      arg: 'foo',
      modifiers: {
        bar: true
      }
    }
  ],
  // 作用域插槽的格式为
  // { name: props => VNode | Array<VNode> }
  scopedSlots: {
    default: props => createElement(&#39;span&#39;, props.text)
  },
  // 如果组件是其它组件的子组件，需为插槽指定名称
  slot: &#39;name-of-slot&#39;,
  // 其它特殊顶层属性
  key: &#39;myKey&#39;,
  ref: &#39;myRef&#39;,
  // 如果你在渲染函数中给多个元素都应用了相同的 ref 名，
  // 那么 `$refs.myRef` 会变成一个数组。
  refInFor: true
}

1.5 Constraints

구성 요소 트리의 모든 VNode는 고유해야 합니다.

이는 다음 렌더링 함수가 불법임을 의미합니다.

render: function (createElement) {
  var myParagraphVNode = createElement('p', 'hi')
  return createElement('div', [
    // 错误 - 重复的 VNode
    myParagraphVNode, myParagraphVNode
  ])
}

요소/구성 요소를 여러 번 반복해야 하는 경우 팩토리 함수를 사용하여 이를 달성할 수 있습니다.

예를 들어 다음 렌더링 함수는 완전히 합법적인 방식으로 20개의 동일한 단락을 렌더링합니다.

render: function (createElement) {
  return createElement('div',
    Array.apply(null, { length: 20 }).map(function () {
      return createElement('p', 'hi')
    })
  )
}

2. 렌더링 함수 적용

2.1 간단한 요소 렌더링

// app.vue （根组件）

<template>
  <div id="app">
    <myRender></myRender>
  </div>
</template>

<script>
import myRender from &#39;./components/myRender&#39;
export default {
  components:{
    myRender
  }
}
</script>

// myRender.vue

<script>
export default {
  render:(h) => {
    return h(&#39;div&#39;,{
      class: {
        child: true,
        more: false
      },
      attrs: {
        id: &#39;foo&#39;,
        name: &#39;child&#39;
      },
  　　style: {
  　　　 width:&#39;100%&#39;,
        height:&#39;200px&#39;,
  　　},
      domProps: {
        innerHTML: &#39;我是render渲染的子组件&#39;
      }
    })
  }
}
</script>

<style scoped>
.child {
  background: pink
  font-size 24px
  letter-spacing 2px
}
.more {
  background: red
}
</style>

2.2 하위 태그 추가

<script>
export default {
  render:(h) => {
    return h(&#39;div&#39;,
      {
        class: &#39;wrapper&#39;,
        attrs: {
          id: &#39;wrapper&#39;,
        },
    　　style: {
    　　　 width:&#39;100%&#39;,
          height:&#39;250px&#39;
    　　},
      },[
        h(&#39;h2&#39;,&#39;标题&#39;),
        h(&#39;div&#39;,{
          class: &#39;content&#39;,
          attrs: {
            id: &#39;content&#39;,
          },
          style:{
            width:&#39;800px&#39;,
            height:&#39;100px&#39;
          },
          domProps:{
            innerHTML:&#39;我是内容&#39;
          }
        })
      ]
    )
  }
}
</script>

<style scoped>
.wrapper 
  background: pink
  letter-spacing 2px
  .content 
    margin 0 auto 
    background: red
    color #ffffff
    font-size 24px

</style>

2.3 템플릿 함수 대신 JavaScript 사용

기본 JavaScript에서 작업을 쉽게 수행할 수 있는 한 Vue의 렌더링 기능은 독점적인 대체 방법을 제공하지 않습니다.

1. v-if 및 v-for 템플릿 구문:

<ul v-if="items.length">
  <li v-for="item in items">{{ item.name }}</li>
</ul>
<p v-else>No items found.</p>

<script>
export default {
  data(){
    return{
      items:[1,2,3]
    }
  }
}
</script>

render 함수 구현:

<script>
export default {
  render: function (createElement) {
    if (this.items.length) {
      return createElement(&#39;ul&#39;, this.items.map(function (item) {
        return createElement(&#39;li&#39;, item.name)
      }))
    } else {
      return createElement(&#39;p&#39;, &#39;No items found.&#39;)
    }
  },
  data(){
    return{
      items:[1,2,3]
    }
  }
}
</script>

2. v-model

<script>
export default {
  render:function(createElement) {
    var self = this
    return createElement(&#39;div&#39;,[
        createElement(&#39;div&#39;,{class: &#39;showContent&#39;},self.inputValue),
        createElement(&#39;input&#39;,{
          class: &#39;content&#39;,
          domProps:{
            value:self.inputValue
          },
          on:{
            input:function(event){
              self.inputValue = event.target.value
            }
          }
        })
      ]
    )
  },
  data(){
    return{
      inputValue:&#39;&#39;
    }
  },
  watch:{
    inputValue:function(){
      console.log(this.inputValue)
    }
  },
}
</script>

<style scoped>
.showContent
  font-size 32px
  letter-spacing 2px
.content 
  margin 10px auto 
  color blue
  font-size 24px
</style>

2.4 정적 슬롯

this.$ 슬롯

1. 상위 구성요소

<template>
  <div id="app">
    <myRender>
      <template v-slot:header>
        <div >
          头部
        </div>
      </template>
      <template #footer>
        <div >
          脚部
        </div>
      </template>
    </myRender>
  </div>
</template>

<script>
import myRender from &#39;./components/myRender&#39;
export default {
  components:{
    myRender
  }
}
</script>

2. 하위 구성요소

<script>
export default {
  render:function(createElement) {
    let childHeader = this.$slots.header
    let childFooter = this.$slots.footer
    return createElement(
      &#39;div&#39;,
      {
        class: &#39;showContent&#39;,
        style:{
          width:&#39;100%&#39;
        }
      },
      [
        createElement(&#39;div&#39;,{class:&#39;childHeader&#39;},childHeader),
        createElement(&#39;div&#39;,childFooter),
      ]
    )
  },
}
</script>

<style scoped>
.showContent
  letter-spacing 2px
  background-color red
  .childHeader 
    color blue
    font-size 24px
</style>

2.5 범위 슬롯

this.$scopedSlots 사용법

1. 리

2. -comComponent

<template>
  <div id="app">
    <myRender :myLayout="layout">
      <template slot-scope="childMsg">
        <div >
          {{childMsg.text}}
        </div>
      </template>
    </myRender>
  </div>
</template>

<script>
import myRender from &#39;./components/myRender&#39;
export default { 
  data(){
    return{
      layout:{
        header:&#39;头部&#39;,
        footer:&#39;脚部&#39;
      }
    }
  },
  components:{
    myRender
  }
}
</script>

[관련 추천:

vuejs 비디오 튜토리얼

, 웹 프론트엔드 개발]

위 내용은 Vue 렌더링 기능은 어떤 명령을 사용합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!