vue Render函数进阶

最新推荐文章于 2024-03-05 10:04:33 发布
最新推荐文章于 2024-03-05 10:04:33 发布
阅读量3.7w 收藏 22
点赞数 4
分类专栏： vue 文章标签： vue render
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wngzhem/article/details/54291024
版权

会使用基本的Render函数后，就会想，这怎么用 v-for/v-if/v-model;我写个vue Render函数进阶

首先是v-if 的转化使用全局组件的v 值决定组件渲染的状态，对实例中传递的props的“nnum”值得控制可以自如的切换两种状态显示。这样就是和v-if 一样使用组件了

 <div id="app">
        <mycom :v="nnum">
            <div slot="slot2">hahahhah</div>
            <div slot="slot1">ggggggggggggg</div>
        </mycom>
    </div>
    <script>
        Vue.component('mycom',{
            render:function(createElement){
                var s=this;
                if(this.v==1){
                    return createElement('div',
                       {
                        domProps:{innerHTML:'component n='+this.n}
                       })
                }else{

                    return createElement('div',
                        [this.$slots.slot1,this.$slots.slot2])
                }
            },
            props:{
                v:{
                    type:Number,
                    default:0
                },
                n:{
                    default:'hello'
                }
            }
        });
        var app=new Vue({
            el:'#app',
            data:{
                nnum:1
            }
        })
v-for 的使用需要需要使用到map 

 <div id="app">
        <mycom :v="nnum" :ar="arr">
            <div slot="slot2">hahahhah</div>
            <div slot="slot1">ggggggggggggg</div>
        </mycom>
    </div>
    <script>
        Vue.component('mycom',{
            render:function(createElement){
                if(this.v==1){
                    return createElement('div',
                            this.ar.map(function(item){
                                return createElement('li',
                                    {
                                        domProps:{
                                            innerHTML:item
                                        }
                                    })
                            })
                       )
                }else{

                    return createElement('div',
                        [this.$slots.slot1,this.$slots.slot2])
                }
            },
            props:{
                v:{
                    type:Number,
                    default:0
                },
                n:{
                    default:'hello'
                },
                ar:{
                    type:Array,
                    default:function(){ return [1,23,4,5,6,55,65]}
                }

            }
        });
        var app=new Vue({
            el:'#app',
            data:{
                nnum:1,
                arr:[1,2,3,4,5,6,7,8]
            }
        })
    </script>
    </body>

只有map方法才能检测改变，其他的方法不能根据数据的改变能改变相应的状态

下的例子中的arr数组   依靠 apply的方法来实现的就不能够检测this.ar 的变换来重新计算

return createElement('div',
                            Array.apply(null,this.ar.map(function(item){
                                return createElement('li',
                                    {
                                        domProps:{
                                            innerHTML:'item'
                                        }
                                    })
                            }))

<body>
    <div id="app">
        <mycom :v="nnum" :ar="arr">
            <div slot="slot2">hahahhah</div>
            <div slot="slot1">ggggggggggggg</div>
        </mycom>
    </div>
    <script>
        Vue.component('mycom',{
            render:function(createElement){
                if(this.v==1){
                    return createElement('div',
                            this.ar.map(function(item){
                                return createElement('li',
                                    {
                                        domProps:{
                                            innerHTML:item
                                        }
                                    })
                            })
                       )
                }else{
                     return createElement('div',
                            Array.apply(null,this.ar.map(function(item){
                                return createElement('li',
                                    {
                                        domProps:{
                                            innerHTML:'item'
                                        }
                                    })
                            }))
                       )
                }
            },
            props:{
                v:{
                    type:Number,
                    default:0
                },
                n:{
                    default:'hello'
                },
                ar:{
                    type:Array,
                    default:function(){ return [1,23,4,5,6,55,65]}
                }

            }
        });
        var app=new Vue({
            el:'#app',
            data:{
                nnum:2,
                arr:[1,2,3,4,5,6,7,8]
            }
        })
    </script>
    </body>


v-model 使用domProps来实现双向绑定

使用对value：赋值可以将数据绑定给 input 的默认值，但是对input 的修改并不能传递给vue  这涉及到组件的通信问题，

所以想实现双向绑定，只能自己写事件来出发  vue shu'j的传递

domProps:{
                                            value:self.v
                                        }

<body>
    <div id="app">
        <mycom :v="nnum" :ar="arr">
            <div slot="slot2">hahahhah</div>
            <div slot="slot1">ggggggggggggg</div>
        </mycom>
        <div>{{nnum}}</div>
    </div>
    <script>
        Vue.component('mycom',{
            render:function(createElement){
                var self=this;
                var inp=createElement('input',
                                    {
                                        domProps:{
                                            value:self.v
                                        }
                                    });
                    return createElement('div',[inp])

                },
            props:{
                v:{
                    type:Number,
                    default:0
                },
                n:{
                    default:'hello'
                },
                ar:{
                    type:Array,
                    default:function(){ return [1,23,4,5,6,55,65]}
                }

            }
        });
        var app=new Vue({
            el:'#app',
            data:{
                nnum:100,
                arr:[1,2,3,4,5,6,7,8]
            }
        })
    </script>
    </body>
通过input触发undateValue来更新 app中的nnum 值（差点没转过弯来，render过于复杂后，真的是自己找罪受） 
 <div id="app">
        <mycom :v="nnum" :ar="arr" @input="updateValue">

        </mycom>
        <div>{{nnum}}</div>
    </div>
    <script>
        Vue.component('mycom',{
            render:function(createElement){
                var self=this;
                var inp=createElement('input',
                                    {
                                        domProps:{
                                            value:self.v
                                        },
                                        on:{
                                          input:function(event){
                                            self.$emit('input',event.target.value)

                                          }
                                        }
                                    });
                    return createElement('div',[inp])

                },
            props:{
                v:{
                    type:Number,
                    default:0
                },
                n:{
                    default:'hello'
                },
                ar:{
                    type:Array,
                    default:function(){ return [1,23,4,5,6,55,65]}
                }

            },
            methods:{
                update:function(){

                }
            }
        });
        var app=new Vue({
            el:'#app',
            data:{
                nnum:100,
                arr:[1,2,3,4,5,6,7,8]
            },
            methods:{
                updateValue:function(value){
                    this.nnum=parseFloat(value);
                }
            }
        })

    </script>
    </body>


v折耳
关注
  • 4
    点赞
  • 踩
  • 22
    收藏
    觉得还不错? 一键收藏
  • 6
    评论
专栏目录
前端关于Recat面试题(四)
Jojorain的博客
04-14 391
60.如果在构造函数中使用 setState() 会发生什么? 当你使用 setState() 时，除了设置状态对象之外，React 还会重新渲染组件及其所有的子组件。你会得到这样的错误：Can only update a mounted or mounting component.。因此我们需要在构造函数中使用 this.state 初始化状态。 61.索引作为键的影响是什么? Keys 应该是...
简单理解vue中Props属性
09-01
主要帮助大家简单的理解vue中Props属性,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
深入理解vue Render函数
12-29
最近在学习vue，正好今日留个笔记，我自己还在摸索学习中，现整理出来以作记录。 会使用基本的Render函数后，就会想，这怎么用 v-for/v-if/v-model;我写个vue Render函数进阶 首先是v-if 的转化使用全局组件的v 值决定组件渲染的状态，对实例中传递的props的“nnum”值得控制可以自如的切换两种状态显示。这样就是和v-if 一样使用组件了 <div id=app> <mycom v=nnum> <div slot=slot2>hahahhah</div> <div slot=slot1>gggggggg
JavaScript之DOM对象
m0_51892736的博客
08-29 1269
JavaScript之DOM对象
Vue入门教程
最新发布
weixin_71366486的博客
03-05 807
<title>Vue的自定义指令(函数式)</title>-- 导入 vue.js --></style></span></h2><h2>放大10倍的n值是: <span v-big="n">点我n+1
Vue3获取dom元素方法 和 composition API 的使用场景 和 父传子使用props传值
weixin_43488503的博客
10-14 525
Vue3获取dom元素方法 和 composition API 的使用场景 和 父传子使用props传值
React: JSX 、虚拟 DOM、组件配置（props、state、PropTypes、createContext、props.children）
Michael是个半路程序员
07-27 490
是验证props传递的值的一种方法，属性名PropsTypes（string,number,boolean,function,object,array,arrayOf,node,element）是异步的，如果碰到更高优先级的响应过载，这个减少按钮的点击响应还在队列中等待，那么用户可能点了3次，但是最后数值只减少了1。开发人员只需要返回需要的DOM，React负责转换，且性能有优化，速度很快（高效的差异算法、更新子树、批量更新DOM）是一个JS对象，至少有一个。.........
13.Vue - ref属性、props配置、mixin混入、插件、scoped样式
weixin_51351637的博客
09-08 942
1.被用来给元素或子组件注册引用信息（id的替代者）2.应用在html标签上获取的是真实DOM元素，应用在组件标签上是组件实例对象（vc）3.使用方式：打标识： .... 或获取：this.$refs.xxx具体看下图代码。
vue知识点二
weixin_43725034的博客
10-24 124
1
Vue之数据对象
玉案轩窗的博客
07-20 3348
前言 本篇文章旨在学习Vue对于相关属性或特性的处理，同时学习HTML特性和DOM属性的区别和联系，实际上涉及到以下内容： HTML特性和DOM属性之间的联系与区别 Vue的数据对象中涉及的HTML特性、DOM属性、组件prop、特殊特性 Vue中对于4种属性或特性处理所涉及的相关逻辑 HTML特性和DOM属性 实际上对于HTML特性和DOM属性，之前对于其的理解是相同的东西，实际上它们是不同...
Vue~props、嵌套生命周期、组件边界处理、动画、DOM加载
thisCheng的博客
06-11 616
Vue~props、嵌套生命周期、组件边界处理、动画、DOM加载
vue3的渲染dom的实现
m0_62273246的博客
01-08 587
const h = (tag, props, children) => { return { tag, props, children } } const mount = (vnode, container) => { const el = vnode.el = document.createElement(vnode.tag); if(vnode.props) { for(const key .
浅谈Vue render函数在ElementUi中的应用
10-18
今天小编就为大家分享一篇浅谈Vue render函数在ElementUi中的应用，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
Vue Render函数创建DOM节点代码实例
10-15
主要介绍了Vue Render函数创建DOM节点代码实例,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
Vue中render函数的使用方法
12-29
render函数 vue通过 template 来创建你的 HTML。但是，在特殊情况下，这种写死的模式无法满足需求，必须需要js的编程能力。此时，需要用render来创建HTML。 什么情况下适合使用render函数 在一次封装一套通用按钮...
vue template 中 slot-scope/scope 的使用
热门推荐
wngzhem的博客
06-05 13万+
在vue 2.5.0+ 中slot-scope替代了 scope template 的使用情形为，我们已经封装好一个组建，预留了插槽，使用 的插槽 首先 我们的创建一个组建 组建很简单有一个 slot,slot有两个属性 a=123,b=msg &amp;amp;lt;template&amp;amp;gt; &amp;amp;lt;div&amp;amp;gt; &amp;amp;lt;div&amp;amp;gt;下面是一个
vue 基础 filter 过滤器使用
wngzhem的博客
11-14 5万+
vue 对数据提供一个  filter 的处理器，虽然命名为  filter  ，但是我觉得叫做数据处理器更体贴。用以在不改变的data 的情况下  输出前段需要的格式数据。 基本调用方法： {{ message | filterFun }} new Vue({ // ... filters: { filterFun: function (value) { ret
vue component 组件使用
wngzhem的博客
11-28 4万+
component 使用
vue render函数
08-22
Vue 的 render 函数是 Vue.js 中一个非常重要的概念。它是用来描述组件如何渲染的函数。在 Vue 中，我们可以使用模板语法来编写组件的渲染逻辑，也可以使用 render 函数来编写。 使用 render 函数，你可以直接返回一个虚拟 DOM 对象，描述组件的结构和行为。这个函数接收一个参数，通常命名为 h（代表 createElement），它是一个用于创建 VNode（虚拟节点）的函数。 在 render 函数中，你可以通过调用 h 函数来创建 VNode，然后返回一个或多个 VNode 组成的树形结构。VNode 是对真实 DOM 的一种抽象表示，它包含了节点的标签名、属性、子节点等信息。 以下是一个简单的例子，演示了如何使用 render 函数创建一个简单的 Vue 组件： ```javascript // 定义一个组件 const MyComponent = { render(h) { return h('div', { class: 'container' }, [ h('h1', {}, 'Hello, Vue!'), h('p', {}, 'This is a Vue component.') ]) } } // 使用组件 new Vue({ el: '#app', render: h => h(MyComponent) }) ``` 这个例子中，我们定义了一个名为 MyComponent 的组件，在 render 函数中返回了一个包含 h1 和 p 标签的 div 元素。在 new Vue 的时候，我们将 render 函数指定为 MyComponent，从而将组件渲染到具有 id 为 app 的元素中。 通过使用 render 函数，你可以更灵活地控制组件的渲染逻辑，实现更高级的功能。它提供了一种编程式的方式来构建组件，而不仅仅局限于模板语法。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 6
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值