Vue的组件,过滤器，自定义指令以及v-if

 <div class="app">

        <h1 v-show="false">我爱你</h1>

v-if是直接将dom删除了，在dom文档中已经找不到对应的dom，变成了注释

        <h1 v-if="false">我爱你</h1>

如果频繁使用 就使用v-show 可以节约性能开销

如果短暂使用，例如页面一开始加载的时候进行判断显示 优先使用v-if

实际开发中，使用v-if比较多

        <li v-for="(item,index) in arr">{{item}}</li>

    </div>

    <script src="/node_modules/vue/dist/vuejs"></script>

    <script>

        new Vue({

            el: 'app',

            data: {

                msg: 123,

                list: [1, 2, 3]

            },

            computed: {

                arr: function () {

                    return thislistfilter(r => r > 1)

                }

            },

            methods: {

            }

        })

    </script>

<div class="app">

        <child1></child1>

        <div><child-a/></div>

        <div><child-b/></div>

        <template id="childB">

            <div>

                <h1>我是程序员</h1>

                <h1>我是程序员</h1>

            </div>

        </template>

    </div>

    <script src="/node_modules/vue/dist/vueminjs"></script>

    <script>

        Vuecomponent('child1',{

            template:`<h1>我是child1</h1>`

        })

        Vuecomponent('childA',{

            template:`<h1>我是childA</h1>`

        })

        Vuecomponent('childB',{

            template:'#childB'

        })

        new Vue({

            el:'app'

        })

    </script>

<div class="app" v-cloak>

        <h1>{{'我爱张sir'|str('金牌厨师')}}</h1>

        <h1>{{'hello'|he}}</h1>

    </div>

    <script src="/node_modules/vue/dist/vuejs"></script>

    <script>

        Vuefilter('fn',function(v,s){

            consolelog(v);

            return v/ substring(0,vindexOf(':')) /+s

        })

        new Vue({

            el:'app',

            / 局部过滤器 /

            filters:{

                str(v,s){

                    return v+s

                },

                he(v){

                    return vsplit('')reverse()join('')

                }

            }

        })

当页面刷新的时候data中的数据还没有渲染出来，页面中就会显示原本写的插值语法，这时候就需要消除这个bug

在绑定的实例化对象的元素上上添加v-cloak 并在style样式中添加（只要前面加上v-都可以实现，随意命名，通常使用clock）

            display: none;

        }

    <div class="app">

        <input type="text" v-bg>

        <input type="text" v-focus="{background:'yellow'}">

        <div style="width: 100px;height: 100px;" v-bg></div>

        <p v-sty="{background:'pink',color:'yellow'}">我是程序员</p>

    </div>

    <script src="/node_modules/vue/dist/vuejs"></script>

    <script>

        Vuedirective('bg', function (el) {

            / 回调的第一个参数就是元素本身 /

            consolelog(el);

            elstylebackground = 'red'

        })

        / 全局自定义指令 写全方式 /

        Vuedirective('focus', {

            / 当绑定元素插入到DOM中 /

            inserted: function (el, bind) {

                elfocus();

                consolelog(bind);

                elstylebackground = bindvaluebackground

            }

        })

        new Vue({

            el: 'app',

            / 局部的自定义指令 要加s /

            directives: {

                sty: {

                    inserted (el, bind) {

                        elstylebackground = bindvaluebackground;

                        elstylecolor = bindvaluecolor

                    }

                }

            }

        })

Vue 可以通过全局注册来实现全局组件的功能，比如有这么一个组件 exampleComponent ，如果想把它注册成全局组件的话，只需要在引入 Vue 的文件里调用 Vuecomponent('example-component',exampleComponent) 来实现，又或者如同大部分 Vue 的 ui框架 那样，直接调用 Vueuse(/ 组件 /) 来实现。

Vueuse() 方法比 Vuecomponent() 要复杂些，其大致用法如下：

这两种全局注册组件的方法在注册成功后都是通过使用标签名如 <example-component></example-component> 来使用的。使用过 element 、 iview 等UI框架的朋友肯定会注意到这么一种比较特殊的组件，如 loading 和 message ，这类组件的使用场景大部分是在js执行环境时要用到，比如请求发送前要出现一个 loading 遮罩层防止用户重复请求，请求成功后这个遮罩层又要消失掉。这种需求若是也用预先在 html 中放置对应组件标签的形式的话，未免显得太过麻烦。所以，为了解决这个问题，有这么一种通过调用 Vue 原型方法来调用组件的方式。如 element 中 this$message('这是一条消息提示'); 这样调用后在页面上显示一条消息提示的js方法。

不管什么组件，其本质都是 *** 作DOM，只不过因为直接原生 *** 作 DOM 会对浏览器的开销比较大， Vue 里面使用了一种虚拟dom的技术来尽可能的减少这种开销，而且 *** 作dom虽然是一种很直观的改变显示效果的形式，但 *** 作太过于繁琐。种种原因， Vue 的基本思想就是 数据驱动DOM ，尽量不要去亲手修改 DOM 。但凡事无绝对，上面所说的就是一种不 *** 作 DOM 就难以绕开的一种便捷功能的实现。

那如何实现全局js方法调用组件的功能呢？

要实现这个目的，必须先了解两个东西： vm$mount 、 Vueextend() 。

翻看官方文档，找出了这两者的用法如下：

上面两个东西，简单理解就是用 Vue 自身的方法定义一个 html 标签，然后又用 Vue 的方法找到某个特定id的标签，将其内容替换掉。

那么用这两个特性，我们来创建一个能够自定义入参内容的 fullName 组件，它的功能是调用时，页面出现一个半透明遮罩层，页面中间显示入参内容。

步骤如下：

关于VUE3的使用，文档没看完就开始了一个项目，一路走来，见招拆招求百度。

关于全局方法的使用，找了又找，求了又求，依然无解，所以写写心得，我启用了10年前刚上班时候的window对象哇哈哈哈哈，学习之余写感想，欢迎砸锅！

举例：页面我用了vant3组件，通过Toast、Notify、Dialog等举例

无奈人家不支持this啊

但是proxy 只适用于调试,线上会出问题! 因为getCurrentInstance()的返回类型存在null

在mainjs中

在vue中使用

一、自定义指令

1在mainjs中写入

2使用方法

或者

1在mainjs中写入

2使用方法

二、过滤器 （全局数据，不适用于input 的v-model）

1在mainjs中注册

二、在assets/js中新建 filtersjs

三、使用方法

三、函数 保留两位小数，不够自动用零补齐

1在mainjs中引入注册

二、在assets/js中新建 公共js文件filtersjs

三、使用方法

以上就是关于Vue的组件,过滤器，自定义指令以及v-if全部的内容，包括:Vue的组件,过滤器，自定义指令以及v-if、VUE中如何构建js调用的全局组件、vue3中全局方法的使用【真·VUE3】等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！