フィルター、カスタム命令、コンポーネントの登録と使用シナリオ

プログラミング 2023-09-06 21:45:17 訪問数: null

ローカル登録とグローバル登録の2種類に分かれるのでまとめて書きます。

3 つのローカル登録 (s 付き)とグローバル登録 (s なし)で使用されるキーワードは類似していることに注意してください。区別に注意してください。

さらに、フィルターのグローバル登録、カスタム命令のグローバル登録、およびコンポーネントのグローバル登録は、Vue インスタンスの前に記述する必要があります。詳細については、https :  //blog.csdn.net/weixin_55992854/article/details/119107461を参照してください。

目次

フィルター

部分登録

グローバル登録

拡大する

      1. フィルターはパラメーターを渡すことができます

      2. フィルターは直列で使用可能

カスタムディレクティブ

部分登録

グローバル登録

コンポーネント

コンポーネントとは何ですか

コンポーネントの機能

コンポーネントの分類と使用方法

グローバル登録

部分登録

フィルター

  • 役割: データ形式の処理

  • 使用する場所:二重中括弧補間と v-bind 式(後者は 2.1.0 以降でサポートされます)。

  • 分類: ローカル登録とグローバル登録

部分登録

  1. Vue インスタンス オブジェクトのオプションでフィルター フィルターを構成します: {}

  2. フィルタ名: (フィルタリングされるデータ)=>{フィルタリングされた結果を返す}

  3. ビューでフィルターを使用します: { {フィルターされたデータ | フィルター名}

<body>
    <div id="app">
        <p>处理前：{
   
   {msg}}</p>
        <!-- 3. 调用过滤器 -->
        <p>处理后：{
   
   {msg | toUpper}}</p>
    </div>
    <div id="aaa">
        <p>处理前：{
   
   {msg}}</p>
        <p>处理后：{
   
   {msg | toUpper}}</p>
    </div>
</body>

<script src="./vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            msg: 'kfc'
        },
        // 1. 设置vue实例的过滤器filters选项
        filters: {
            toUpper: function(v) {
                // 2. 在过滤器的方法中操作数据并返回结果
                return v.toUpperCase();
            }
        }
    });
</script>

注: ローカルに登録されたフィルターは、現在の Vue インスタンス オブジェクトにのみ適用されます。

グローバル登録

  1. Vue インスタンスを作成する前に、グローバル フィルター Vue.filter() を定義します。

  2. Vue.filter('フィルター名', (フィルター対象のデータ) => {データ処理結果を返す});

  3. { {data | filter name}} または v-bindを介してビューで フィルターを使用する

<body>
    <div id="app">
        <p>处理前：{
   
   {msg}}</p>
        <!-- 3. 调用过滤器: (msg会自动传入到toUpper中)-->
        <p>处理后：{
   
   {msg | toUpper}}</p>
    </div>
    <div id="aaa">
        <p>处理前：{
   
   {msg}}</p>
        <p>处理后：{
   
   {msg | toUpper}}</p>
    </div>
</body>

<script src="./vue.js"></script>
<script>
    // 1. 定义全局过滤器
    Vue.filter('toUpper', (value) => {
        console.log(value);
        // 2. 操作数据并返回
        value = value.toLowerCase();
        console.log(value);
        return value;
    });

    new Vue({
        el: '#app',
        data: {
            msg: 'hello'
        },
    });
    new Vue({
        el: '#aaa',
        data: {
            msg: 'hello'
        },
    });
</script>

注: グローバルに登録されたフィルターは、さまざまな Vue インスタンス オブジェクトで使用できます。

拡大する

      1. フィルターはパラメーターを渡すことができます

<div id="app">
    {
   
   {count | toD("元")}}
</div>

<script src="../js/vue.js"></script>
<script>
    //(v,y)中v指的是被处理的数据count,y指的是自己传入的参数("元")
    Vue.filter("toD", (v, y) => {
        console.log(v);
        console.log(y);
        return "$" + v + y;
    });


    new Vue({
        el: "#app",
        data: {
            count: 100,
        },
    });
</script>

      2. フィルターは直列で使用可能

<div id="app">
    <!-- 
        2.串联使用 
        {
   
   {被处理的数据 | 过滤器A | 过滤器B}}
        注意: 过滤器A处理的是count
        过滤器B处理的是过滤器A所返回的结果
    -->
    {
   
   {count | A | C("元")}}
</div>

<script src="../js/vue.js"></script>
<script>

    Vue.filter("A", (v) => {
        return "$" + v;
    });
    Vue.filter("C", (v, y) => {
        console.log(v);//$100
        return v + y;
    });

    new Vue({
        el: "#app",
        data: {
            count: 100,
        },
    });
</script>

カスタムディレクティブ

  • 使用シナリオ: 通常の DOM 要素を操作する必要があります。この時点では、カスタム命令が使用されます。

  • 分類: グローバル登録とローカル登録

部分登録

  1. Vue インスタンス オブジェクトのオプションでカスタム命令ディレクティブを設定します。{}

  2. ディレクティブ:{'命令のコア名':{ 挿入: (命令使用時の DOM オブジェクト) => {特定の DOM 操作} }}

  3. タグを介してビューでディレクティブを使用する

<div id="app">
    <!-- 3. 在视图中通过标签去使用指令 -->
    <input v-focus type="text">
</div>

<script src="./vue.js"></script>
<script>
    new Vue({
        el: '#app',
        // 1. 在vm对象的选项中设置自定义指令 directives:{}
        directives: {
            // 2. directives:{'指令的核心名称':{ inserted: (使用指令时的DOM对象) => { 具体的DOM操作 } }}
            focus: {
                // 指令的定义
                inserted: function(el) {
                    el.focus();
                }
            }
        }
    });
</script>

注: このオプションは、このオプションが配置されている vue インスタンスによって管理されるビューでのみ使用できます。

グローバル登録

  1. Vue インスタンスを作成する前に、グローバル カスタム ディレクティブ Vue.directive() を定義します。

  2. Vue.directive('ディレクティブ名', { 挿入: (ディレクティブを使用する DOM オブジェクト) => { 特定の DOM 操作} } );

  3. コマンドを使用するには、ビューで「v-custom コマンド名」を使用します。

<div id="app">
    <!-- 3. 在视图中通过标签去使用指令 -->
    <input v-focus type="text">
</div>

<script src="./vue.js"></script>
<script>
    // 全局自定义指令
    // 1.在创建 Vue 实例之前定义全局自定义指令Vue.directive()
    // 2. Vue.directive('指令的核心名称',{ inserted: (使用指令时的DOM对象) => { 具体的DOM操作 } } );
    Vue.directive('focus', {
        // 当被绑定的元素插入到 DOM 中时,inserted会被调用
        inserted: (el) => {
            // el 就是指令所在的DOM对象
            el.focus();
        }
    });

    new Vue({
        el: '#app'
    });
</script>

Vue.directive (カスタム ディレクティブ名) は v- を追加する必要はありません。カスタム ディレクティブを使用する場合は v- を追加する必要があります。

挿入:バインドされた要素が DOM に挿入されると、それが呼び出されます。

コンポーネント

コンポーネントとは何ですか

要件:ページ内に同じ構造を持つ複数のコントロールがある場合。

<div id="app">
    <!-- 页面中有多个一样结构的标签: span+button -->
        <span>{
   
   {count1}}</span> <button @click="changeCount1">按钮</button> <br>
        <span>{
   
   {count2}}</span> <button @click="changeCount2">按钮</button> <br>
        <span>{
   
   {count3}}</span> <button @click="changeCount3">按钮</button> <br>
        <span>{
   
   {count4}}</span> <button @click="changeCount4">按钮</button> <br>
        <span>{
   
   {count5}}</span> <button @click="changeCount5">按钮</button> <br>
</div>

<script src="./vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            count1: 0,
            count2: 0,
            count3: 0,
            count4: 0,
            count5: 0
        },
        methods: {
            changeCount1() {
                this.count1++;
            },
            changeCount2() {
                this.count2++;
            },
            changeCount3() {
                this.count3++;
            },
            changeCount4() {
                this.count4++;
            },
            changeCount5() {
                this.count5++;
            }
        }
    });
</script>

質問：

  1. コードの重複

  2. メンテナンスに役立たない

解決策: Vue の非常に重要な機能であるコンポーネントを使用します。

<div id="app">
    <!-- 2. 使用组件 -->
    <span-btn></span-btn>
    <span-btn></span-btn>
    <span-btn></span-btn>
    <span-btn></span-btn>
</div>

<script src="./vue.js"></script>
<script>
    // 注册全局组件
    Vue.component('span-btn', {
        template: `
			<div>
				<span>{
   
   {count}}</span> 
				<button @click="changeCount">按钮</button>
                <br>
    		</div>
		`,
        data() {
            return {
                count: 0
            }
        },
        methods: {
            changeCount() {
                this.count++;
            }
        }
    });

    new Vue({
        el: '#app'
    });
</script>

コンポーネントとは:

コンポーネント システムは Vue のもう 1 つの重要な概念であり、これにより、小さくて独立した、多くの場合再利用可能なコンポーネントを使用して大規模なアプリケーションを構築できます。

考えてみてください。ほとんどすべての種類のアプリケーション インターフェイスをコンポーネント ツリーに抽象化できます。

たとえば、ヘッダー、サイドバー、コンテンツ領域などのコンポーネントがあり、それぞれにナビゲーション リンク、ブログ投稿などの他のコンポーネントが含まれている場合があります。

  • コンポーネントは名前が付いた再利用可能な Vue インスタンスです

  • コンポーネントのオプション:

    • コンポーネントは、新しい Vue と同じオプション ( 、  data、computed、watchライフmethods サイクル フックなど)を受け取ります。

    • 唯一の例外は、 el 次のような root インスタンス固有のオプションです。

  • さらに、コンポーネントには独自のオプション テンプレート、コンポーネントなどもあります。

コンポーネントの機能

  • コンポーネントはパッケージです

  • コンポーネントにより、既存の html、css、js を再利用できます。

  • 再利用可能

  • 特別な Vue インスタンスです

  • 何度でも再利用可能

  • コンポーネントが使用されるたびに、その新しいインスタンスが作成されます

  • コンポーネント内のデータ要件は関数である必要があり、オブジェクトを返す必要があります。

    • コンポーネントには独自のスコープがあります

  • template各コンポーネント テンプレートにはルート要素が 1 つだけあります

提案: 実際の開発では、element-ui/mint-ui/iview などのさまざまなサードパーティ コンポーネントをできるだけ使用してください。

コンポーネントの分類と使用方法

  • 分類:グローバル登録とローカル登録

  • 使用方法 (手順): 1. コンポーネントを登録します。 2. コンポーネントをコンポーネント名で使用します。

グローバル登録

  1. Vue.component（コンポーネント名、コンポーネントオプション）を使用して登録します

    コンポーネント名：小文字のプラス記号とマイナス記号の推奨命名方法

  2. 登録後に new Vue新しく作成された (1 つ以上の) Vue インスタンスによって ( を介して)使用されます。

Vue.component('组件名', {
    // 组件选项: data methods template等(没有el)
    // data 的值是一个函数, 需要返回一个对象
});
<div id="app">
    <!-- 2. 使用组件 -->
    <span-btn></span-btn>
    <span-btn></span-btn>
    <span-btn></span-btn>
    <span-btn></span-btn>
</div>
<hr>
<div id="app1">
    <span-btn></span-btn>
    <My-Component></My-Component>
</div>
<hr>
<div id="app2">
    <span-btn></span-btn>
</div>
<hr>
<div id="app3">
    <span-btn></span-btn>
</div>

<script src="./vue.js"></script>
<script>
    // 1. 注册组件
    // Vue.component('组件名', {
    //     // 组件选项: data methods template等
    // });

    Vue.component('span-btn', {
        // template: 页面字符串,有且仅有一个根元素
        template: `
			<div>
				<span>{
   
   {count}}</span> 
				<button @click="changeCount">按钮</button>
                <br>
    		</div>
		`,
        data() {
            return {
                count: 0
            }
        },
        methods: {
            changeCount() {
                this.count++;
            }
        }
    });

    Vue.component('myComponent', {
        template: `
			<div>
				<h1>{
   
   {num}}</h1> 
				<button @click="changeTitle">按钮</button>
                <br>
    		</div>
		`,
        style: './style.css',
        data() {
            return {
                num: 0
            }
        },
        methods: {
            changeTitle() {
                this.num++;
            }
        }
    });

    new Vue({
        el: '#app'
    });

    new Vue({
        el: '#app1'
    });
    new Vue({
        el: '#app2'
    });
    new Vue({
        el: '#app3'
    });
</script>

知らせ：

  1. グローバル コンポーネントは、Vue インスタンスがルート要素の下で有効になるように作成される前に作成する必要があります。

  2. 複数の異なるグローバル コンポーネントを異なる Vue インスタンスで使用できる

  3. 各コンポーネントには独自のスコープがあります

部分登録

  • コンポーネント オプションを使用して Vue インスタンスに直接登録します

  • components オブジェクト内の各プロパティについて 、

    • その属性名はカスタム要素の名前であり、その属性値はこのコンポーネントのオプション オブジェクトです。

<body>
    <div id="app">
        <!-- 2 使用组件 -->
        <com-A></com-A>
        <com-B></com-B>
        <com-C></com-C>
    </div>
</body>

<script src="./vue.js"></script>
<script>
    // 局部组件的选项
    const comA = {
        template: `<div>{
   
   {titleA}}</div>`,
        data() {
            return {
                titleA: 'comA中的data里的titleA'
            }
        }
    };
    const comB = {
        template: `<div>{
   
   {titleB}}</div>`,
        data() {
            return {
                titleB: 'comB中的data里的titleB'
            }
        }
    };

    const comC = {
        template: `<div>{
   
   {titleC}}</div>`,
        data() {
            return {
                titleC: 'comC中的data里的titleC'
            }
        }
    };

    new Vue({
        el: '#app',
        // 1. 在Vue实例中设置components选项{组件名:组件选项}
        components: {
            // 在页面中的组件名:组件选项
            'comA': comA,
            'comB': comB,
            'comC': comC
        }
    });
</script>

おすすめ

転載: blog.csdn.net/weixin_55992854/article/details/119976656
おすすめ
ランキング
uni.request在接口状态码403等还是走success
Springboot は mybatisplus を統合しており、ページング クエリによって返される Page オブジェクトの合計は常に 0 です。
System.InvalidOperationExceptionが：「BuildWindowCoreは、子ウィンドウのハンドル搭乗を返しません。」
[Example 08] IPD system advancement: version naming rules for version management
カスタム NavigationBar -- UIView による描画
データとデータの移行を復元します（個人的なメモ、無用リーダー）
4. 2次元配列で検索する
vim的私人订制
Flutterのカスタムルーティング切り替えアニメーション
Javaコンテナの方法の簡単なアプリケーションのArrayList
アーカイブ
もっと
2024-05-12(27)
2024-05-11(31)
2024-05-10(33)
2024-05-09(30)
2024-05-08(18)
2024-05-07(34)
2024-05-06(6)
2024-05-05(0)
2024-05-04(18)
2024-05-03(8)

コードワールド

© 2018 codetd.com