vue中的render函数和过滤器

最新推荐文章于 2024-07-19 07:15:00 发布
最新推荐文章于 2024-07-19 07:15:00 发布
阅读量634 收藏 10
点赞数 16
文章标签： vue.js 前端 javascript 前端框架 ecmascript es6
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/l12345666777/article/details/135209347
版权

目录

一、render函数

二、过滤器

  全局注册过滤器

  局部注册过滤器

  过滤器使用

  串联使用

  过滤器js函数，可以传递参数

三、插件

  插件作用：

  开发插件：

  使用插件：

一、render函数

需要js完全编程能力，比模板更接近编译器，编译模板，使用render函数我们可以用js语言来构建DOM，因为vue是虚拟DOM，所以在拿到template模板时也要转译成VNode的函数，而用render函数构建DOM，vue就免去了转译的过程。

render(createElement){
    return createElement(标签名称,{},子节点数组)
  }

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <my-a :level="1">
            hello World
        </my-a>
    </div>
    <script>
        let myA = {
            props:['level'],
            data() {
                return {
                    msg:'myA组件',
                    arrs:[
                        {id:1,name:'terry'},
                        {id:2,name:'larry'},
                        {id:3,name:'ronda'}
                    ]
                }
            },
            // JSX Javascript + xml
            // let a = <div></div>

            // template:`
            //     <div>
            //         myA组件
            //         <h1 v-if='level===1'>
            //             <slot></slot>
            //         <h1>
            //         <h2 v-if='level===2'>
            //             <slot></slot>
            //         <h2>
            //         <h3 v-if='level===3'>
            //             <slot></slot>
            //         <h3>
            //     </div>
            // `
            render(createElement){
                // 创建节点描述   createElement(html标签,{元素属性,配置},[子节点数组])
                // return createElement('h'+this.level,{},[this.$slots.default])
                // return createElement('div',{},this.msg)
                let lis = this.arrs.map(item=>{
                    return createElement('li',{},item.name)
                })

                return createElement('div',{
                    class:['active','error'],
                    style:{
                        color:'pink',
                        fontSize:'28px'
                    }
                },[this.$slots.default,...lis])
            }
        }
        new Vue({
            el:"#app",
            components:{
                'my-a':myA
            },
            data:{

            },
            methods: {
                
            },
        })
    </script>
</body>
</html>

浏览器运行结果如下：

 

二、过滤器

格式化文本，时间都可以使用过滤器，使用在双花括号内部，使用在v-bind表达式

  全局注册过滤器
        // 全局注册过滤器 filter(过滤器名称,格式化函数)
        Vue.filter('capitalize', function (val,a,b) {
            console.log(val,a,b,'需要格式化文本');
            return val.charAt(0).toUpperCase() + val.slice(1)
        })
  局部注册过滤器
        new Vue({
            el: "#app",
            // 局部注册过滤器
            filters: {
                'fmtDate'(val){
                    return moment(val).format('YYYY-MMMM-Do HH:mm:ss a')
                },
                'lowerCase'(val){
                    return val.charAt(0).toLowerCase() + val.slice(1)
                }
            },
            data: {
                msg: 'hello vue',
                time:new Date().getTime()
            },
            methods: {

            },
        })
  过滤器使用
        <!-- 过滤器： 常见文本格式化 时间格式化 -->
        <!-- 使用： 格式化文本 | 过滤器名称 -->
        {{msg | capitalize}}
  串联使用
        <!-- 过滤器串联使用 -->
        {{msg | capitalize | lowerCase}}
        <div v-bind:title="msg | capitalize">我是div</div>
        {{time | fmtDate}}
  过滤器js函数，可以传递参数
        <!-- 使用过滤器的同时传递参数 -->
        {{msg | capitalize('hello',{name:'terry'})}}

三、插件

        添加Vue的全局功能,开发插件必须暴露install方法

  插件作用：

        为Vue添加全局功能(指令、过滤器、全局方法、实例方法、第三方库)

  开发插件：
        // 开发插件 ----> 插件暴露install方法
        let myPlugin = {
            install(Vue,options){
                // console.log(Vue,options);
                // Vue构造函数全局方法 静态方法
                Vue.Method = function(val){
                    alert(val)
                }
                // 全局注册自定义指令
                Vue.directive('focus',{
                    inserted(el){
                        el.focus()
                    }
                })
                // 全局注册过滤器
                Vue.filter('capitaliza',function(val){
                    return val.charAt(0).toUpperCase() + val.slice(1)
                })
                // 注册实例方法
                Vue.prototype.$message = function(val){
                    alert(val)
                }
            }
        }

  使用插件：
        // 使用插件 ----> 在new Vue之前调用
        Vue.use(myPlugin)

从明天开始好好学习前端
关注
Vue——render函数
RainGirl_的博客
04-08 1319
render函数的知识点比较多，作为单独的一篇； 首先，render函数返回VNode，即虚拟DOM节点；render函数接受两个参数，一个是createElement函数，该函数负责创建VNode，一个是context，该参数在函数组件中可用，用来传递函数组件的上下文作环境；第二是createElement函数接收的参数；第三是函数组件中的render函数； ...
Vue render函数
weixin_50926750的博客
04-09 1189
一般Vue组件HTML代码都是写在template模板里 <template> <span>template123</span> </template> <script> export default { }; </script> <style></style> 通过Vue提供的render函数可以不写templa标签也能实现上面的效果 <script> ex
vue中render函数、过滤器和动态组件的使用方法
weixin_55269913的博客
12-13 501
在 Vue.js 中，render函数是一个高级 API，允许你使用底层的虚拟 DOM 来创建和更新视图。它是更简洁和灵活的方式，但是，对于初学者来说，它可能比使用模板更难理解。首先，要了解 Vue 的核心是一个基于虚拟 DOM 的库。当你的组件状态更改时，Vue 会创建一个虚拟 DOM 来表示你的视图。然后，这个虚拟 DOM 会与实际的 DOM 进行比较，找出差异，并更新只有那些差异。render函数允许你直接操作这个虚拟 DOM。这是一个简单的render在这个例子中，是一个用于创建虚拟节点的函数。
Vue.js全局API——filter
SilentLand的博客
05-24 460
情景 将后台存的数字订单状态格式化显示在前端 使用filter 新建filters文件 order.js 写处理订单的filter方法 export default { setOrderStatus (status) { switch (status) { case 1: return '待付款' case 2: return '待发货' case 3: ret
Vue随笔【render函数的使用】
最新发布
Web人
07-19 412
vue中render函数的使用
拦截器
qq_41083450的博客
04-09 107
使用拦截器对请求进行拦截处理 handle()方法执行前执行applyPreHandle()，常用于实现权限 handle()方法执行后执行applyPostHandle()，常用于对请求域中的属性或视图（modelAndView）做出修改 render()方法执行后（响应后）执行AfterCompletion()，常用于释放资源 1、doService拦截请求 2、doDispatch() 3、...
Vue中过滤器filters的使用
ct5211314的博客
06-23 486
Vue.js 允许你自定义过滤器，可被用于一些常见的文本格式化。过滤器可以用在两个地方：双花括号插值和 表达式 (后者从 2.1.0+ 开始支持)。过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符号指示：到输入值时展示当前值加10后的数据...
vue的render函数使用方法
weixin_42889916的博客
06-02 2958
用render函数的好处是复杂的逻辑不利于template的维护，此时可以用到render函数。
【Vue】render函数使用和详解
热门推荐
在这里你大概率会有所收获，欢迎指错||纠正||建议||水评+点赞&&评论&&关注&&转发
05-19 2万+
前言 在平时编程时，大部分是通过template来创建html。但是在一些特殊的情况下，使用template方式时，就无法很好的满足需求，在这个时候就需要 通过JavaScript 的编程能力来进行操作。此时，就到了render函数展示拳脚去时候了。 render的作用 在官网的这里示例中，使用组件，将相同的内容通过solt放进h1-h6的标签中，在使用传统方式时，代码不仅冗长，而且在每一个级别的标题中重复书写了 ，在要插入锚点元素时还要再次重复。而使用render函数后，代码就精简了很多。 Vue.com
vue工程：过滤器filters(文本格式化)使用、文件内复用，2024前端开发社招面试解答之性能优化
m0_57502067的博客
04-10 600
面试前要精心做好准备，简历上写的知识点和原理都需要准备好，项目上多想想难点和亮点，这是面试时能和别人不一样的地方。还有就是表现出自己的谦虚好学，以及对于未来持续进阶的规划，企业招人更偏爱稳定的人。万事开头难，但是程序员这一条路坚持几年后发展空间还是非常大的，一切重在坚持。为了帮助大家更好更高效的准备面试，特别整理了《前端工程师面试手册》电子稿文件。前端面试题汇总JavaScript性能linux前端资料汇总。
vue 的 render 函数的用法：new Vue({ render: h =＞ h(App), }).$mount(‘#app‘)
南北极之间
01-12 8026
render函数的作用 render函数是vue通过js渲染dom结构的函数createElement，约定可以简写为h 官方文档中是这样的，createElement 是 Vue.js 里面的 函数， 这个函数的作用就是生成一个 VNode节点， render 函数得到这个 VNode 节点之后， 返回给 Vue.js 的 mount 函数，渲染成真实 DOM 节点，并挂载到根节点上。 render 函数跟template一样都是创建 html 模板的，但是有些场景中用template实现起
Vue中render函数的使用方法
08-28
本篇文章主要介绍了Vue中render函数的使用方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
vue-cli 3 全局过滤器的实例代码详解
12-12
在 Vue 的早期版本（如 Vue 1.x）中，框架内置了一些基础的过滤器，例如 `| capitalize` 和 `| date` 等，但在 Vue 2.x 及更高版本中，这些内置过滤器被移除，以减少核心库的大小和鼓励开发者自定义需求。...
Vue封装全局过滤器Filters的步骤
10-14
本篇内容将详细介绍在Vue项目中如何封装全局过滤器，以及相关的步骤和注意事项。 ### Vue封装全局过滤器的步骤 #### 1. 定义过滤器 定义全局过滤器的第一步是在项目中创建一个专门用于存放过滤器代码的目录。通常...
vue中各选项及钩子函数执行顺序详解
10-18
不过在Vue的官方文档中，过滤器的调用时机并未明确说明，因此这个行为可能存在变化。 - `beforeUpdate`: 在数据变化后，虚拟DOM重新渲染和打补丁之前被调用。在这个钩子函数中，你可以执行依赖于DOM的操作。然而在...
Vue-插槽、自定义指令、render渲染函数、过滤器、插件
weixin_45753087的博客
10-27 361
简单前端知识
学习vue源码（10）手写render渲染函数
weixin_43964148的博客
06-04 780
compile 部分已经讲完了 （compile部分分为 解析器 + 优化器+ 代码生成器）， 终于走到了 render，今天就来给自己记录下渲染三部曲的第二部render， （渲染三部曲= compile + render生成Vnode + 将Vnode通过 update 挂载到 页面上）， update里 有一系列 diff操作。 咦，render 内容不多的 噔噔噔噔 render 的作用大家应该清楚 就是 执行 compile 生成的 render函数，然后得到返回的 vnode 节点 比如现在存在
Vue 渲染函数（render）的使用方法及使用场景总结
weixin_51080551的博客
07-16 2060
vue 渲染函数
Vue.js 2.0实战：Render函数解析与应用
"陈陆扬著的《Vue.js》书籍片段，关于Render函数和Vue.js的使用" Vue.js 是一种流行的前端JavaScript框架，以其简洁的API和高效的数据绑定机制深受开发者喜爱。在书中，作者陈陆扬提到，在Vue.js中，通常我们会使用...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值