Comment utiliser VUE sur le front-end
J'utilise VUE pour des projets depuis un certain temps. Je connais déjà VUE, mais je n'ai jamais écrit d'article d'introduction sur VUE. Je vais donc vous présenter aujourd'hui quelques cas pour bien présenter VUE. outil.
Recommandations de didacticiels vidéo associées : Recommandations de didacticiels Vue.js : les 5 dernières sélections de didacticiels vidéo vue.js en 2018
1. La version de vue utilisée dans cet article est la 2.4.2, qui peut être différente de la nouvelle version, donc tout le monde doit y prêter attention.
2. Maintenant, je suppose également que vous avez des connaissances de base en HTML, CSS et javascript. Vous avez également lu l'introduction de base sur le site officiel et avez une compréhension générale de vue. Découverte des instructions de vue couramment utilisées (v-model, v-show, v-if, v-for, v-on, v-bind, etc.) ! Si vous êtes nouveau dans le front-end, vous pourriez être confus en lisant l'article. Il est recommandé d'apprendre d'abord les bases, puis de le lire après avoir maîtrisé les connaissances de base !
3. Pour l'exemple suivant, je vous propose de le faire en lisant l'article ! De cette façon, votre réflexion sera très claire et moins confuse ! Vous n'aurez pas l'impression que l'article est trop long (la raison pour laquelle l'article est long est de permettre à tout le monde de lire plus d'informations, et beaucoup de codes répétés sont publiés. Ces codes, html, css, etc. peuvent être complètement ignorés) . Si vous lisez seulement l’article, vous risquez de ne pas le terminer, car l’article est plus détaillé et plus long !
4. Ces exemples sont tirés de mes propres projets de pratique quotidienne, et le code a été mentionné sur github (vue-demos). Bienvenue à tous dans la star. !
2. Qu'est-ce que vue
Vue est un framework MVVM frontal très populaire. Il est construit avec l'idée de la gestion des données et des composants. principaux frameworks frontaux ainsi qu'angular et React. Comparé à Angular et React, Vue est plus léger, plus performant et plus facile à utiliser. Vous pouvez également continuer et jeter un œil à l'introduction de vue et à l'introduction des fonctions de base sur le site officiel. La compréhension simple et approximative est la suivante : lors du développement avec vue, vous exploitez simplement les données, puis vue les traitera et modifiera le DOM piloté par les données (je ne sais pas si je comprends mal, veuillez me donner quelques conseils si tu fais).
Ce qui suit est l'exemple d'explication le plus simple
Le code est le suivant
html
<div id="app">
<p>{{ message }}</p>
<input v-model="message">
</div>
js
new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})Je pense que ce n'est pas difficile à comprendre, c'est-à-dire que l'entrée est liée à la valeur du message, puis modifié dans l'entrée. À ce moment-là, le message a été modifié En raison de la liaison bidirectionnelle, le html ({{ message }}) de la page a été modifié en même temps !
D’accord, apprenons des exemples !
3. Onglet
Analyse et mise en œuvre des principes
C'est très simple, ce n'est rien de plus qu'un clic pour changer d'affichage. Mais il faut aussi que chacun en prenne conscience. Si vous comprenez cela, regardez les deux suivants ! Cet exemple ne devrait être qu’un effet d’échauffement et de familiarisation !
Cette étape ne comporte qu'une seule étape, et le principe est le même. Je commente directement dans le code. Après avoir lu les commentaires, tout le monde comprendra !
Code complet
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
body{
font-family:"Microsoft YaHei";
}
#tab{
width: 600px;
margin: 0 auto;
}
.tab-tit{
font-size: 0;
width: 600px;
}
.tab-tit a{
display: inline-block;
height: 40px;
line-height: 40px;
font-size: 16px;
width: 25%;
text-align: center;
background: #ccc;
color: #333;
text-decoration: none;
}
.tab-tit .cur{
background: #09f;
color: #fff;
}
.tab-con div{
border: 1px solid #ccc;
height: 400px;
padding-top: 20px;
}
</style>
<body>
<div id="tab">
<div>
<!--点击设置curId的值 如果curId等于0，第一个a添加cur类名，如果curId等于1，第二个a添加cur类名，以此类推。添加了cur类名，a就会改变样式 @click,:class ,v-show这三个是vue常用的指令或添加事件的方式-->
<a href="javascript:;" @click="curId=0" :class="{'cur':curId===0}">html</a>
<a href="javascript:;" @click="curId=1" :class="{'cur':curId===1}">css</a>
<a href="javascript:;" @click="curId=2" :class="{'cur':curId===2}">javascript</a>
<a href="javascript:;" @click="curId=3" :class="{'cur':curId===3}">vue</a>
</div>
<div>
<!--根据curId的值显示div,如果curId等于0，第一个div显示，其它三个div不显示。如果curId等于1，第二个div显示，其它三个div不显示。以此类推-->
<div v-show="curId===0">
html<br/>
</div>
<div v-show="curId===1">
css
</div>
<div v-show="curId===2">
javascript
</div>
<div v-show="curId===3">
vue
</div>
</div>
</div>
</body>
<script src="vue.min.js"></script>
<script>
new Vue({
el: '#tab',
data: {
curId: 0
},
computed: {},
methods: {},
mounted: function () {
}
})
</script>
</html>C'est tout. Grâce à ce cas, je pense que vous avez également une certaine compréhension de Vue. Pour des informations plus intéressantes, veuillez prêter attention à d'autres sujets connexes sur le chinois php. article du site !
Lecture connexe :
Comment utiliser CSS3 et JS pour créer un arrière-plan dynamique carré montant
Principales applications fonctionnelles de CSS3
Comment utiliser l'animation de transition en CSS3
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!
Outils d'IA chauds
Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes
AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.
Undress AI Tool
Images de déshabillage gratuites
Clothoff.io
Dissolvant de vêtements AI
AI Hentai Generator
Générez AI Hentai gratuitement.
Article chaud
Outils chauds
Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit
SublimeText3 version chinoise
Version chinoise, très simple à utiliser
Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP
Dreamweaver CS6
Outils de développement Web visuel
SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)
Quel logiciel est CrystalDiskmark ? -Comment utiliser crystaldiskmark ?
Mar 18, 2024 pm 02:58 PM
CrystalDiskMark est un petit outil de référence pour disques durs qui mesure rapidement les vitesses de lecture/écriture séquentielles et aléatoires. Ensuite, laissez l'éditeur vous présenter CrystalDiskMark et comment utiliser crystaldiskmark~ 1. Introduction à CrystalDiskMark CrystalDiskMark est un outil de test de performances de disque largement utilisé pour évaluer la vitesse et les performances de lecture et d'écriture des disques durs mécaniques et des disques SSD (SSD). ). Performances d’E/S aléatoires. Il s'agit d'une application Windows gratuite qui fournit une interface conviviale et divers modes de test pour évaluer différents aspects des performances du disque dur. Elle est largement utilisée dans les revues de matériel.
Comment télécharger foobar2000 ? -Comment utiliser foobar2000
Mar 18, 2024 am 10:58 AM
foobar2000 est un logiciel qui peut écouter des ressources musicales à tout moment. Il vous offre toutes sortes de musique avec une qualité sonore sans perte. La version améliorée du lecteur de musique vous permet d'obtenir une expérience musicale plus complète et plus confortable. lire l'audio avancé sur l'ordinateur. L'appareil est transplanté sur le téléphone mobile pour offrir une expérience de lecture de musique plus pratique et efficace. La conception de l'interface est simple, claire et facile à utiliser. opérations pour démarrer rapidement. Il prend également en charge une variété de skins et de thèmes, personnalisez les paramètres en fonction de vos propres préférences et créez un lecteur de musique exclusif prenant en charge la lecture de plusieurs formats audio. Il prend également en charge la fonction de gain audio pour régler le volume. selon vos propres conditions auditives pour éviter les dommages auditifs causés par un volume excessif. Ensuite, laisse-moi t'aider
Comment utiliser NetEase Mailbox Master
Mar 27, 2024 pm 05:32 PM
NetEase Mailbox, en tant qu'adresse e-mail largement utilisée par les internautes chinois, a toujours gagné la confiance des utilisateurs grâce à ses services stables et efficaces. NetEase Mailbox Master est un logiciel de messagerie spécialement créé pour les utilisateurs de téléphones mobiles. Il simplifie grandement le processus d'envoi et de réception d'e-mails et rend le traitement de nos e-mails plus pratique. Alors comment utiliser NetEase Mailbox Master, et quelles sont ses fonctions spécifiques Ci-dessous, l'éditeur de ce site vous donnera une introduction détaillée, en espérant vous aider ! Tout d’abord, vous pouvez rechercher et télécharger l’application NetEase Mailbox Master dans la boutique d’applications mobiles. Recherchez « NetEase Mailbox Master » dans l'App Store ou Baidu Mobile Assistant, puis suivez les instructions pour l'installer. Une fois le téléchargement et l'installation terminés, nous ouvrons le compte de messagerie NetEase et nous connectons. L'interface de connexion est la suivante
Comment utiliser l'application Baidu Netdisk
Mar 27, 2024 pm 06:46 PM
Le stockage cloud est devenu aujourd’hui un élément indispensable de notre vie quotidienne et de notre travail. En tant que l'un des principaux services de stockage cloud en Chine, Baidu Netdisk a gagné la faveur d'un grand nombre d'utilisateurs grâce à ses puissantes fonctions de stockage, sa vitesse de transmission efficace et son expérience de fonctionnement pratique. Et que vous souhaitiez sauvegarder des fichiers importants, partager des informations, regarder des vidéos en ligne ou écouter de la musique, Baidu Cloud Disk peut répondre à vos besoins. Cependant, de nombreux utilisateurs peuvent ne pas comprendre l'utilisation spécifique de l'application Baidu Netdisk, ce didacticiel vous présentera donc en détail comment utiliser l'application Baidu Netdisk. Si vous êtes toujours confus, veuillez suivre cet article pour en savoir plus ! Comment utiliser Baidu Cloud Network Disk : 1. Installation Tout d'abord, lors du téléchargement et de l'installation du logiciel Baidu Cloud, veuillez sélectionner l'option d'installation personnalisée.
Tutoriel BTCC : Comment lier et utiliser le portefeuille MetaMask sur l'échange BTCC ?
Apr 26, 2024 am 09:40 AM
MetaMask (également appelé Little Fox Wallet en chinois) est un logiciel de portefeuille de cryptage gratuit et bien accueilli. Actuellement, BTCC prend en charge la liaison au portefeuille MetaMask. Après la liaison, vous pouvez utiliser le portefeuille MetaMask pour vous connecter rapidement, stocker de la valeur, acheter des pièces, etc., et vous pouvez également obtenir un bonus d'essai de 20 USDT pour la première liaison. Dans le didacticiel du portefeuille BTCCMetaMask, nous présenterons en détail comment enregistrer et utiliser MetaMask, ainsi que comment lier et utiliser le portefeuille Little Fox dans BTCC. Qu'est-ce que le portefeuille MetaMask ? Avec plus de 30 millions d’utilisateurs, MetaMask Little Fox Wallet est aujourd’hui l’un des portefeuilles de crypto-monnaie les plus populaires. Son utilisation est gratuite et peut être installée sur le réseau en tant qu'extension
Vous apprendre à utiliser les nouvelles fonctionnalités avancées d'iOS 17.4 « Protection des appareils volés »
Mar 10, 2024 pm 04:34 PM
Apple a déployé mardi la mise à jour iOS 17.4, apportant une multitude de nouvelles fonctionnalités et de correctifs aux iPhones. La mise à jour inclut de nouveaux emojis et les utilisateurs de l’UE pourront également les télécharger depuis d’autres magasins d’applications. En outre, la mise à jour renforce également le contrôle de la sécurité de l'iPhone et introduit davantage d'options de configuration de « Protection des appareils volés » pour offrir aux utilisateurs plus de choix et de protection. "iOS 17.3 introduit pour la première fois la fonction "Protection des appareils volés", ajoutant une sécurité supplémentaire aux informations sensibles des utilisateurs. Lorsque l'utilisateur est loin de chez lui et d'autres lieux familiers, cette fonction nécessite que l'utilisateur saisisse des informations biométriques pour la première fois. heure, et après une heure, vous devez saisir à nouveau les informations pour accéder et modifier certaines données, telles que la modification du mot de passe de votre identifiant Apple ou la désactivation de la protection de l'appareil volé.
Comment utiliser l'application Xiaomi Auto
Apr 01, 2024 pm 09:19 PM
Le logiciel de voiture Xiaomi fournit des fonctions de contrôle de voiture à distance, permettant aux utilisateurs de contrôler le véhicule à distance via des téléphones mobiles ou des ordinateurs, comme l'ouverture et la fermeture des portes et fenêtres du véhicule, le démarrage du moteur, le contrôle de la climatisation et du système audio du véhicule, etc. l'utilisation et le contenu de ce logiciel, découvrons-le ensemble. Liste complète des fonctions et méthodes d'utilisation de l'application Xiaomi Auto 1. L'application Xiaomi Auto a été lancée sur l'AppStore d'Apple le 25 mars et peut désormais être téléchargée depuis l'App Store sur les téléphones Android. Achat de voiture : découvrez les principaux points forts et les paramètres techniques ; de Xiaomi Auto, et prenez rendez-vous pour un essai routier, configurez et commandez votre voiture Xiaomi, et prenez en charge le traitement en ligne des tâches de récupération de voiture. 3. Communauté : comprenez les informations de la marque Xiaomi Auto, échangez votre expérience automobile et partagez une vie de voiture merveilleuse. 4. Contrôle de la voiture : le téléphone mobile est la télécommande, la télécommande, la sécurité en temps réel, facile ;
PHP et Vue : une combinaison parfaite d'outils de développement front-end
Mar 16, 2024 pm 12:09 PM
PHP et Vue : une combinaison parfaite d'outils de développement front-end À l'ère actuelle de développement rapide d'Internet, le développement front-end est devenu de plus en plus important. Alors que les utilisateurs ont des exigences de plus en plus élevées en matière d’expérience des sites Web et des applications, les développeurs front-end doivent utiliser des outils plus efficaces et plus flexibles pour créer des interfaces réactives et interactives. En tant que deux technologies importantes dans le domaine du développement front-end, PHP et Vue.js peuvent être considérés comme une arme parfaite lorsqu'ils sont associés. Cet article explorera la combinaison de PHP et Vue, ainsi que des exemples de code détaillés pour aider les lecteurs à mieux comprendre et appliquer ces deux éléments.
