Rumah > Artikel > hujung hadapan web > 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.
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.
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.
// @returns {VNode} createElement( // {String | Object | Function} // 一个 HTML 标签名、组件选项对象,或者 // resolve 了上述任何一种的一个 async 函数。必填项。 'div', // {Object} // 一个与模板中属性对应的数据对象。可选。 { // (详情见1.3) }, // {String | Array} // 子级虚拟节点 (VNodes),由 `createElement()` 构建而成, // 也可以使用字符串来生成“文本虚拟节点”。可选。 [ '先写一些文字', createElement('h1', '一则头条'), createElement(MyComponent, { props: { someProp: 'foobar' } }) ] )
render:(h) => { return h('div',{ // 给div绑定class属性 class: { child: true, more: false }, // 给div绑定样式 style:{ width:'200px', height:'200px', }, // 给div绑定点击事件 on: { click: () => { console.log('点击事件') } }, }) }
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('span', props.text) }, // 如果组件是其它组件的子组件,需为插槽指定名称 slot: 'name-of-slot', // 其它特殊顶层属性 key: 'myKey', ref: 'myRef', // 如果你在渲染函数中给多个元素都应用了相同的 ref 名, // 那么 `$refs.myRef` 会变成一个数组。 refInFor: true }
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') }) ) }
// app.vue (根组件) <template> <div id="app"> <myRender></myRender> </div> </template> <script> import myRender from './components/myRender' export default { components:{ myRender } } </script>
// myRender.vue <script> export default { render:(h) => { return h('div',{ class: { child: true, more: false }, attrs: { id: 'foo', name: 'child' }, style: { width:'100%', height:'200px', }, domProps: { innerHTML: '我是render渲染的子组件' } }) } } </script> <style scoped> .child { background: pink font-size 24px letter-spacing 2px } .more { background: red } </style>
<script> export default { render:(h) => { return h('div', { class: 'wrapper', attrs: { id: 'wrapper', }, style: { width:'100%', height:'250px' }, },[ h('h2','标题'), h('div',{ class: 'content', attrs: { id: 'content', }, style:{ width:'800px', height:'100px' }, domProps:{ innerHTML:'我是内容' } }) ] ) } } </script> <style scoped> .wrapper background: pink letter-spacing 2px .content margin 0 auto background: red color #ffffff font-size 24px </style>
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('ul', this.items.map(function (item) { return createElement('li', item.name) })) } else { return createElement('p', 'No items found.') } }, data(){ return{ items:[1,2,3] } } } </script>
2 🎜>
<script> export default { render:function(createElement) { var self = this return createElement('div',[ createElement('div',{class: 'showContent'},self.inputValue), createElement('input',{ class: 'content', domProps:{ value:self.inputValue }, on:{ input:function(event){ self.inputValue = event.target.value } } }) ] ) }, data(){ return{ inputValue:'' } }, 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>
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 './components/myRender' export default { components:{ myRender } } </script>
<script> export default { render:function(createElement) { let childHeader = this.$slots.header let childFooter = this.$slots.footer return createElement( 'div', { class: 'showContent', style:{ width:'100%' } }, [ createElement('div',{class:'childHeader'},childHeader), createElement('div',childFooter), ] ) }, } </script> <style scoped> .showContent letter-spacing 2px background-color red .childHeader color blue font-size 24px </style>
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 './components/myRender' export default { data(){ return{ layout:{ header:'头部', footer:'脚部' } } }, components:{ myRender } } </script>
<script> export default { render:function(createElement) { let self = this return createElement( 'div', { style:{ width:'100%' }, },[ 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!