Maison >interface Web >tutoriel HTML >Comment utiliser VUE sur le front-end
Comment utiliser VUE sur le front-end
- php中世界最好的语言original
- 2017-11-27 09:32:009828parcourir
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!