vue中的render函数和过滤器

目录

一、render函数

二、过滤器

  全局注册过滤器

  局部注册过滤器

  过滤器使用

  串联使用

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

三、插件

  插件作用：

  开发插件：

  使用插件：

---

一、render函数

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

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

    
    
    
    


    

        
            hello World
        
    
    

浏览器运行结果如下：

 

二、过滤器

格式化文本，时间都可以使用过滤器，使用在双花括号内部，使用在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
        {{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)