Vue のフィルターとカスタム ディレクティブ

フィルター フィルター

   定义 : 对要显示的数据进行特定格式化后再显示
    (使用于一些简单逻辑的处理,比如金额,手机号掩码,时间格式转换等)
    语法:
        1 注册过滤器: 全局过滤器Vue.filter(name,callback(){}) 
        或局部过滤器(当前实例定义的过滤器只能当前实例使用) new Vue(filters:{})
    注意:
        1 过滤器也可以接受额外参数 多个过滤器之间也可以相互串联
        2 过滤器并没有改变原本的数据 只是产生新的对应的数据展示

ここに画像の説明を挿入
ページ効果:
ここに画像の説明を挿入

上記で定義されたフィルターは、単一の vue インスタンスで定義されます。これはローカル フィルターであり、現在フィルターを定義している vue インスタンスでのみ使用できます。ページに複数の vue インスタンスがある場合、他の vue インスタンスは話すことができません定義したフィルタを呼び出す

ページで 2 番目のインスタンス vms を定義し、
ここに画像の説明を挿入
ここに画像の説明を挿入
vm インスタンスで定義されたフィルターを呼び出して、その効果を確認します。この
ここに画像の説明を挿入
ここに画像の説明を挿入
ページは、vm で定義された 3 つのフィルターを解決できないことを示しています。
複数のフィルタを使用します。どちらもフィルタを共有でき、グローバル フィルタを定義する必要があります

ここに画像の説明を挿入
ここに画像の説明を挿入

カスタム命令ディレクティブ

最初の書き方
ここに画像の説明を挿入

ここに画像の説明を挿入

2番目の書き方:
ここに画像の説明を挿入

ここに画像の説明を挿入
要約
定義構文:
(1) ローカル ディレクティブとグローバル ディレクティブ。グローバル ディレクティブとローカル ディレクティブの形式は基本的にここのフィルター定義の形式と同じであり、グローバル ディレクティブはここではローカルに表示されません: new Vue({directives:
{ディレクティブ名: 設定オブジェクト }}) または new Vue({directives(){}})
グローバル: Vue.directive(ディレクティブ, 設定オブジェクト)
設定オブジェクトで一般的に使用される 3 つのコールバック
(1) バインド ディレクティブが正常にバインドされると呼び出されます
(2) 挿入された命令が配置されている要素がページに挿入されるときに呼び出されます(
3) 更新命令が配置されているテンプレート構造が再解析されるときに呼び出されます

(1) 命令定義は v- を追加しません(2)命令
語が複数語の場合 ケバブケースの命名法(つまり、単語間に - を使用)を使用する キャメルケースの命名法(ハンプ命名)を使用しない

おすすめ

転載: blog.csdn.net/m0_51406695/article/details/125658709