Exemples de compétences en développement de vues qui valent la peine d'être collectées

Dans cet article, nous développerons certaines compétences de développement utiles de Vue sous de nombreux aspects. Cela vaut la peine d'être collecté. J'espère que cela pourra aider tout le monde.

1. L'utilisation intelligente des espaces réservés et du développement de formulaires

calculés est certainement une partie essentielle du développement quotidien, mais les dessins de conception ont souvent des valeurs par défaut de formulaire, telles que :

Le point de demande du demandeur est  : affiche la valeur par défaut lorsqu'aucune valeur n'est saisie, et affiche l'entrée lorsque la valeur est valeur saisie.

Habituellement, vous pouvez penser à utiliser placeholder pour résoudre ce problème, et v-model est généralement utilisé pour lier la valeur dans data. Ensuite, la valeur de data définit la valeur par défaut sur vide

//script
data(){
    return {
        index:0,
        name:''
    }
}
//template
<input type="number" placeholder="默认值index" v-model="index"/>
<input type="text" placeholder="默认值name" v-model="name"/>

L'effet ci-dessus est que la valeur de l'espace réservé de la première entrée ne peut pas être affichée et la valeur de l'index est affichée : 0 , non Répond aux exigences
Le deuxième type peut afficher la valeur de l'espace réservé, qui répond aux exigences.

Mais pour certaines exigences complexes, comme permettre à l'utilisateur de sélectionner un nom de ville (city) et un nom de pays (country), et enfin de les afficher dans une variable (countryAndCity), dans ce cas computed

doit être utilisé

//template
<input type="text" placeholder="城市" v-model="city"/>
<input type="text" placeholder="国家" v-model="country"/>
<input type="text" placeholder="国家+城市" v-model="countryAndCity"/>

//script
data(){
    return {
        city:'',
        country:''
    }
},
computed:{
    countryAndCity () {
        let str = ''
        if(this.city && this.country){
            str = `${this.city}+${this.country}`
        }
        return str
    }
}

Vous devez porter un jugement ci-dessus. Le résultat sera affiché lorsque la ville et le pays ont des valeurs. Sinon, la valeur de l'espace réservé sera affichée.

2. Conception de sélections à sélection unique et à sélection multiple

Telles que les boutons de sélection radio et de sélection multiple conçus par les concepteurs
Les boutons radio sont relativement simples

//template
<li v-for="item, index in list" :class="{"active":currentIndex === index}" @click="select(index)">{{item}}</li>

//script

data(){
    return {
        currentIndex:0，
        list:['aa','bb','cc','dd']
    }
},
methods:{
    select(index){
        this.currentIndex = index
    }
}

Ce qui précède est très simple, vous pouvez probablement le comprendre après l'avoir lu. Il s'agit d'une situation à sélection unique, mais s'il s'agit d'une situation de sélection multiple, alors vous devez changer votre situation. en pensant

Changer d'abord le format des données

data(){
    return {
        list:[
        {text:'aa',isActive:false},
        {text:'bb',isActive:false}
        {text:'cc',isActive:false}'
        ]
    }
},
methods:{
    select(index){
        this.list[index].isActive = !this.list[index].isActive
    }
}

Ensuite, le modèle deviendra comme ceci

<li v-for="(item, index) in list" :class="{"active":item.isActive}" @click="select(index)">{{item.text}}</li>

Utilisation de composants dynamiques et de composants asynchrones

Les composants dynamiques sont généralement rarement utilisés, mais ils sont très faciles à utiliser lors de l'introduction dynamique de composants. C'est le cœur du système de configuration des composants que nous avons créé auparavant. J'utilise une boucle de composants dynamiques, puis j'utilise pour obtenir le nom du composant et j'utilise des accessoires pour obtenir les accessoires personnalisés de chaque composant

<components :is="item.name" v-for="item, index in componentList" :props="item.props"></components>

componentList:[{ name:'index',props:{title:'title'}}]

Rendu côté serveur des éléments créés et montés

Les objets fenêtre créés et montés existent tous deux lors du rendu client, ils peuvent donc être utilisés directement.
Mais lors du rendu côté serveur, leurs fenêtres n'existent pas, donc un jugement doit être ajouté devant toute logique

if(typeof window !== 'object') return ;

5 La merveilleuse utilisation de this.$emit

<.>Sur la base de la réflexion sur les composants, nous diviserons souvent une page en plusieurs composants, puis extrairons certains composants communs, tels que le composant contextuel de boîte de dialogue. Son ouverture et sa fermeture sont basées sur la page du composant de référence. une valeur de données,

//app.vue
<dialog v-if="isDialog"></dialog>

data(){
    return {
        isDialog:false
    }
}
methods:{
    showDialog(){
        this.isDialog = true
    }
}

Mais le bouton de fermeture est généralement écrit à l'intérieur du composant de dialogue, c'est-à-dire qu'il n'existe pas de bouton de ce type sur lequel on peut cliquer sur la page du composant de référence,

Donc , vous pouvez Dans la boîte de dialogue, le
signal du temps de clic est transmis. La page du composant de référence reçoit le signal, puis contrôle la fermeture

//dialog.vue
 
<p @click="close"> 点击关闭 </p>

methods:{
    close() {
        this.$emit('close')
    }
}    

//app.vue
<dialog v-if="isDialog" @close="closeDialog"></dialog>

data(){
    return {
        isDialog:false
    }
}
methods:{
    showDialog(){
        this.isDialog = true
    },
    closeDialog(){
        this.isDialog = false
    }
}

. pour mettre l'opération de fermeture réelle dans la page

pour une utilisation facile. isDialogÀ l'avenir, il y aura une méthode d'écriture de composants publics qui ne fera pas référence de cette manière et sera directement référencée dans la méthode méthodes. Veuillez rester à l'écoute

6.css scoped

css. in vue peut être utilisé La clé scoped est utilisée pour limiter la portée du CSS

<style scoped>...</style>

Ceci est utilisé tous les jours, car de cette façon, il n'est pas nécessaire de considérer que les noms de classe se chevaucheront, et utilisez sass , moins, stylet, postcss et autre dispositif de traitement css, l'effet est tout simplement génial.

Mais si vous souhaitez modifier le style CSS de l'élément body, mais que vous ne souhaitez pas modifier le modèle de mise en page publique. Ensuite, vous pouvez écrire deux balises
style

<style> body{...} </style>
<style scoped> .. .</style>

dans un fichier vue Recommandations associées :

Tutoriel d'implémentation de Vue pour diviser les numéros de téléphone mobile dans les zones de saisie des numéros.

Explication détaillée des chaînes d'épissage de la syntaxe vue

Explication détaillée de l'utilisation d'Eventbus pour transmettre des valeurs entre les composants vue

transition vue Explication détaillée de l'animation

Un exemple simple de vue implémentant la fonction de compte à rebours de 60 secondes du code de vérification

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!