Scénarios d'enregistrement et d'utilisation des filtres, des instructions personnalisées et des composants

Écrivez-les ensemble car ils sont divisés en deux types : l'enregistrement local et l'enregistrement global.

Il est à noter que les mots clés utilisés dans l'enregistrement local (avec s) et l'enregistrement global (sans s) des trois sont similaires, veuillez faire attention à la distinction.

De plus, l'enregistrement global des filtres, l'enregistrement global des instructions personnalisées et l'enregistrement global des composants doivent être écrits avant l'instance Vue. Pour plus de détails, veuillez consulter : https://blog.csdn.net/weixin_55992854/article/details/119107461 .

Table des matières

filtre

inscription partielle

enregistrement mondial

développer

1. Le filtre peut transmettre des paramètres

2. Les filtres peuvent être utilisés en série

directive personnalisée

inscription partielle

enregistrement mondial

Composants

qu'est-ce qu'un composant

Caractéristiques des composants

Classification et utilisation des composants

enregistrement mondial

inscription partielle

filtre

Rôle : traitement du format des données
Où utiliser : interpolation de doubles accolades et expressions v-bind (cette dernière est prise en charge à partir de la version 2.1.0+).
Classification : enregistrement local et enregistrement global

inscription partielle

Configurez les filtres de filtrage dans les options de l'objet instance Vue : {}
Nom du filtre : (données à filtrer) => {retourner le résultat filtré}
Utiliser des filtres dans les vues : { {données filtrées | nom du filtre}

<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>

Remarque : les filtres enregistrés localement ne s'appliquent qu'à l'objet d'instance Vue actuel.

enregistrement mondial

Définissez le filtre global Vue.filter() avant de créer l'instance Vue
Vue.filter('nom du filtre', (données à filtrer) => {retourner le résultat du traitement des données});
Utilisez des filtres dans les vues via { {data | filter name}} ou 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>

Remarque : les filtres enregistrés globalement peuvent être utilisés par différents objets d'instance Vue.

développer

1. Le filtre peut transmettre des paramètres

<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. Les filtres peuvent être utilisés en série

<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>

directive personnalisée

Scénario d'utilisation : besoin d'opérer sur des éléments DOM ordinaires, à ce stade, des instructions personnalisées seront utilisées
Classification : enregistrement mondial et enregistrement local

inscription partielle

Définissez les directives d'instructions personnalisées dans les options de l'objet d'instance Vue :{}
directives :{'Le nom principal de l'instruction' :{ inséré : (objet DOM lors de l'utilisation de l'instruction) => {opération DOM spécifique} }}
Utiliser des directives dans les vues via des étiquettes

<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>

Remarque : Elle ne peut être utilisée que dans la vue gérée par l'instance de vue où se trouve cette option

enregistrement mondial

Définissez la directive personnalisée globale Vue.directive() avant de créer l'instance Vue
Vue.directive('nom de la directive', { inséré : (objet DOM utilisant la directive) => { opération DOM spécifique} } );
Utilisez "nom de commande v-custom" dans la vue pour utiliser la commande

<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 (nom de la directive personnalisée) n'a pas besoin d'ajouter v- lors de l'utilisation de directives personnalisées, il faut ajouter v-

inséré : lorsque l'élément lié est inséré dans le DOM, il sera appelé

Composants

qu'est-ce qu'un composant

Exigences : S'il existe plusieurs contrôles avec la même structure dans la page, tels que

<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>

question:

duplication de code

peu propice à l'entretien

Solution : utilisez une fonctionnalité très importante dans Vue : les composants

<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>

Qu'est-ce qu'un composant :

Le système de composants est un autre concept important de Vue, nous permettant de créer de grandes applications à l'aide de petits composants indépendants et souvent réutilisables .

Pensez-y, presque tous les types d'interfaces d'application peuvent être résumés dans une arborescence de composants :

Par exemple, vous pouvez avoir des composants tels qu'un en-tête, une barre latérale, une zone de contenu, etc., chacun contenant d'autres composants tels que des liens de navigation, des articles de blog, etc.

Les composants sont des instances Vue réutilisables avec un nom
Options des composants :
- Les composants reçoivent les mêmes options que le nouveau Vue : par exemple , , dataet computedles hooks de cycle de vie, etc.watchmethods
- Les seules exceptions sont el les options spécifiques à l'instance racine comme celle-ci
De plus, les composants ont également leur propre modèle d'options, composants, etc.

Caractéristiques des composants

Un composant est un package
Les composants nous permettent de réutiliser du HTML, CSS, JS existant
réutilisable
est une instance spéciale de Vue
Peut être réutilisé plusieurs fois
Chaque fois qu'un composant est utilisé, une nouvelle instance de celui-ci est créée
L'exigence de données dans le composant doit être une fonction et doit renvoyer un objet
- Les composants ont leur propre portée
template Chaque modèle de composant possède un et un seul élément racine

Suggestion : dans le développement réel, utilisez autant que possible divers composants tiers tels que element-ui/mint-ui/iview

Classification et utilisation des composants

Classification : enregistrement mondial et enregistrement local
Utilisation (étapes) : 1. Enregistrez le composant 2. Utilisez le composant par nom de composant

enregistrement mondial

Utilisez Vue.component (nom du composant, options du composant) pour vous inscrire

Nom du composant : méthode de dénomination recommandée pour les signes plus et moins minuscules
new VueUtilisé par toute (via ) instance Vue nouvellement créée (une ou plusieurs) après son enregistrement

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>

Avis:

Le composant global doit être écrit avant la création de l'instance Vue pour prendre effet sous l'élément racine

Plusieurs composants globaux différents peuvent être utilisés dans différentes instances de Vue

Chaque composant a sa propre portée

inscription partielle

Inscrivez-vous directement dans l'instance Vue via l'option composants
Pour components chaque propriété de l'objet,
- Son nom d'attribut est le nom de l'élément personnalisé et sa valeur d'attribut est l'objet option de ce composant.

<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>