Perintah manakah yang digunakan oleh fungsi rendering vue?

Fungsi rendering vue menggunakan arahan "render". Dalam vue, sintaks HTML templat digunakan untuk membina halaman, dan fungsi pemaparan boleh digunakan untuk membina DOM dalam bahasa js. Oleh kerana vue ialah DOM maya, ia mesti diterjemahkan ke dalam fungsi VNode apabila mendapatkan templat Dengan menggunakan fungsi render() untuk membina DOM, vue menghapuskan proses terjemahan.

Persekitaran pengendalian tutorial ini: sistem windows7, versi vue3, komputer DELL G3.

Dalam kebanyakan kes, Vue mengesyorkan menggunakan sintaks templat untuk mencipta aplikasi. Walau bagaimanapun, dalam beberapa kes penggunaan, kita benar-benar perlu menggunakan keupayaan pengaturcaraan penuh JavaScript. Ini adalah apabila fungsi rendering --render berguna.

1. Pengenalan kepada fungsi render

Secara ringkasnya, dalam vue kami menggunakan sintaks HTML templat untuk membina halaman menggunakan fungsi render kami boleh menggunakan js bahasa untuk membinanya DOM. Oleh kerana vue ialah DOM maya, ia mesti diterjemahkan ke dalam fungsi VNode apabila mendapatkan templat Dengan menggunakan fungsi render untuk membina DOM, vue menghapuskan proses terjemahan.

Apabila menggunakan fungsi pemaparan untuk menerangkan DOM maya, vue menyediakan fungsi, iaitu alat yang diperlukan untuk membina DOM maya. Ia dinamakan createElement di laman web rasmi. Terdapat juga singkatan yang dipersetujui dipanggil h.

1.1 DOM Maya

Vue menjejaki cara ia mahu menukar DOM sebenar dengan mencipta DOM maya. Sila lihat baris kod ini dengan teliti:

return createElement('h1', this.blogTitle)

Apakah sebenarnya yang akan createElement kembali? Sebenarnya bukan elemen DOM sebenar. Namanya yang lebih tepat mungkin createNodeDescription, kerana maklumat yang terkandung di dalamnya akan memberitahu Vue jenis nod yang perlu dipaparkan pada halaman, termasuk maklumat perihalan nod anaknya. Kami menerangkan nod sedemikian sebagai "nod maya", dan selalunya menyingkatkannya sebagai "VNode". "DOM maya" ialah apa yang kami panggil keseluruhan pepohon VNode yang dibina daripada pepohon komponen Vue.

1.2 Parameter diterima oleh 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 Penggunaan fungsi render

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 Menyelam lebih dalam ke dalam objek data fungsi render

Sama seperti v-bind:class dan v-bind:style dalam sintaks templat akan dilayan secara khusus, mereka juga mempunyai medan peringkat atas yang sepadan dalam objek data VNode. Objek ini juga membenarkan anda untuk mengikat atribut HTML biasa, serta atribut DOM seperti innerHTML (ini akan mengatasi arahan 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 Kekangan

Semua VNod dalam pepohon komponen mestilah unik.

Ini bermakna fungsi pemaparan berikut tidak sah:

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

Jika anda benar-benar perlu mengulang elemen/komponen berkali-kali, anda boleh menggunakan fungsi kilang untuk mencapai .

Sebagai contoh, fungsi pemaparan berikut menghasilkan 20 perenggan yang sama dengan cara yang sah sepenuhnya:

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

2. Aplikasi fungsi pemaparan

2.1 Menghasilkan elemen ringkas

// 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 Tambah sub Tag

<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 Gunakan JavaScript dan bukannya fungsi templat

selagi Fungsi pemaparan Vue tidak menyediakan alternatif proprietari kepada operasi yang boleh dilakukan dengan mudah dalam JavaScript asli.

1. Dalam sintaks templat v-if dan 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>

pelaksanaan fungsi:

<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 🎜>

<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 Slot statik

Penggunaan ini.$slots

1. Komponen induk

2. Komponen anak

<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>

<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 Slot Skop

Penggunaan ini.$scopedSlots

1. Komponen induk

Komponen anak

<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>

<script>
export default {
  render:function(createElement) {
    let self = this
    return createElement(
      &#39;div&#39;,
      {
        style:{
          width:&#39;100%&#39;
        },
      },[
        self.$scopedSlots.default({
          text: this.myLayout.header
        })
      ]
    )
  },
  props:{
    myLayout:Object
  }
}
</script>

[Cadangan berkaitan:

tutorial video vuejs

, pembangunan bahagian hadapan web]

Atas ialah kandungan terperinci Perintah manakah yang digunakan oleh fungsi rendering vue?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!